Control multiple html5 audio tracks using a single controller

问题

I am trying to implement a very minimal audio player for a web site.

The interface is rather simple. It has a play/pause button, and a mute/unmute button.

The problem I have is implementing multiple instances of the same player for different tracks.

The javascript for the player is:

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>";
        }
    });
});

This works fine for a single track. But if I have multiple tracks on the same page, this becomes a problem.

I am guessing that I need some modification to the syntax where I define the myAudio variable:

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

However, I am not sure how to change that so the same script can control multiple audio tracks.

If possible, I also would like to be able to ensure that if the user clicks the play button on a different track, the track that is currently playing "stops" or is "paused" and the new track starts (so 2 tracks are not playing on top of each other).

回答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

来源：https://stackoverflow.com/questions/18035392/control-multiple-html5-audio-tracks-using-a-single-controller

标签

javascript

html

html5-audio

jquery