当我使用 fetch api 检索链接时，如何从数据库流式传输音频并在手机上播放？

Question

我的 html 中有以下内容

<audio id="result-audio"></audio>
<button onclick = "playBack()"><i class="fas fa-volume-up"></i></button>

在我的javascript中我有以下内容

 fetch(`${url}`)
    .then((response) => {
      return response.json();
    }).then((data) => {
        document.getElementById("result-audio").setAttribute("src", `${data['File']}`);
})

function playBack(){
    sound.play();
}

其中 url 转到数据库并检索插入到音频元素源中的音频文件的链接。检索链接工作正常，单击按钮，文件在笔记本电脑上可以正常播放，但在任何手机上都无法播放。我怎样才能最好地解决它无法在手机上播放的问题，或者我需要采取其他方法？

编辑 我不想制作音频播放器。我正在寻找例如当您在谷歌上搜索某个单词的含义时获得的音频，其中它发音该单词。

Answer 1

如果您想在桌面和移动设备上播放音频，您应该确保您使用的音频格式与各种浏览器和设备兼容。您还可以使用 HTML5 音频元素的控件属性来提供内置音频播放器界面，以便在桌面和移动设备上更轻松地播放。

以下是修改代码的方法：

1. 确保您的音频文件采用广泛支持的格式，例如 MP3。
2. 修改 HTML 以包含音频元素的控件属性：

<audio id="result-audio" controls></audio>
<button onclick="playBack()"><i class="fas fa-volume-up"></i></button>

function playBack() {
  const audioElement = document.getElementById("result-audio");
  if (audioElement.paused) {
    audioElement.play();
  } else {
    audioElement.pause();
  }
}

// Use the 'loadedmetadata' event to start playing once the audio is loaded
fetch(`${url}`)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    const audioElement = document.getElementById("result-audio");
    audioElement.setAttribute("src", `${data['File']}`);
    audioElement.addEventListener("loadedmetadata", function () {
      playBack(); // Start playing once audio is loaded
    });
  });