Home > Developer > JavaScript
Jquery controls the background music switch and automatic playing of the prompt sound, jquery background music
This article describes how jquery controls the background music switch and automatically plays the prompt sound. Share it with you for your reference. The details are as follows:
Many people often have a sense of accomplishment when they hear the music when they are new to creating web pages.
Here we will explain how to use js to control the playing and stopping of background music. The details are as follows:
I. jquery controls the background music Switch
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<Head>
<Script src = "js/jquery. min. js"> </script>
<Script type = "text/javascript">
// Load the background music and play it automatically
$ ('# Bg_music '). append ('<embed id = "m_bg_music" loop = true volume = "60" autostart = true hidden = true src = "guoanstart"/> ');
$ ('# Bg_music_btn'). click (function (){
Var state = $ ('# bg_music_btn'). attr ('state ');
If (state = '1 ')//
{
$ ('# Bg_music_btn'). attr ('state', '0 ');
('{Bg_music_btn'{.html ('Open background Music ');
$ ('# M_bg_music'). remove ();
} Else if (state = '0 ')
{
$ ('# Bg_music_btn'). attr ('state', '1 ');
$ ('# M_bg_music'). remove ();
('{Bg_music_btn'{.html ('close background Music ');
$ ('# Bg_music '). append ('<embed id = "m_bg_music" loop = true volume = "60" autostart = true hidden = true src = "guoanstart"/> ');
}
});
</Script>
</Head>
<Body>
<! -- Control playback -->
<Div id = "bg_music_btn" state = '1'> disable background music </div>
<! -- Background Music -->
<Div id = "bg_music"> </div>
</Body>
</Html>
The above describes how jquery controls the background music switch, and then further expands.
Ii. JQuery auto-play prompt
The website was first available with the automatic tone function and found in the Discuz forum. However, the problem is that it only supports flash, does not support HTML5, and does not determine whether HTML5 is supported in the latest version.
For Discuz 7.2, player.swf?pm_1.mp3=pm_2.mp3=pm_3.mp3 is deployed, and then implemented using the following script:
Copy codeThe Code is as follows: <div id = "soundplayerlayer" style = "position: absolute; top:-100000px"> </div>
<Script type = "text/javascript" reload = "1">
Function soundplayer (file ){
$ ('Soundplayerlay '). innerHTML = AC_FL_RunContent ('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0', 'height', '0', 'src ', '{$ boardurl} images/sound/player.swf', 'flashvars', 'sfile = {$ boardurl} images/sound/pm _ '+ file + 'full', 'menu ', 'false', 'allowScriptAccess', 'sample', 'swliveconnect ', 'true ');
}
</Script>
Unfortunately, this method is limited to flash, which may cause problems on Apple devices.
HTML5 open-source player JPlayer supports automatic playing of prompts
JPlayer supports automatic playing of prompts triggered by play events.
1. Load JPlayer to a div layer, for example, # jplayer.
Copy codeThe Code is as follows: $ (function (){
$ ("# Jplayer"). jPlayer ({
SwfPath: "http://www.jplayer.org/latest/js/Jplayer.swf ",
Ready: function (){
$ (This). jPlayer ("setMedia ",{
Mp3: "./resources/message.mp3"
});
},
Supplied: "mp3"
});
});
Add the following content to the body: <div id = "jplayer"> </div>
After JQuery is loaded, the div content of jplayer is changed:
Copy codeThe Code is as follows: <div id = "jplayer" style = "width: 0px; height: 0px;"> <object height =" 1 "width =" 1 "id =" jp_flash_0 "data =" http://www.jplayer.org/latest/js/Jplayer.swf "type =" application/x-shockwave-flash "style =" width: 0px; height: 0px; "> <param name =" flashvars "value =" jQuery = jQuery & id = jplayer & vol = 0.8 & muted = false "> <param name =" allowscriptaccess "value =" always "> <param name =" bgcolor "value =" #000000 "> <param name =" wmode "value =" opaque "> </object> </div>
In a browser that supports HTML5, it becomes:
Copy codeThe Code is as follows: <div id = "jplayer" style = "width: 0px; height: 0px;"> <audio id =" jp_audio_0 "preload =" metadata "src = ". /resources/message.mp3 "> </audio> </div>
After the loading is complete, the playing event is triggered.
2. Trigger the playing prompt event
Copy codeThe Code is as follows: $ ("# jplayer"). jPlayer ('play ');
3. Loop playback function, playing a prompt every 5 seconds
Copy codeThe Code is as follows: function PlaySound (){
$ ("# Jplayer"). jPlayer ('play ');
SetInterval ("PlaySound ()", 5000 );
Return true;
}
Appendix:
1. solved the problem that the prompt sound cannot be automatically played.
If the trigger event of playing is run immediately after JQplayer is loaded, it will not work! I am not sure about the specific reason, probably because the audio file is not loaded.
2. The solution is to wait for the trigger event to be executed within 5 seconds.
Copy codeThe Code is as follows: setTimeout ("$ ('# jplayer'). jPlayer ('play')", 5000 );
After loading the page, the prompt is automatically played in 5 seconds.
I hope this article will help you with jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
