How to control background music switch and automatic playback sound with jquery_jquery

The example in this article describes how jquery controls the background music switch and automatic playback of prompts. Share it with everyone for your reference. The details are as follows:

Many people add a piece of background music to the web page when they first learn to create web pages. The moment they hear the music playing, they often feel a sense of accomplishment.

Here I will explain how to use js to control the playback and stop of background music. The details are as follows:

1. jquery control background music switch

Copy code The code is as follows:

Turn off background music

The above introduces how jquery controls the background music switch, and will be further expanded next.

2. JQuery automatically plays the prompt sound

The earliest automatic notification sound function for the website was found in the Discuz forum. But one problem is that it only supports flash and does not support HTML5. It is not clear whether the latest version supports HTML5.
For Discuz 7.2 version, player.swf, pm_1.mp3, pm_2.mp3, pm_3.mp3 are provided, and then use the following script to implement:

Copy code The code is as follows:

Unfortunately, this method is limited to flash, and you may run into trouble on Apple devices.

HTML5 open source player JPlayer supports automatic playback of prompt sounds
JPlayer supports play events to trigger automatic playback prompts.

1. Load JPlayer into a div layer, such as #jplayer.

Copy code The 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 body part:

After loading JQuery, the div content of jplayer becomes:
in browsers that support swf

Copy code The code is as follows:

becomes:
in browsers that support HTML5

Copy code The code is as follows:

After loading is completed, the playback event is triggered.

2. Trigger playback sound event

Copy code The code is as follows:

$("#jplayer").jPlayer('play');

3. Loop playback function, playing a prompt tone every 5 seconds

Copy code The code is as follows:

function PlaySound() {
$("#jplayer").jPlayer('play');
setInterval("PlaySound()", 5000);
Return true;
}

Appendix:

1. Solve the problem that the prompt sound cannot be played automatically

If you run the playback trigger event immediately after loading JQplayer, it will have no effect! I don’t know the specific reason. It is probably because the audio file is not loaded.

2. The solution is to let the trigger event wait for 5 seconds to execute.

Copy code The code is as follows:

setTimeout("$('#jplayer').jPlayer('play')" , 5000);

After the page is loaded, a prompt sound will be played automatically after 5 seconds.

I hope this article will be helpful to everyone’s jquery programming design.