跨浏览器 HTML5 音频播放器
Posted
技术标签:
【中文标题】跨浏览器 HTML5 音频播放器【英文标题】：Cross-browser HTML5 audio player 【发布时间】：2021-03-03 09:18:57 【问题描述】：我正在使用audio 标签播放wav 音频，我的网址由URL.createObjectURL() 生成，网址类似于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 音频播放器？
【问题讨论】：
javascript 在哪里？ Safari 工作代码（第二个示例）是我用来在 Chrome 中播放音频的设置，但我使用 JS 来更新<source> 标签的 .src。你有一个 JS 函数来做URL.createObjectURL() 吗？如果是，为什么不通过相同的功能更新<source>？
我拥有的是代码，因为简单来说，我在问题中使用 MY_BLOB_URL 占位符作为URL.createObjectURL 的结果
我能想到的获取 blob 的最快示例是通过文件浏览，我将编写这样的示例代码，然后您可以测试它是否有用。我在 Windows PC 上，所以无法测试 Safari。
【参考方案1】：
我已经使用 Chrome、Edge 和 Firefox 在 Windows PC 上测试了以下代码。 希望它也适用于 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 音频播放器的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 音频播放器未在 ios Safari 中自动播放