Javascript ::通过HTML5播放多个音频文件音频播放器播放列表
问题描述:
我目前正在研究播放HTML5音频文件的代码。Javascript ::通过HTML5播放多个音频文件音频播放器播放列表
让我们先从代码开始,这样会更容易解释。
这里是我的代码:
<style>
.btn
{
background:#fff;
border-radius:5px;
border:1px solid #000;
height:25px;
width:25px
}
.play:after
{
content:">"
}
.pause:after
{
content:"||"
}
</style>
<button class="btn play" id=HeziGangina-Gravity></button>
<button class="btn play" id=HeziGangina-PUG></button>
<script>
iBtn=document.getElementsByTagName('button');
for(j=0;j<iBtn.length;j++)
{
iBtn[j].addEventListener
(
'click',
function()
{
var audio=new Audio(this.id+'.mp3');
if(audio.pause)
{
audio.play();
iBtn[j].classList.remove("play");
iBtn[j].classList.add("pause");
}
else
{
audio.pause();
iBtn[j].classList.remove("pause");
iBtn[j].classList.add("play");
}
},false
);
}
</script>
我现在的脚本工作就好播放选定的音频文件,但我仍然有2点要解决的问题。
我希望能够将当前按下的按钮上的类名从播放改为暂停和副Versa。
我希望能够在选择其他音轨时完全禁用所有其他音频文件(仅限于)。
[可选] ::是否有可能创建一个纯JavaScript OGG音频文件回退(如一样堆叠<source>
标签与HTML)?
答
- 更改audio.pause到audio.paused
-
播放之前在新的轨道暂停所有曲目
if(audio.paused) { var audios = document.getElementsByTagName('audio'); for (i = 0; i < audios.length; i++) { audios[i].pause(); } audio.play(); iBtn[j].classList.remove("play"); iBtn[j].classList.add("pause"); } else { audio.pause(); iBtn[j].classList.remove("pause"); iBtn[j].classList.add("play"); }
希望它会帮助你。
至于您的可选问题,您可以使用this thread检查浏览器。在创建音频以检查浏览器时创建if语句。所以如果是IE or Safari,请加载mp3,否则加载ogg。
你可以使用jQuery吗? – Jordumus 2015-04-01 13:28:10
提示:事件指向单击按钮后,函数(){}中的'this'。只需使用'this.className =“foo”'来替换类名。 – KarelG 2015-04-01 13:30:29
我更喜欢纯JavaScript。 – 2015-04-01 13:30:58