The audio tag of H5 is compatible with all browser methods.

The audio tag of H5 is compatible with all browser methods.

Front-end Communication Group, which provides a large number of documents, books, and materials. We look forward to your participation! GROUP: 127768464

As required by the project, a new webpage sound function was just launched recently, and the H5 new tag <audio> </audio> was used. However, audio can only support browsers over IE8, how can low-version browsers support this? Next I will introduce my solutions.

Two solutions have been found through online data collection. One is to introduce <script src = "// api.html5media.info/1.1.8/html5media.min.js"> </script> to the page head for processing compatibility, use the <embed> </enbed> label. After actual tests, the first method of Introducing JavaScript seems to fail to achieve the expected results. If you are interested, you can try it. It may be that my operation is incorrect. I am using the second method, using <audio> </audio> and <embed> </enbed> together, for IE8 and later browsers, <audio> </audio> is used to play audio. For IE8 and earlier browsers, <embed> </enbed> is used.

Through actual observation, I found that the embed tag in IE8 and the following browsers is actually embedded in Windows media player, the js method for playing, pausing, and stopping media player is the method for Operating Windows media player. It is a bit pitfall. I found that the autostart = "false" of the embed label is not very well supported in other browsers, this is when the page is loaded, it will automatically sound. The solution to this problem is [if lte IE 8] to determine the browser version, the <embed> </enbed> label is used only in IE8 and earlier browsers. The <embed> </enbed> label is not loaded in IE8 or later browsers. The actual code is as follows:

<div style="display:none">        <audio id="a_player_audio" src="a.mp3"></audio>        <audio id="b_player_audio" src="b.mp3"></audio>        <audio id="c_player_audio" src="c.mp3"></audio>        <audio id="d_player_audio" src="d.mp3"></audio>        <audio id="e_player_audio" src="e.mp3"></audio>    </div>    <!--[if lte IE 8]>    <div>-->

The Control Method of js is slightly different. Playing is the play () method. For the Stop playback method, audio only provides the pause method pause (), while Windows media player provides the pause () method () method and stop () method.

All of the above are my summary of experience. If you have any mistakes, you are welcome to correct them, or you can exchange some ideas. ,

　　Front-end Communication Group, which provides a large number of documents, books, and materials. We look forward to your participation! GROUP: 127768464