JavaScript 音频对象 - 呈现来自 .ogg blob 的音频播放器

Question

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

这会导致没有输出。但是检查代码会发现音频标记在容器中：

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

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

如何向用户呈现音频播放器 from 和具有.ogg格式的音频对象？

最后一点，我注意到，当我直接转到链接时，维基媒体使用视频标签 - 有没有办法将音频对象转换为视频标签？

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>