跨浏览器 HTML5 音频播放器

Question

我正在使用 audio 标签播放 wav 音频，我的 url 是由 URL.createObjectURL() 生成的，而 url 就像 blob:http://localhost/9fa2ef06-ade6-4027-89f8-06cd2c176405

由于 url 没有扩展名，我对 safari 有一些疑问

以下代码适用于 chrome 而不适用于 safari（音频播放器已禁用）

<audio src="MY_BLOB_URL" type="audio/wav">
</audio>

以下代码适用于 safari，不适用于 chrome

<audio controls>
  <source src="MY_BLOB_URL" type="audio/wav">
</audio>

我尝试了如下奇怪的代码，但找不到任何在两种浏览器上都能正常工作的方法

<audio src="MY_BLOB_URL" type="audio/wav">
  <source src="MY_BLOB_URL" type="audio/wav">
</audio>

这是怎么回事？我怎样才能使用单一代码获得跨浏览器 HTML5 音频播放器？

Answer 1

我已经在 Windows PC 上使用 Chrome、Edge 和 Firefox 测试了以下代码。
希望它也适用于 Safari。

PS：对于未来的读者，此代码也适用于 MP3 blob（设置为 accept=".mp3"）。

<!DOCTYPE html>
<html><head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> </head>

<body>

<div style="z-index: 1; overflow:hidden; position: absolute; top: 100px; left: 50px">
<audio id="tag_Audio1" controls>
<source type="audio/wav">
</audio>
</div>

<br><br><br><br>

<div style="z-index: 1; overflow:hidden; position: absolute; top: 10px; left: 50px">
<p> Choose an WAV file...</p>
<input type="file" id="choose_media" accept=".wav" />
</div>

<script>

var file; var reader;
var tmpElement; //# is reference to aTag for holding image content.
var file_Blob; //# is reference to file BLOB (data of selected file).

const  myAudio = document.getElementById("tag_Audio1");
document.getElementById("choose_media").addEventListener("change", onFile_Selected, false);

function onFile_Selected(evt) 
{
    file = evt.target.files[0]; //# access to selected file
    
    reader = new FileReader();
    reader.readAsDataURL(file); //# load selected file as Blob
    reader.addEventListener("loadend", onFile_Loaded, false);
}

function onFile_Loaded(evt) 
{
    if (evt.target.readyState == FileReader.DONE) 
    {
        //# remove any current SRC
        myAudio.removeAttribute("src");
        
        //# create blob
        file_Blob = (window.URL || window.webkitURL).createObjectURL(file);
        
        //# apply blob & test play
        myAudio.setAttribute("src", file_Blob);
        myAudio.load();
        myAudio.play();
    }   
}

</script>

</body>
</html>

跨浏览器 HTML5 音频播放器

Cross-browser HTML5 audio player

html

javascript

audio

html5-audio