前端通过浏览器识别解决IE浏览器中audio标签无法播放.wav文件

最新推荐文章于 2023-09-07 14:38:34 发布

原创

最新推荐文章于 2023-09-07 14:38:34 发布 · 1.1w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#前端浏览器识别 #IE无法播放.wav文件 #embed插件

本文介绍了一种前端通过浏览器识别来解决Internet Explorer（IE）中audio标签无法播放.wav音频文件的方法。由于IE不支持.wav格式，但embed标签可以播放，因此在识别到IE浏览器时使用embed代替audio。同时，为了保持页面美观，使用v-if条件渲染并在IE中应用内联样式。经实测，此方案在Chrome和IE下都能正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端通过浏览器识别解决IE浏览器中audio标签无法播放.wav文件

HTML5 提供了播放音频文件的标准。H5新标签audio可以很好地在浏览器中播放语音文件。
但是，根据官方文档显示，IE浏览器下的audio标签却无法播放.wav格式的语音文件。具体浏览器对语音文件的支持情况在下表中给出：

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

为了解决IE无法播放.wav文件，现在提供一种解决思路。虽然，IE下audio无法播放.wav文件，但是embed标签可以播放.wav文件。所有主流浏览器都支持 embed元素。embed元素表示一个 HTML Embed 对象。embed元素已经出现很长一段时间了，但是在 HTML5 前并未被详细说明，该元素在 HTML 5 页面上会被验证，在 HTML 4 上不会。经过实测,在IE浏览器下，embed元素可以播放.wav文件。效果图如下：
在这里插入图片描述
现在给出完整的解决方案。
由于embed元素在美观上不如audio元素，所以我们可以在加载前进行浏览器识别。首先判断浏览器是否为IE浏览器，若为IE则渲染embed元素，否则渲染audio元素。

浏览器识别JS方法

getWeb() {
   
   
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    if ((userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0"