兼容IE的语音播放

主要部分是用一个div，检测当前浏览器是否是IE，如果是就在div内生成一个bgsound标签，模拟播放背景音乐。如果是非IE浏览器，就在div里生成video标签。

1.HTML内容，创建一个标签

<object id="snd_chrome" width="0px" height="0px" type="audio/x-wav" data=""></object>

2.先判断浏览器是否是IE或者Edge浏览器

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 

var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器 

var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;

3.判断不同浏览器创建语音标签，函数参数（ID，语音播放路径，类型，是否循环播放）；

function audioplayer(id, url, type, loop){

    var audioplayer = document.getElementById(id);

    if(audioplayer!=null){

      document.body.removeChild(audioplayer);

    }

    if(isIE || isIE11 || isEdge){

        var player = document.createElement('bgsound');

        player.id = id;

        player.src = url;

        player.setAttribute('autostart', 'true');

        if(loop){

            player.setAttribute('loop', 'infinite');

        }

        document.body.appendChild(player);

    }else{

        var player = document.createElement('audio');

        player.id = id;

        player.setAttribute('autoplay','autoplay');

        if(loop){

          player.setAttribute('loop','loop');

        }

        document.body.appendChild(player);

        var source = document.createElement('source');

        source.src = url;

        source.type= type;

        player.appendChild(source);

    }

  } 

4.非IE浏览器时，监听语音播放是否停止

// 监听语音是否播放结束，谷歌版

function audioListener(){

    //测试audio监听结束事件

    var audio=document.querySelector('audio');

        if(audio){

        audio.loop = false;

        audio.addEventListener('ended', function () { 

            //do something .....

        }, false);

    }

}

5.IE或者Edge浏览器使用的bgsound，暂时没有写出监听事件，大家一起加油！

作者：爷爷的毛丫头
链接：https://www.jianshu.com/p/405db661a23e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。