我正在尝试从远程服务器获取ogg音频文件,并将播放器呈现给用户。我正在使用以下代码。
这将导致没有输出。但是检查代码发现音频标签在容器中:
<audio preload="auto" src="blob:null/eaed3b36-8c17-4522-8a24-6265a180bf5a"></audio>
但是,它在Firefox的检查器中显示为灰色。 DOM音频对象的错误属性为 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>
答案 0 :(得分:0)
设法使用视频标签来完成此操作('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>