Jquery controls the background music switch and automatic playing of the prompt sound, jquery background music

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.