This article is an example of how jquery controls background music switches and automatic playback of cue tones. Share to everyone for your reference. Specifically as follows:
A lot of people are beginners when the Web page to add a piece of background music, hear the music sounded at the moment will always have a trace of achievement.
Here for you to explain how to use JS control background music playback and stop. Specifically as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<script src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" >
Load background music and play it automatically
$ (' #bg_music '). Append (' <embed id= "m_bg_music" Loop=true volume= "" Autostart=true hidden=true "src=" Guoan.mp3 "/ > ');
$ (' #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 (' Turn off background music ');
$ (' #bg_music '). Append (' <embed id= "m_bg_music" Loop=true volume= "" Autostart=true hidden=true "src=" Guoan.mp3 "/ > ');
}
});
</script>
<body>
<!--control playback-->
<div id= "bg_music_btn" state= ' 1 ' > Off background music </div>
<!--background music-->
<div id= "Bg_music" ></div>
</body>
The above describes how jquery controls the background music switch and then expands it further.
Two, jquery automatic playback beep
Early on the site has the function of automatic beep, found in the Discuz forum appeared. But it has a problem that only supports Flash, does not support HTML5, and does not explicitly support HTML5 in the latest version.
For the Discuz 7.2 release, player.swf, Pm_1.mp3, Pm_2.mp3, Pm_3.mp3 are available, and are then implemented using the following script:
Copy Code code as follows:
<div id= "Soundplayerlayer" style= "position:absolute;top:-100000px" ></div>
<script type= "Text/javascript" reload= "1" >
function SoundPlayer (file) {
$ (' Soundplayerlayer '). 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 + '. mp3′, ' menu ', ' false ', ' allowscriptaccess ', ' samedomain ', ' swliveconnect ', ' true ';
}
</script>
Unfortunately, this approach is limited to flash and may be in trouble on Apple devices.
HTML5 Open source player jplayer support auto play beep
Jplayer supports play events to trigger an autoplay beep.
1. Mount Jplayer to a div layer, such as #jplayer.
Copy Code code 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"
});
});
Body section add: <div id= "Jplayer" ></div>
After the Mount jquery is complete, the Jplayer div content becomes in the SWF-enabled browser:
Copy Code code 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 browsers that support HTML5, it becomes:
Copy Code code as follows:
<div id= "Jplayer" style= "width:0px; height:0px; " ><audio id= "jp_audio_0" preload= "metadata" src= "./resources/message.mp3" ></audio></div>
The event that triggers playback occurs after the load is completed.
2. Triggers the playback beep event
Copy Code code as follows:
$ ("#jplayer"). Jplayer (' play ');
3. Loop play function, play a beep every 5 seconds
Copy Code code as follows:
function PlaySound () {
$ ("#jplayer"). Jplayer (' play ');
SetInterval ("PlaySound ()", 5000);
return true;
}
Appendix:
1. Troubleshoot problems that can't play the beep automatically
If after loading Jqplayer, immediately runs the playback the triggering event, does not have any effect! What exactly is the reason I am not very clear, estimate is because the audio file is not loaded on.
2. The solution is to have the triggering event wait for 5 seconds to execute.
Copy Code code as follows:
SetTimeout ("$ (' #jplayer '). Jplayer (' play ')", 5000);
After loading the page, the beep automatically plays after 5 seconds.
I hope this article will help you with your jquery programming.
