H5之audio标签放音兼容所有浏览器方法

前端交流群，群文件提供大量文档、书籍和资料。期待你的加入！群号：127768464     

      由于项目需要，最近刚做了一个网页放音的功能，使用到了H5新标签<audio></audio>，但是audio只能支持IE8以上的浏览器，低版本浏览器如何支持呢？下面我就来介绍一下我的解决办法。

      通过上网搜集资料，找到了两套方案，一种是在页面head中引入<script src="//api.html5media.info/1.1.8/html5media.min.js"></script>处理兼容，另外一种是搭配<embed></enbed>标签使用。经过实际测试，第一种引入js的貌似达不到预期效果，感兴趣的朋友也可以试试，有可能是我的操作不对。我使用的是第二种方法，使用<audio></audio>和<embed></enbed>搭配使用，IE8以上的浏览器统一使用<audio></audio>来放音，IE8及以下的浏览器则使用<embed></enbed>。

      通过实际观察，我发现IE8及以下浏览器中的embed标签嵌入的实际上是Windows自带的播放器Windows media player，js操作播放、暂停、停止的方法也就是操作Windows media player的方法，这里有点小坑，我发现embed标签的autostart="false"在其他浏览器支持不是很好，就是在页面加载的时候会自动放音，此问题的处理方法我用的是 [if lte IE 8] 来判断浏览器版本，只有在IE8及以下的浏览器则使用<embed></enbed>，IE8以上的浏览器不加载<embed></enbed>标签。实际代码如下：

<div style="display:none">
        <audio id="a_player_audio" src="a.mp3"></audio>
        <audio id="b_player_audio" src="b.mp3"></audio>
        <audio id="c_player_audio" src="c.mp3"></audio>
        <audio id="d_player_audio" src="d.mp3"></audio>
        <audio id="e_player_audio" src="e.mp3"></audio>
    </div>
    <!--[if lte IE 8]>
    <div style="display:none">
        <embed id="a_player_ie8" type="audio/mpeg" src="a.mp3" autostart="false"></embed>
        <embed id="b_player_ie8" type="audio/mpeg" src="b.mp3" autostart="false"></embed>
        <embed id="c_player_ie8" type="audio/mpeg" src="c.mp3" autostart="false"></embed>
        <embed id="d_player_ie8" type="audio/mpeg" src="d.mp3" autostart="false"></embed>
        <embed id="e_player_ie8" type="audio/mpeg" src="e.mp3" autostart="false"></embed>
    </div>
    <![endif]-->

js 的控制方法稍有不同，播放都是play()方法，关于停止播放，audio只提供了暂停方法pause()，Windows media player则提供了暂停pause()方法和停止stop()方法。

      以上都是自己总结的经验，有错误的地方欢迎大佬指正，或者有好的方法也可以交流一下。、

　　前端交流群，群文件提供大量文档、书籍和资料。期待你的加入！群号：127768464

转载于:https://www.cnblogs.com/sysg/p/7389102.html