瀏覽器中音訊相容性問題（上）

阿新 • • 發佈：2019-01-15

參考文章：http://blog.csdn.net/www3300300/article/details/17709219
我參考了上面連結的文章，由於這篇文章寫於2013年，目前已經不能滿足需求了。
下面我將把我參考改進後的做法列出來：
（由於我們公司只要求相容 ie(8及以上版本) Firefox chrome ，所以這些瀏覽器上是沒問題的。opera 瀏覽器上我也試了是可以的，360安全瀏覽器之類的由於使用chrome的核心所以也是沒問題的，別的瀏覽器沒試過了）
這裡寫圖片描述

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
>
<head>
    <title></title>
</head>

<script src="Scripts/jquery-1.11.1.min.js"></script>
<script src="Scripts/test.js" type="text/javascript"></script>

<body>
    <div id="__alert_sound">
        <div class="pinkBox" style="display: none;" 
>
            <audio id="player">
                <source src="http://yinyueshiting.baidu.com/data2/music/242216583/2422094427200128.mp3?xcode=3c4cf764253d271f7e919dd56dd3c83c" />
                <!--這裡是MP3型別的歌-->
                <source src="http://yinyueshiting.baidu.com/data2/music/242216583/2422094427200128.mp3?xcode=442882b98b9d2ee6c7d4e558c0a93524" 
 />
                <!--這裡是ogg or wav-->
                <source src="http://yinyueshiting.baidu.com/data2/music/242216583/2422094427200128.mp3?xcode=818d3878b8479145ec0a60cf41a4a187" />
                <!--這裡是ogg or wav-->                                
            </audio>
        </div>
        <input type="button" id="play" value="Play" />
        <input type="button" id="pause" value="Pause" onclick="javaScript: { $('.pinkBox #player').get(0).pause(); player.pause(); }" />
    </div>
</body>

</html>

test.js

var changeaudio = false;
$(function () {
   init();
})
    function init(){
        audioPlayer();
        var strurl = "http://yinyueshiting.baidu.com/data2/music/242216583/2422094427200128.mp3?xcode=3c4cf764253d271f7e919dd56dd3c83c";
        replaceAudio($(".pinkBox"), strurl , addReBind);
    }
    function replaceAudio(selector, src, addBind) {
        var sUserAgent = navigator.userAgent.toLowerCase();
        if (sUserAgent.match(/msie ([\d.]+)/) || (sUserAgent.indexOf('trident') != -1 && sUserAgent.indexOf('rv') != -1)) {
            selector.empty().html('<object id="player" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"'
                + ' codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">'
                + '<param name="allowScriptAccess" value="always" />'
                + '<param name="AutoStart" value="0" />'
                + '<param name="Src" value="' + src + '" />'
                + '<param name="ShowControls" value="false">'
                + '</object>');
            changeaudio = true;
            if (addBind != null && addBind != "") {
                addBind();
            }
        }
    }
    function addReBind() {
        $("#play").unbind().click(function () {
            if (player.currentPosition != 0)
                player.currentPosition = 0;
            player.play();
            isPlayEnd(changeaudio ? player : $("#player")[0], function () { alert("OK");});
        });
        $("#pause").unbind().click(function () {
            player.pause();
        });
    }
    function isPlayEnd(shapeAudio, callback) {
        var is_playFinish = setInterval(function () {
            if (shapeAudio.ended || (shapeAudio.duration!=0 && shapeAudio.playState==0) ) {                
                window.clearInterval(is_playFinish);
                if ( callback!=null &&callback != "" )
                    callback();
            }
        }, 10);
    }
    function audioPlayer() {
        $("#play").click(function () {
            if ($('.pinkBox #player').get(0).currentTime != 0)
                $('.pinkBox audio').get(0).currentTime = 0;
            $('.pinkBox #player').get(0).play();
        });
        $("#pause").click(function () {
            $('.pinkBox #player').get(0).pause();
        });
    }


    //檢測當前瀏覽器所在的裝置型別及瀏覽器型別版本號
    function platformType() {
        var platform = "";
        var sUserAgent = navigator.userAgent.toLowerCase();
        if (sUserAgent.match(/ipad/i) == "ipad") { platform = "ipad"; }
        if (sUserAgent.match(/iphone os/i) == "iphone os") { platform = "iphone"; }
        if (sUserAgent.match(/midp/i) == "midp") { platform = "midp"; }
        if (sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4") { platform = "rv"; }
        if (sUserAgent.match(/ucweb/i) == "ucweb") { platform = "ucweb"; }
        if (sUserAgent.match(/android/i) == "android") { platform = "android"; }
        if (sUserAgent.match(/windows ce/i) == "windows ce") { platform = "windows_ce"; }
        if (sUserAgent.match(/windows mobile/i) == "windows mobile") { platform = "windows_mobile"; }
        if (sUserAgent.indexOf("windows phone") != -1) { platform = "windows_phone"; }

        if (sUserAgent.match(/msie ([\d.]+)/))
        { platform += "-" + "ie|" + sUserAgent.match(/msie ([\d.]+)/)[1]; }
        else if (sUserAgent.indexOf('trident') != -1 && sUserAgent.indexOf('rv') != -1)
        { platform += "-" + "ie|" + sUserAgent.match(/rv:(\d+\.\d+)/)[1]; }  //相容模式下的ie
        else if (sUserAgent.match(/chrome\/([\d.]+)/)) { platform += "-" + "chrome"; }
        else if (sUserAgent.match(/firefox\/([\d.]+)/)) { platform += "-" + "firefox"; }
        else if (sUserAgent.match(/opera.([\d.]+)/)) { platform += "-" + "opera"; }
        else if (sUserAgent.match(/version\/([\d.]+).*safari/)) { platform += "-" + "safari"; }
        //document.writeln("您的瀏覽裝置為：");
        return platform;
    }

瀏覽器中音訊相容性問題（上）

瀏覽器中音訊相容性問題（上）

eos原始碼賞析（二十三）：默克爾樹在EOS中的應用（上）

Unity 3D中的射線（上）

Android外掛化的相容性（上）：Android O的適配

深度學習（4）——強度非均勻性下影象分割的水平集方法及其在MRI中的應用（上）

從0開發3D引擎（十）：使用領域驅動設計，從最小3D程式中提煉引擎（上）

網頁上實現匯出excel表格時，怎樣在後臺生成excel後，讓表格在瀏覽器中自動下載（larval框架）

在VMware Workstation中批量創建上千臺虛擬機（上）

Python學習：基本數據類型與變量（中）與基礎之條件及循環（上）

ORCAD16.6中原理圖DRC檢查（上）

Java面試題全集（上）(中)（下）（轉）+自己總結

Java中JNI的使用（上）

十、字典（上）：什麼是字典及如何訪問、新增、修改、刪除字典中的值

app中的webview通識篇（上）

axios在vue中的應用（二）—— 表單提交上傳圖片

C++筆記第六十四課 C++中的異常處理（上）---狄泰學院

第8章 CSS3中的變形與動畫（上）

十、字典與 set（上）：什麼是字典及如何訪問、新增、修改、刪除字典中的值

18 | 散列表（上）：Word文件中的單詞拼寫檢查功能是如何實現的？

java中字元與字串的前世今生（上）

瀏覽器中音訊相容性問題（上）

相關推薦