Javascript::通过 HTML5 音频播放器播放列表播放多个音频文件

Question

我目前正在编写代码来播放 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 个问题需要解决。

1. 我希望能够将当前按下的按钮上的类名从播放更改为暂停，反之亦然。

2. 我希望能够(仅)在选择其他轨道时完全禁用所有其他音频文件。

[可选]::是否可以使用纯 javascript 创建 ogg 音频文件后备(与使用 html 堆叠 <source> 标签相同)？

Answer 1

1. 将您的 audio.pause 更改为 audio.paused

2. 在播放新轨道之前暂停所有轨道

   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。