Question

我有一个HTML5音频播放器，用JavaScript简单编码它在单个音频上运行良好。但问题是，当我添加更多音频时，只有第一个正在工作而剩下的没有。从JSFIDDLE中查看的 HTML

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <audio id="yourAudio" preload='none'>
       <source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' />
    </audio>
    <a href="#"  ><span id="audioControl" class="glyphicon glyphicon-play-circle"></span></a>
    <audio id="yourAudio" preload='none'>
       <source src='http://audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3' type='audio/mpeg' />
    </audio>
    <a href="#"  ><span id="audioControl" class="glyphicon glyphicon-play-circle"></span></a>

    <audio id="yourAudio" preload='none'>
       <source src='http://audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3' type='audio/mpeg' />
    </audio>
    <a href="#"  ><span id="audioControl" class="glyphicon glyphicon-play-circle"></span></a>

的js

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {


if(ctrl.className == "glyphicon glyphicon-play-circle") {
        ctrl.className="glyphicon glyphicon-pause";
       yourAudio["play"]();
}
else if (ctrl.className == "glyphicon glyphicon-pause"){

     ctrl.className="glyphicon glyphicon-play-circle";
    yourAudio["pause"]();

}
};

Answer 1

我更改了您的HTML代码，因此音频标记位于名为playList的div中。

<div id="playList">
<a href="#">
    <span class="glyphicon glyphicon-play-circle">
        <audio preload='none'>
            <source src='http://freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3' type='audio/mpeg' />
        </audio>
    </span>
</a>
<a href="#">
    <span class="glyphicon glyphicon-play-circle">
        <audio preload='none'>
            <source src='http://audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3' type='audio/mpeg' />
        </audio>
    </span>
</a>
<a href="#">
    <span class="glyphicon glyphicon-play-circle">
        <audio preload='none'>
            <source src='http://audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3' type='audio/mpeg' />
        </audio>
    </span>
</a>
</div>

然后，您可以使用事件委派来播放或暂停音频源

document.getElementById('playList').addEventListener('click', function(e){
var target = e.target;
if(target && target.nodeName === 'SPAN'){
    if(target.className == "glyphicon glyphicon-play-circle"){
        target.childNodes[1]['play']();
        target.className = "glyphicon glyphicon-pause"
    }else{
        target.childNodes[1]['pause']();
        target.className = "glyphicon glyphicon-play-circle"
    }
}});

Here你有一个有效的演示

HTML5音频播放器无法处理播放列表

1 个答案: