HTML5的音频播放器不工作的播放列表 [英] HTML5 audio player not working on playlist

问题描述

我有一个HTML5的音频播放器，它是简单codeD用JavaScript。

它在一个单一的音频工作的罚款。但问题是这里的时候，我加入了更多的音频只有第一个工作，其余的则没有。
检查出来的的jsfiddle 结果
HTML

 ＆LT;链接rel =stylesheet属性HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css＆GT;
    ＆LT;音频ID =yourAudiopreLOAD ='无'＆GT;
       ＆lt;信源SRC =HTTP：//freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3'类型='音频/ MPEG'/＆GT;
    ＆LT; /音频＆GT;
    ＆LT; A HREF =＃＆GT;＆LT;跨度ID =AUDIOCONTROL级=glyphicon glyphicon播放圈＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
    ＆LT;音频ID =yourAudiopreLOAD ='无'＆GT;
       ＆lt;信源SRC =HTTP：//audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3'类型='音频/ MPEG'/＆GT;
    ＆LT; /音频＆GT;
    ＆LT; A HREF =＃＆GT;＆LT;跨度ID =AUDIOCONTROL级=glyphicon glyphicon播放圈＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;    ＆LT;音频ID =yourAudiopreLOAD ='无'＆GT;
       ＆lt;信源SRC =HTTP：//audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3'类型='音频/ MPEG'/＆GT;
    ＆LT; /音频＆GT;
    ＆LT; A HREF =＃＆GT;＆LT;跨度ID =AUDIOCONTROL级=glyphicon glyphicon播放圈＆GT;＆LT; / SPAN＆GT;＆LT; / A＆GT;
 

的js

  VAR yourAudio =的document.getElementById（'yourAudio'），
    CTRL =的document.getElementById（'AUDIOCONTROL'）;ctrl.onclick =功能（）{
如果（ctrl.className ==glyphicon glyphicon播放圈）{
        ctrl.className =glyphicon glyphicon暂停;
       yourAudio [玩]（）;
}
否则，如果（ctrl.className ==glyphicon glyphicon暂停）{     ctrl.className =glyphicon glyphicon播放圈;
    yourAudio [暂停]（）;}
};
 

解决方案

我改变你的HTML code使音频标签是一个div称为播放列表中。

 ＆LT; D​​IV ID =播放列表＆GT;
＆所述; A HREF =＃＆GT;
    ＆LT;跨度类=glyphicon glyphicon播放圈＆GT;
        ＆LT;音响preLOAD ='无'＆GT;
            ＆lt;信源SRC =HTTP：//freshly-ground.com/data/audio/mpc/20090119%20-%20Untitled%20Groove.mp3'类型='音频/ MPEG'/＆GT;
        ＆LT; /音频＆GT;
    ＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆所述; A HREF =＃＆GT;
    ＆LT;跨度类=glyphicon glyphicon播放圈＆GT;
        ＆LT;音响preLOAD ='无'＆GT;
            ＆lt;信源SRC =HTTP：//audio.khanqah.org/AK20021104%20Rozay%20or%20taqwa%20may%20rabt.mp3'类型='音频/ MPEG'/＆GT;
        ＆LT; /音频＆GT;
    ＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆所述; A HREF =＃＆GT;
    ＆LT;跨度类=glyphicon glyphicon播放圈＆GT;
        ＆LT;音响preLOAD ='无'＆GT;
            ＆lt;信源SRC =HTTP：//audio.khanqah.org/AK19991224%20Tark%20e%20masiat%20may%20takheer%20na%20kijiay.mp3'类型='音频/ MPEG'/＆GT;
        ＆LT; /音频＆GT;
    ＆LT; / SPAN＆GT;
＆所述; / A＆GT;
＆LT; / DIV＆GT;
 

然后就可以使用事件代表团来播放或暂停音频源

 的document.getElementById（播放列表）。的addEventListener（'点击'，功能（E）{
VAR的目标= e.target;
如果（目标和放大器;＆安培; target.nodeName ==='SPAN'）{
    如果（target.className ==glyphicon glyphicon播放圈）{
        target.childNodes [1] ['玩'（）;
        target.className =glyphicon glyphicon暂停
    }其他{
        target.childNodes [1] ['暂停'（）;
        target.className =glyphicon glyphicon播放圈
    }
}}）;
 

这里你有一个工作演示

I have an HTML5 audio player, it is simple coded with JavaScript.
It's working fine on a single audio. But the problem is here when I'm adding more audios the only the first one is working and the remaining were not. Check it out of 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"]();

}
};

解决方案

I changed your HTML code so the audio tags are inside a div called playList.

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

Then you can use event delegation to play or pause your audio sources

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 you have a working demo

这篇关于HTML5的音频播放器不工作的播放列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！