javascript - javascript音频对象-.ogg blob中存在的音频播放器

Question

我正在尝试从远程服务器获取ogg音频文件，并将播放器呈现给用户。我正在使用下面的代码。

这导致没有输出。但是检查代码可以发现音频标签在容器中:

<audio preload="auto" src="blob:null/eaed3b36-8c17-4522-8a24-6265a180bf5a"></audio>

但是，它在Firefox的检查器中显示为灰色。 DOM音频对象的error属性为null。据我所知，应该显示音频播放器。

如何将音频播放器和.ogg格式的音频对象呈现给用户？

最后一点，我注意到，当我直接 go to链接时，Wikimedia使用了视频标签-是否可以将音频对象转换为视频标签？

let url1 = "https://upload.wikimedia.org/wikipedia/commons/3/33/Dial_up_modem_noises.ogg"

async function getAudFromUrl(url) {
  let response = await fetch(url);
  data = await response.blob();
  let audio = new Audio();
  audio.src = URL.createObjectURL(data);
  return audio;
}

document.addEventListener("DOMContentLoaded", async function() {
  let au = await getAudFromUrl(url1);
  let el = document.getElementById("audio1")
  el.appendChild(au)
})

  .container {
          height: 100%;
          width: 100%;
          }

  <div class = 'container'>
    <div id = 'audio1'></div>
  </div>

Answer 1

可以使用视频标签来做到这一点('audio1' autoplay="" controls=""标签很重要。

let url1 = "https://upload.wikimedia.org/wikipedia/commons/3/33/Dial_up_modem_noises.ogg"

async function getAudFromUrl(url) {
  let response = await fetch(url);
  data = await response.blob();
  let audio = new Audio();
  audio.src = URL.createObjectURL(data);
  return audio;
}

document.addEventListener("DOMContentLoaded", async function() {
  let au = await getAudFromUrl(url1);
  let el = document.getElementById("audio1")
  el.src = au.src
})

  <div class = 'container'>
    <video id = 'audio1' autoplay="" controls="" ></video>
  </div>