Question

我正在尝试为网站实现一个非常小的音频播放器。

界面相当简单。它有一个播放/暂停按钮和一个静音/取消静音按钮。

我遇到的问题是为不同的曲目实现同一玩家的多个实例。

播放器的javascript是：

jQuery(function() {
    var myAudio = document.getElementById("myAudio");
    var btnPlayPause = document.getElementById("btnPlayPause");
    var btnMute = document.getElementById("btnMute");

    btnPlayPause.addEventListener("click", function() {
        if (myAudio.paused || myAudio.ended) {
            myAudio.play();
            btnPlayPause.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe003;\"></span><span class=\"screen-reader-text\">Play</span>";
        }
        else {
            myAudio.pause();
            btnPlayPause.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe002;\"></span><span class=\"screen-reader-text\">Pause</span>";
        }
    });

    btnMute.addEventListener("click", function() {
        if (myAudio.muted) {
            myAudio.muted = false;
            btnMute.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe001;\"></span><span class=\"screen-reader-text\">Mute</span>";
        }
        else {
            myAudio.muted = true;
            btnMute.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe000;\"></span><span class=\"screen-reader-text\">Unmute</span>";
        }
    });
});

这适用于单曲目。但如果我在同一页面上有多个曲目，这就成了一个问题。

我猜我需要对我定义myAudio变量的语法进行一些修改：

var myAudio = document.getElementById("myAudio");

但是，我不知道如何更改它，因此相同的脚本可以控制多个音轨。

如果可能的话，我还希望能够确保如果用户点击其他音轨上的播放按钮，当前正在播放的曲目“停止”或“暂停”并且新音轨开始播放（所以2曲目没有在彼此之上播放。）

Answer 1

这是基于jQuery的解决方案。要在IE8 / 7中使HTML5音频工作，请使用一些额外的flash fallback。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
  <style type='text/css'>
.mp3Player {
    padding:8px;
    margin:8px;
    background-color:#ddf;
}
  </style>

<script type='text/javascript'>//<![CDATA[ 

jQuery(function (){
    var myAudio = document.getElementById("myAudio");
    var current = null;
    var playingString = "<span aria-hidden=\"true\" data-icon=\"&#xe002;\"></span><span class=\"screen-reader-text\">Pause</span>";
    var pausedString = "<span aria-hidden=\"true\" data-icon=\"&#xe003;\"></span><span class=\"screen-reader-text\">Play</span>";
    $(document.body).on('click', '.btnPlayPause',function(e){
        var target = this;
        //console.log(target, current); //return;
        if (current == target) {
            target.innerHTML = pausedString;
            target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
            myAudio.pause();
            current = null;
        } else { // current!=target
            if (current != null) {
                current.innerHTML = pausedString;
                current.parentNode.setAttribute('data-pos', '0'); //reset position
                target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
            }
            current = target;
            target.innerHTML = playingString;
            if(myAudio.canPlayType && myAudio.canPlayType("audio/mpeg") != "") { // MP3
                myAudio.src = target.parentNode.getAttribute('data-src');
            } else if(myAudio.canPlayType && myAudio.canPlayType("audio/ogg") != "") {  // OGG
                myAudio.src = target.parentNode.getAttribute('data-src2');
            } else {
                return; // no audio support
            }
            myAudio.play();
            myAudio.onloadeddata = function () {
                myAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));
            };
        }
    });
    $(document.body).on('click', '.btnMute',function(e){
        myAudio.muted = !myAudio.muted;
        $('.btnMute').each(function(){
            if (myAudio.muted) {
                this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe001;\"></span><span class=\"screen-reader-text\">Muted</span>";
            } else {
                this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"&#xe000;\"></span><span class=\"screen-reader-text\">Audible</span>";
            }
        });
    });
});

//]]>  
</script>
</head>
<body>

<audio id="myAudio"></audio>

<div class="mp3Player" data-src="a.mp3" data-src2="a.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #1</span>
</div>

<div class="mp3Player" data-src="b.mp3" data-src2="b.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #2</span>
</div>

</body>
</html>

jQuery code + result page。

javascript code + result page。

两个脚本都需要额外的现有.mp3文件来播放声音

使用单个控制器控制多个html5音轨

1 个答案: