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 explanation of the use and difference between relative and absolute in HTML
The difference between relative and absolute in H...
Detailed explanation and classic interview questions of Vue life cycle and hook functions
Table of contents 1. Vue life cycle 2. Hook funct...
Summary of data interaction between Docker container and host
Preface When using Docker in a production environ...
The front-end page pop-up mask prohibits page scrolling
A problem that front-end developers often encount...
js dynamically generates tables (node operations)
This article example shares the specific code of ...
js method to realize shopping cart calculation
This article example shares the specific code of ...
jQuery plugin to achieve seamless carousel
Seamless carousel is a very common effect, and it...
Sample code for implementing mysql master-slave replication in docker
Table of contents 1. Overview 1. Principle 2. Imp...
How to limit access frequency, download rate and number of concurrent connections in Nginx
1. Overview of modules and instructions used to l...
Detailed explanation of MySQL transaction isolation level and MVCC
Table of contents Transaction Isolation Level Pro...
Detailed explanation of using split command to split Linux files
A few simple Linux commands let you split and rea...
Detailed explanation on how to get the IP address of a docker container
1. After entering the container cat /etc/hosts It...
Win10 + Ubuntu 16.04 dual system perfect installation tutorial [detailed]
Be sure to remember to back up your data, it is p...
How to quickly build an LNMP environment with Docker (latest)
Preface Tip: Here you can add the approximate con...
Summary of the use of Vue computed properties and listeners
1. Computed properties and listeners 1.1 Computed...