时间戳

首页 > 解决方案 > 如何使用 html 中的音频标签始终完美地发出声音？

javascript - 如何使用 html 中的音频标签始终完美地发出声音？

问题描述

我正在尝试在网络浏览器上使用音频标签发出声音，并且在大多数情况下都能正常工作。

但是，很少有声音从中途开始，或者不输出声音。（我不确定发生这种情况的情况）。有什么方法可以让声音始终完美？

我正在使用谷歌浏览器版本。74.0.3729.169 在带有嵌入式扬声器的 Windows 10 笔记本电脑上。

我尝试了以下方法，但无法解决此问题。

1) 使用 load() 并将回调方法放在 canplaythough 事件上以调用 play()。

2) 将 preload="auto" 放入音频标签

3）通过base64而不是URL将声音数据放入音频标签。

例如 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <audio id="audio-from-url" preload="auto" src="https://xxx/xxx/xxx.mp3">
        </audio>
        <button id="ringButton">ring</button>
        <script>
          button = window.document.getElementById('ringButton')
          button.addEventListener("click", function(){
              audioTag = document.getElementById("audio-from-url");
              audioTag.load();
              if (audioTag.readyState === 4) {
                  audioTag.play();
              } else {
                  // call "play" after finished loading
                  audioTag.addEventListener('canplaythrough', function (e) {
                      audioTag.removeEventListener('canplaythrough', arguments.callee);
                      audioTag.play();
                  });
              }
          });
        </script>
    </body>
</html>

我希望用户每次都能听到没有缺陷的声音，这意味着可以听到完全相同的声音。

标签： javascripthtmlaudiobrowser

解决方案

推荐阅读