2

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

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

我遇到的问题是为不同的曲目实现同一播放器的多个实例。

播放器的 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 首曲目不是互相叠加）。

4

1 回答 1

1

This is jQuery based solution. To make HTML5 audio work also in IE8/7 use some additional 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.

Both scripts need additional existing .mp3 files to play the sound

于 2013-08-03T23:09:29.573 回答