Fatal编程技术网
  • javascript/
  • Javascript JQuery和HTML5音频进度条不工作 $（文档）.ready（函数（）{ var计数器=0； $（“#播放bt”）。单击（函数（）{ $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#暂停bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“#消息”）。文本（“音乐暂停”）； }) $（“#停止bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； $（“#消息”）。文本（“音乐停止”）； }) $（“#下一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器++； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#上一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器--； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“.audio player”）.bind（'timeupdate'，function（）{ var track_length=$（“.audio player”）[计数器]。持续时间； var secs=$（“.audio player”）[counter].currentTime； var进度=（秒/轨道长度）*100； $（'#progress'）.css（{'width'：progress*2}）； var tcMins=parseInt（秒/60）； var tcSecs=parseInt（secs-（tcMins*60））； 如果（tcSecs

Javascript JQuery和HTML5音频进度条不工作 $（文档）.ready（函数（）{ var计数器=0； $（“#播放bt”）。单击（函数（）{ $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#暂停bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“#消息”）。文本（“音乐暂停”）； }) $（“#停止bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； $（“#消息”）。文本（“音乐停止”）； }) $（“#下一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器++； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#上一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器--； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“.audio player”）.bind（'timeupdate'，function（）{ var track_length=$（“.audio player”）[计数器]。持续时间； var secs=$（“.audio player”）[counter].currentTime； var进度=（秒/轨道长度）*100； $（'#progress'）.css（{'width'：progress*2}）； var tcMins=parseInt（秒/60）； var tcSecs=parseInt（secs-（tcMins*60））； 如果（tcSecs

javascript jquery html audio

Javascript JQuery和HTML5音频进度条不工作 $（文档）.ready（函数（）{ var计数器=0； $（“#播放bt”）。单击（函数（）{ $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#暂停bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“#消息”）。文本（“音乐暂停”）； }) $（“#停止bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； $（“#消息”）。文本（“音乐停止”）； }) $（“#下一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器++； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“#上一个bt”）。单击（函数（）{ $（“.audio player”）[计数器].pause（）； $（“.audio player”）[计数器].currentTime=0； 计数器--； $（“.audio player”）[计数器].play（）； $（“#消息”）.text（“音乐开始”）； }) $（“.audio player”）.bind（'timeupdate'，function（）{ var track_length=$（“.audio player”）[计数器]。持续时间； var secs=$（“.audio player”）[counter].currentTime； var进度=（秒/轨道长度）*100； $（'#progress'）.css（{'width'：progress*2}）； var tcMins=parseInt（秒/60）； var tcSecs=parseInt（secs-（tcMins*60））； 如果（tcSecs,javascript,jquery,html,audio,Javascript,Jquery,Html,Audio,一切正常。代码确实做了它需要做的事情，但显然进度条不起作用，并显示了原因是什么？我检查了控制台，但没有显示任何错误。如何显示当前播放歌曲的进度条？您可以添加控件属性。 像 您的浏览器不支持音频元素。 ps firefox仅支持ogg。不要在进度条和容器中使用内联元素。尝试使用div而不是span，并为其提供一些附加样式，以便您可以看到它（例如，背景色和尺寸）。进度条的宽度计算应为百分比，而不是px 另外，我建议只使用一个音频元素并使用jQuery更新源代码，而不是使用绑定了多个处理程序的多个

一切正常。代码确实做了它需要做的事情，但显然进度条不起作用，并显示了原因是什么？我检查了控制台，但没有显示任何错误。如何显示当前播放歌曲的进度条？

您可以添加控件属性。 像


您的浏览器不支持音频元素。
ps firefox仅支持ogg。

不要在进度条和容器中使用内联元素。尝试使用div而不是span，并为其提供一些附加样式，以便您可以看到它（例如，背景色和尺寸）。进度条的宽度计算应为百分比，而不是px

另外，我建议只使用一个音频元素并使用jQuery更新源代码，而不是使用绑定了多个处理程序的多个音频元素。

这只适用于Chrome，如果您希望ogg文件在Firefox中工作，则需要添加ogg文件

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>


$（文档）.ready（函数（）{
var计数器=0；
$（“#播放bt”）。单击（函数（）{
$（“.audio player”）[计数器].play（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#暂停bt”）。单击（函数（）{
$（“.audio player”）[计数器].pause（）；
$（“#消息”）。文本（“音乐暂停”）；
})
$（“#停止bt”）。单击（函数（）{
$（“.audio player”）[计数器].pause（）；
$（“.audio player”）[计数器].currentTime=0；
$（“#消息”）。文本（“音乐停止”）；
})
$（“#下一个bt”）。单击（函数（）{
$（“.audio player”）[计数器].pause（）；
$（“.audio player”）[计数器].currentTime=0；
计数器++；
$（“.audio player”）[计数器].play（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“#上一个bt”）。单击（函数（）{
$（“.audio player”）[计数器].pause（）；
$（“.audio player”）[计数器].currentTime=0；
计数器--；
$（“.audio player”）[计数器].play（）；
$（“#消息”）.text（“音乐开始”）；
})
$（“.audio player”）.bind（'timeupdate'，function（）{
var track_length=$（“.audio player”）[计数器]。持续时间；
var secs=$（“.audio player”）[counter].currentTime；
var进度=（秒/轨道长度）*100；
$（'#progress'）.css（{'width'：progress+“%”）；
var tcMins=parseInt（秒/60）；
var tcSecs=parseInt（secs-（tcMins*60））；
如果（tcSecs<10）{tcSecs='0'+tcSecs；}
//显示时间
$（'#timecode'）.html（tcMins+'：'+tcSecs）；
})
})

  • 

  • 

  •
    或者让别人为你做所有的艰苦工作。如何提供flash回退？我需要创建一个不使用任何Jquery插件的播放器： 
    <audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js "></script>
        <script>
            $(document).ready(function(){

                var counter = 0;
                $("#play-bt").click(function(){
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#pause-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $("#message").text("Music paused");
                })

                $("#stop-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    $("#message").text("Music Stopped");
                })

                $("#next-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter++;
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $("#prev-bt").click(function(){
                    $(".audio-player")[counter].pause();
                    $(".audio-player")[counter].currentTime = 0;
                    counter--;
                    $(".audio-player")[counter].play();
                    $("#message").text("Music started");
                })

                $(".audio-player").bind('timeupdate', function(){

                    var track_length = $(".audio-player")[counter].duration;
                    var secs = $(".audio-player")[counter].currentTime;
                    var progress = (secs/track_length) * 100;

                     $('#progress').css({'width' : progress + "%"});

                    var tcMins = parseInt(secs/60);
                    var tcSecs = parseInt(secs - (tcMins * 60));

                    if (tcSecs < 10) { tcSecs = '0' + tcSecs; }

                    // Display the time
                    $('#timecode').html(tcMins + ':' + tcSecs);
                })

            })
        </script>
    </head>
<body>
            <div class = "jp-audio"><audio class ="audio-player"  name= "audio-player" src="01-Breakin-A-Sweat-Zedd-Remix.mp3" ></audio></div>
            <div class = "jp-audio"><audio class ="audio-player" name= "audio-player" src="01-hard_rock_sofa-quasar.mp3" ></audio></div>
            <div id="message"></div>
            <div id = "playerContainer">
                <ul id = "playerControls">
                    <li><a id="play-bt" href="#">Play music</a></li> <li> <a id="pause-bt" href="#">Pause music</a></li> 
                    <li><a id="stop-bt" href="#">Stop music</a></li>  <li><a id = "next-bt" href ="#">Next Track</a></li> 
                    <li><a id = "prev-bt" href ="#">Previous Track</a></li>
                </ul>

                 <div id="progressContainer" style="width: 250px;">
                   <div id="timecode"></div>
                   <div id="progress" style="height: 10px; background-color: red; width: 0%;"></div>
                 </div>
            </div>
    </body>
</html>