HTML5音频播放器不工作的播放列表

HTML5 audio player not working on playlist

本文关键字：播放列表 工作 音频 播放器 HTML5      更新时间：2023-09-26

我有一个HTML5音频播放器，它是简单的JavaScript编码。
它在一个音频上工作得很好。但问题是在这里，当我添加更多的音频，只有第一个是工作和其余的不是。查看JSFIDDLE

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

我改变了你的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"
    }
}});

这里有一个工作演示

相关文章：