Heim > Web-Frontend > js-Tutorial > So steuern Sie den Hintergrundmusikwechsel und den automatischen Wiedergabeton mit jquery_jquery

So steuern Sie den Hintergrundmusikwechsel und den automatischen Wiedergabeton mit jquery_jquery

WBOY
Freigeben: 2016-05-16 16:15:23
Original
2784 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JQuery den Wechsel der Hintergrundmusik und die automatische Wiedergabe von Ansagen steuert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Viele Leute fügen der Webseite ein Stück Hintergrundmusik hinzu, wenn sie zum ersten Mal lernen, Webseiten zu erstellen. Sobald sie die Musik hören, verspüren sie oft ein Erfolgserlebnis.

Hier erkläre ich, wie man mit js die Wiedergabe und den Stopp von Hintergrundmusik steuert. Die Details lauten wie folgt:

1. jquery-Steuerung Hintergrundmusik-Schalter

Code kopieren Der Code lautet wie folgt:








Hintergrundmusik ausschalten




Das Obige stellt vor, wie JQuery den Hintergrundmusikwechsel steuert, und wird als nächstes weiter ausgebaut.

2. JQuery spielt automatisch den Aufforderungston ab

Die erste automatische Benachrichtigungstonfunktion für die Website wurde im Discuz-Forum gefunden. Ein Problem besteht jedoch darin, dass nur Flash und kein HTML5 unterstützt wird. Es ist nicht klar, ob die neueste Version HTML5 unterstützt.
Für die Discuz 7.2-Version werden player.swf, pm_1.mp3, pm_2.mp3 und pm_3.mp3 bereitgestellt. Verwenden Sie dann das folgende Skript zur Implementierung:

Code kopieren Der Code lautet wie folgt:




Leider ist diese Methode auf Flash beschränkt und auf Apple-Geräten kann es zu Problemen kommen.

HTML5-Open-Source-Player JPlayer unterstützt die automatische Wiedergabe von Aufforderungstönen
JPlayer unterstützt Wiedergabeereignisse, um automatische Wiedergabeaufforderungen auszulösen.

1. Laden Sie JPlayer in eine Div-Ebene, z. B. #jplayer.

Code kopieren Der Code lautet wie folgt:
$(function() {
$("#jplayer").jPlayer({
swfPath: „http://www.jplayer.org/latest/js/Jplayer.swf“,
Bereit: Funktion () {
           $(this).jPlayer("setMedia", {
            mp3: "./resources/message.mp3"
         });
},
Geliefert: „mp3“
});
});
Fügen Sie den Körperteil hinzu:

Nach dem Laden von JQuery wird der Div-Inhalt von jplayer zu:
in Browsern, die SWF unterstützen

Code kopieren Der Code lautet wie folgt:
< ;param name="wmode" value="opaque">

wird zu:
in Browsern, die HTML5 unterstützen

Code kopieren Der Code lautet wie folgt:

Nachdem der Ladevorgang abgeschlossen ist, wird das Wiedergabeereignis ausgelöst.

2. Wiedergabe-Soundereignis auslösen

Code kopieren Der Code lautet wie folgt:
$("#jplayer").jPlayer('play');

3. Loop-Wiedergabefunktion, die alle 5 Sekunden einen Aufforderungston abspielt

Code kopieren Der Code lautet wie folgt:
Funktion PlaySound() {
$("#jplayer").jPlayer('play'); setInterval("PlaySound()", 5000); Rückgabe wahr;
}

Anhang:

1. Lösen Sie das Problem, dass der Aufforderungston nicht automatisch abgespielt werden kann

Wenn Sie das Wiedergabe-Trigger-Ereignis unmittelbar nach dem Laden von JQplayer ausführen, hat es keine Auswirkung. Der genaue Grund ist mir nicht bekannt. Es liegt wahrscheinlich daran, dass die Audiodatei nicht geladen wird.

2. Die Lösung besteht darin, das Triggerereignis 5 Sekunden warten zu lassen, bis es ausgeführt wird.


Code kopieren Der Code lautet wie folgt:setTimeout("$('#jplayer').jPlayer('play ')" , 5000);
Nachdem die Seite geladen wurde, ertönt nach 5 Sekunden automatisch ein Aufforderungston.

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage