浏览器中音频兼容性问题（上）

来源：互联网发布：渐飞数据库编辑：程序博客网时间：2024/06/06 14:01

参考文章：http://blog.csdn.net/www3300300/article/details/17709219
我参考了上面链接的文章，由于这篇文章写于2013年，目前已经不能满足需求了。
下面我将把我参考改进后的做法列出来：
（由于我们公司只要求兼容 ie(8及以上版本) Firefox chrome ，所以这些浏览器上是没问题的。opera 浏览器上我也试了是可以的，360安全浏览器之类的由于使用chrome的内核所以也是没问题的，别的浏览器没试过了）
这里写图片描述

下面是例子：
这个例子只是简单的示范，下一篇会写的详细一些。这部分的代码可以在下面的链接上下载
http://download.csdn.net/detail/jl1134069094/9518002
player.html 页面代码如下

<!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;    }

0 0