遇到一个需求,点击文件名切换音频播放文件,第一反应是使用 <embed>

<embed src="文件名.mp3"></embed>

然后发现不管怎么切换,音频文件的引用链接变了,但是音频播放内容依旧没变,并且在谷歌下,.wav 文件不会播放,且会弹出下载框,于是开始尝试 HTML5 的媒体

<audio controls autoplay >
    <source v-if="currentFileType == 'ogg'" :src="getLinkText" type="audio/ogg">
    <source v-if="currentFileType == 'mp3'" :src="getLinkText" type="audio/mpeg">
    <source v-if="currentFileType == 'wav'" :src="getLinkText" type="audio/wav">
    您的浏览器不支持 audio 元素。
</audio>

<!-- 上面我是在 vue 里面测试的,原生应该如下 -->

<audio controls autoplay >
    <source src="文件名.ogg" type="audio/ogg">
    <source src="文件名.mp3" type="audio/mpeg">
    <source src="文件名.wav" type="audio/wav">
    您的浏览器不支持 audio 元素。
</audio>

尝试后无果,依然不会改变音频播放内容……


后在群内询问并尝试不使用 <source> ,而是直接给 <audio> 引用

<audio controls autoplay :src="getLinkText">
    您的浏览器不支持 audio 元素。
</audio>

<!-- 上面我是在 vue 里面测试的,原生应该如下 -->

<audio controls autoplay src="文件名">
    您的浏览器不支持 audio 元素。
</audio>

现在播放就没问题了