The compatibility of inserting audio file into HTML and playing audio file in browser

Time:2020-7-31

The following is about how to insert audio files into HTML. After my local test, I have summarized some problems (playing MP3 files)

1、<embed type=”audio/mp3″ src=”” autostart=true loop=false></embed>
Problem: normal on IE8 (played through media player plug-in), but not on IE6 and IE7
You need to install QuickTime plug-in in in Firefox to play
Chrome can play it by converting it into a < video > tag on HTML5, but it will make the whole screen blue
Opera doesn’t play automatically

2、<embed type=”audio/midi” src=”” autostart=true loop=false></embed>
Problem: IE6, IE7 will not play normally, IE8 is normal
Normal on Firefox
Chrome requires dirty QuickTime plug-ins to play properly
Opera doesn’t play automatically

3、<object data=”” />
Problem: it can’t be played on IE6 and 7, and IE8 will pop up the prompt of “abnormal use of Article X”
Normal on Firefox
Normal on chrome
Opera does not support

4、<audio src=”” type=”audio/mp3″ />
Problem: HTML 5 tags are only supported by chrome

5、

Copy code

The code is as follows:

<audio autoplay>
<source src=”” type=”audio/mp3″ />
<embed src=”” type=”audio/mp3″/>
</audio>

Problem: IE6 and IE7 do not support it. Other browsers support it. Opera cannot play it automatically

6、<embed src=””><noembed><bgsound src=””></noembed>
Problem: IE6 and IE7 do not support it. Other browsers support it. Opera cannot play it automatically

Based on the above, I adopt the following method (executed under jQuery)

Copy code

The code is as follows:

if(navigator.userAgent.indexOf(“Chrome”) > -1){
If it’s Chrome:
<audio src=”” type=”audio/mp3″ autoplay=”autoplay” hidden=”true”></audio>
}else if(navigator.userAgent.indexOf(“Firefox”)!=-1){
If it’s Firefox:
<embed src=”” type=”audio/mp3″ hidden=”true” loop=”false” mastersound></embed>
}else if(navigator.appName.indexOf(“Microsoft Internet Explorer”)!=-1 && document.all){
If ie (6,7,8)
<object classid=”clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95″><param name=”AutoStart” value=”1″ /><param name=”Src” value=”” /></object>
}else if(navigator.appName.indexOf(“Opera”)!=-1){
If Oprea:
<embed src=”” type=”audio/mpeg” loop=”false”></embed>
}else{
<embed src=”” type=”audio/mp3″ hidden=”true” loop=”false” mastersound></embed>
}

or

Copy code

The code is as follows:

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/msie ([\d.]+)/)){
jQuery(‘#__alert_sound’).html(‘<object classid=”clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95″><param name=”AutoStart” value=”1″ /><param name=”Src” value=”/sounds/alert/1.mp3″ /></object>’);
}
else if(ua.match(/firefox\/([\d.]+)/)){
jQuery(‘#__alert_sound’).html(‘<embed src=”/sounds/alert/1.mp3″ type=”audio/mp3″ hidden=”true” loop=”false” mastersound></embed>’);
}
else if(ua.match(/chrome\/([\d.]+)/)){
jQuery(‘#__alert_sound’).html(‘<audio src=”/sounds/alert/1.mp3″ type=”audio/mp3″ autoplay=”autoplay” hidden=”true”></audio>’);
}
else if(ua.match(/opera.([\d.]+)/)){
jQuery(‘#__alert_sound’).html(‘<embed src=”/sounds/alert/1.mp3″ hidden=”true” loop=”false”><noembed><bgsounds src=”/sounds/alert/1.mp3″></noembed>’);
}
else if(ua.match(/version\/([\d.]+).*safari/)){
jQuery(‘#__alert_sound’).html(‘<audio src=”/sounds/alert/1.mp3″ type=”audio/mp3″ autoplay=”autoplay” hidden=”true”></audio>’);
}
else {
jQuery(‘#__alert_sound’).html(‘<embed src=”/sounds/alert/1.mp3″ type=”audio/mp3″ hidden=”true” loop=”false” mastersound></embed>’);
}