Compatibility issues when inserting audio files in HTML and playing them in browsers
|
Let's talk about some problems I have encountered after inserting audio files in HTML (playing mp3 files): 1. <embed type="audio/mp3" src="" autostart=true loop=false></embed> Problem: It works fine on IE8 (via media player plugin) but not on IE6 and IE7 You need to install the QuickTime plug-in to play it on Firefox Chrome converts it into the <vidio> tag on HTML5, which can play but will cause the entire screen to blue screen Opera won't autoplay 2. <embed type="audio/midi" src="" autostart=true loop=false></embed> Problem: The video will not play properly on IE6 and IE7, but it works fine on IE8 Normal on Firefox Chrome requires a dirty QuickTime plugin to play properly Opera won't autoplay 3. <object data="" /> Problem: The video cannot be played on IE6 and 7. IE8 will pop up a message saying "Articx is not used normally" Normal on Firefox Normal on Chrome Opera does not support 4. <audio src="" type="audio/mp3" /> Problem: HTML5 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, but other browsers do. Opera cannot play it automatically. 6. <embed src=""><noembed><bgsound src=""></noembed> Problem: IE6 and IE7 are not supported, other browsers are supported, Opera cannot play automatically Based on the above, I adopted the following method (executed under jQuery): Copy code The code is as follows:if (navigator.userAgent.indexOf("Chrome") > -1) { If it is Chrome: <audio src="" type="audio/mp3" autoplay="autoplay" hidden="true"></audio> }else if (navigator.userAgent.indexOf("Firefox")!=-1) { If it is Firefox: <embed src="" type="audio/mp3" hidden="true" loop="false" mastersound></embed> }else if (navigator.appName.indexOf("Microsoft Internet Explorer")!=-1 && document.all) { If it is 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 it is 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>'); } |
<<: A few experiences in self-cultivation of artists
>>: Teach you how to build the vue3.0 project architecture step by step
Recommend
Detailed graphic explanation of hadoop installation and configuration based on Linux7
Prepare the ingredients as shown above (ps: hadoo...
How to set static IP in centOS7 NET mode
Preface NAT forwarding: Simply put, NAT is the us...
How to solve the problem that the software package does not exist when installing software in Linux
When the software package does not exist, it may ...
js realizes 3D sound effects through audioContext
This article shares the specific code of js to ac...
Discussion on Web Imitation and Plagiarism
A few months after entering the industry in 2005, ...
How to sort a row or column in mysql
method: By desc: Neither can be achieved: Method ...
Some methods to optimize query speed when MySQL processes massive data
In the actual projects I participated in, I found...
MySQL slow log online problems and optimization solutions
MySQL slow log is a type of information that MySQ...
How to display percentage and the first few percent in MySQL
Table of contents Require Implementation Code dat...
How to build a MySQL high-availability and high-performance cluster
Table of contents What is MySQL NDB Cluster Preli...
Use of Linux crontab command
1. Command Introduction The contab (cron table) c...
MySQL statement arrangement and summary introduction
SQL (Structured Query Language) statement, that i...
Three ways to draw a heart shape with CSS
Below, we introduce three ways to draw heart shap...
Detailed explanation of common methods of JavaScript String
Table of contents 1. charAt grammar parameter ind...
Basic usage of exists, in and any in MySQL
【1】exists Use a loop to query the external table ...