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个问题需要解决。

我希望能够将当前按下的按钮上的班级名称从播放更改为暂停和反之亦然。
我希望能够在选择其他曲目时完全禁用所有其他音频文件。

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

Answer 1

将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音频播放器播放列表播放多个音频文件

1 个答案: