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