我目前正在编写代码来播放 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 个问题需要解决。
我希望能够将当前按下的按钮上的类名从播放更改为暂停,反之亦然。
我希望能够(仅)在选择其他轨道时完全禁用所有其他音频文件。
[可选]::是否可以使用纯 javascript 创建 ogg 音频文件后备(与使用 html 堆叠 <source>
标签相同)?
最佳答案
- 将您的 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。
关于Javascript::通过 HTML5 音频播放器播放列表播放多个音频文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29392072/