自定义音频播放器问题答案

【问题标题】：Custom audio player issues自定义音频播放器问题
【发布时间】：2015-06-12 18:51:16
【问题描述】：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/CSS">
            #custom{
                font-family: monospace;
            font-size: 16px;
            max-width: 650px;
            border-style: solid;
            border-color: black;
            border-width: 1px;
            border-radius: 5px;
            padding: 8px;
            padding-bottom: 15px;
            padding-left: 12px;
            padding-right: 12px;
        }
        img{
            margin-top: 3px;
            float: left;
        }
        #bar, #currentTime, #duration, #skip{
            display: inline-block;
        }
        #currentTime, #duration, #skip{
            margin: 0px;
            padding: 0px;
            margin-top: 3px;
            margin-left: 10px;
        }
        #bar{
            margin-top: 10px;
            height: 14px;
            width: 400px;
            background: lightgrey;
            border-radius: 50px;
            margin-left: 9px;

        }
        #slider{
            height: 14px;
            width: 15px;
            background: black;
            border-radius: 50px;
        }
    </style>
</head>
<body onLoad="count()">
    <script type="text/javascript">
        var track = 0;
        function count(){       
            var music = document.getElementById("myAudio");
            var duration = music.duration;
            var durationInMins = Math.floor(duration/60);
            var durationInSecs = Math.floor(duration-(durationInMins*60));
                if(durationInSecs < 10){
                    var durationInSecs = "0" + durationInSecs;
                }
                if(durationInMins < 10){
                    var durationInMins = "0" + durationInMins;
                }
            document.getElementById("duration").innerHTML = durationInMins + ":" + durationInSecs;
            var timer = setInterval( 
                function(){
                    var music = document.getElementById("myAudio");
                    var currentTime = music.currentTime;
                    if(currentTime > 60){
                        var min = Math.floor(currentTime/60);
                        var sec = Math.floor(currentTime-(min*60)); 
                    }else{
                        var min = "0";
                        var sec = Math.floor(music.currentTime);                        }
                    if(sec < 10){
                        var sec = "0" + sec;
                    }
                    if(min < 10){
                        var min = "0" + min;
                    }
                    document.getElementById("currentTime").innerHTML = min + ":" + sec;                     var percent = 100 * (music.currentTime/duration) - 2;
                    document.getElementById("slider").style.marginLeft=percent + "%";
                }
            , 1000);
            }
        function toggleP(){
            var music = document.getElementById("myAudio");
            if(music.paused == true){
                music.play();
            }else if(music.paused == false){
                music.pause();
            }
        }
        function skip(){
            var trackList = ["http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3", "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"];
            if(go == "back"){
                track = track - 1;
            }
            if(go == "forward"){
                track = track + 1;
            }
            var aa = clearInterval("timer");
            var music = document.getElementById("myAudio");
            music.pause();
            music.src=trackList[track];
            music.load();
            var a = setTimeout(function(){music.play(); count();} , 6000);
        }
    </script>
    <audio id="myAudio" src="http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3">
    </audio>
    <br>
    <div id="custom">
            <img onClick="toggleP()" src="img/media-play-pause-resume.png" height="30px"/>
        <p id="currentTime">00:00</p>
        <div id="bar">
            <div id="slider"></div>
        </div>
        <p id="duration">00:00</p>
        <p id="skip"><strong><a onClick="go = 'back'; skip()"><<</a> <a onClick="go = 'forward'; skip()">>></a><strong></p>
    </div>
</body>

谁能告诉我为什么在您跳到第二首歌曲后，歌曲时长滑块会前后跳动？以及为什么不能在不移动所有内容的情况下使用 margin-top 向下移动持续时间栏。我就是想不通。任何帮助将不胜感激，谢谢。

【问题讨论】：

只是出于好奇……你可以使用 jQuery 吗？我问的是因为这样你就可以用几行来做一个非常好的带有可拖动滑块等的播放器......
不，这样做的目的是用纯 JavaScript 制作一个。
达米安，这是你的代码：jsbin.com/kayesu/1/edit?html,css,js,output。抱歉，我只能看到 JS 中的 14 个错误、NaN 错误、未转义的< 和 HTML 等中的> 等等。没有来回跳跃。它播放一首歌，而不是在与您的代码进行任何其他交互时悲惨地停止。
感谢您的帮助。
不客气！快乐编码。如果您从我的示例中无法理解某些内容（我试图保持“简单/简短”......），请随时提问。

标签： javascript css html audio

【解决方案1】：

jsBin demo

不要在您的 HTML 中使用 内联 JS！使代码难以调试。让您的逻辑远离您的演示文稿/模板。

首先，变量如何工作？一旦设置了var，就无需在代码中使用var 再次实例化相同的变量。只需使用/修改它。所以一旦你设置在顶部

function el(id){return document.getElementById(id);} // Helps get easily an element

var el_music    = el("myAudio"), // see?
    el_trackInfo= el("trackInfo"),
    el_duration = el("duration"),
    el_currTime = el("currentTime"),
    el_slider   = el("slider"),
    el_prev     = el("prev"), // assign ID to your prev/next buttons!
    el_next     = el("next"),
    el_togg     = el("toggle"),
    currentTime,    
    trackList = [],
    track = -1,    // Later we'll set it to 0 index triggering auto start
    totTrack = trackList.length;

...你可以走了。代码中不再有 var 语句。

您可能希望向用户显示更多信息。
存储数据的一个好方法是创建具有所需属性的对象：

trackList = [
  {
    artist : "The Doors",
    fileName : "People Are Strange",
    file : "http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3"
  },
  {
    artist : "ACDC",
    fileName : "Back In Black",
    file : "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg"
  },
  {
    artist : "Four Seasons",
    fileName : "Oh What A Night",
    file : "http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3"
  }
]

现在您不仅可以获得所需的音频路径，还可以向用户显示有关曲目的更多信息。

不要重复自己。到处计算时间会使你的代码不是模块化的，而是混乱的。而是创建一个函数来帮助您return 所需的格式化时间：

function getTime(t) { // `t` is some time value
  var m = ~~(t / 60),
      s = ~~(t % 60);
  return (m<10?"0"+m:m) +':'+ (s<10?"0"+s:s); // returns i.e: "01:25"
}

创建一个进度函数，如：

function progress() {
  el_currTime.innerHTML = getTime(el_music.currentTime); // see how our getTime fn is used?
  el_duration.innerHTML = getTime(el_music.duration);
  el_slider.style.marginLeft = Math.floor(100/el_music.duration*el_music.currentTime) + "%";
}

比播放/暂停：

function playPause(){
  var isPaused = el_music.paused;
  el_music[isPaused ? "play" : "pause"]();
  el_togg.innerHTML = isPaused ? "&#10074;&#10074;" : "&#9658;" ;
}

对于 PREV/NEXT，将 ID 分配给您的按钮 id="prev" 和 id="next"，然后再次创建一个处理两种点击情况的函数：

function skip(){ // This gets triggered by both prev / next buttons.
  track = this.id==="next" ? ++track : --track; // Next clicked' increment, else decr.
  track = track < 0 ? totTrack-1 : track%totTrack; // Allows you to loop infinitely the index
  var trackToPlay = trackList[ track ]; // Get the Track Object "{}"
  el_trackInfo.innerHTML = trackToPlay.artist+' '+trackToPlay.fileName;
  el_music.src = trackToPlay.file;
  el_music.addEventListener('canplaythrough', el_music.play);
}

信不信由你 - 你已经完成了！
有了所有这些漂亮的功能，您现在需要的是一些事件侦听器：

el_prev.addEventListener("click", skip);
el_next.addEventListener("click", skip);
el_togg.addEventListener("click", playPause);
el_music.addEventListener("timeupdate", progress);
el_music.addEventListener("ended", playPause);

el_next.click(); // Auto Start playing!

现在您可能想知道您的区间 1000 函数到哪里去了？它只是由el_music.addEventListener("timeupdate", progress); 处理。

【讨论】：

很好，我只是将el_music.addEventListener('canplaythrough', el_music.play); 排除在skip 函数之外，或者至少调用el_music.removeEventListener('canplaythrough', el_music.play); 以避免添加无用的事件处理程序。
非常有用的代码，但你能告诉我是什么让滑块来回跳动吗？
您遇到的所有错误和问题我也想知道

【解决方案2】：

跳音可能是由于间隔从未停止过，并且仍在为上一首歌运行。

【讨论】：