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

May 16, 2016 pm 04:15 PM
jquery 开关 控制 Piepton 方法 背景音乐 自动播放

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.

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App So schreiben Sie einen Roman in der Tomato Free Novel-App. Teilen Sie das Tutorial zum Schreiben eines Romans in der Tomato Novel-App Mar 28, 2024 pm 12:50 PM

Tomato Novel ist eine sehr beliebte Roman-Lesesoftware. Jeder Roman und Comic ist sehr interessant und möchte auch Romane schreiben Also, wie schreiben wir den Roman darin? Meine Freunde wissen es nicht, also lasst uns gemeinsam auf diese Seite gehen und uns eine Einführung zum Schreiben eines Romans ansehen. Teilen Sie das Tomato-Roman-Tutorial zum Schreiben eines Romans. 1. Öffnen Sie zunächst die kostenlose Tomato-Roman-App auf Ihrem Mobiltelefon und klicken Sie auf „Personal Center – Writer Center“. 2. Gehen Sie zur Seite „Tomato Writer Assistant“ – klicken Sie auf „Neues Buch erstellen“. am Ende des Romans.

Wie rufe ich das BIOS auf dem Colorful-Motherboard auf? Bringen Sie Ihnen zwei Methoden bei Wie rufe ich das BIOS auf dem Colorful-Motherboard auf? Bringen Sie Ihnen zwei Methoden bei Mar 13, 2024 pm 06:01 PM

Colorful-Motherboards erfreuen sich auf dem chinesischen Inlandsmarkt großer Beliebtheit und Marktanteil, aber einige Benutzer von Colorful-Motherboards wissen immer noch nicht, wie sie im BIOS Einstellungen vornehmen sollen? Als Reaktion auf diese Situation hat Ihnen der Herausgeber speziell zwei Methoden zum Aufrufen des farbenfrohen Motherboard-BIOS vorgestellt. Kommen Sie und probieren Sie es aus! Methode 1: Verwenden Sie die U-Disk-Start-Tastenkombination, um das U-Disk-Installationssystem direkt aufzurufen. Die Tastenkombination für das Colorful-Motherboard zum Starten der U-Disk ist zunächst ESC oder F11, um ein Black zu erstellen Wenn Sie den Startbildschirm sehen, drücken Sie kontinuierlich die ESC- oder F11-Taste auf der Tastatur, um ein Fenster zur Auswahl der Startelementsequenz aufzurufen. Bewegen Sie den Cursor an die Stelle, an der „USB“ angezeigt wird " wird angezeigt, und dann

So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) So stellen Sie gelöschte Kontakte auf WeChat wieder her (ein einfaches Tutorial erklärt Ihnen, wie Sie gelöschte Kontakte wiederherstellen) May 01, 2024 pm 12:01 PM

Leider löschen Menschen aus bestimmten Gründen oft versehentlich bestimmte Kontakte. WeChat ist eine weit verbreitete soziale Software. Um Benutzern bei der Lösung dieses Problems zu helfen, wird in diesem Artikel erläutert, wie gelöschte Kontakte auf einfache Weise wiederhergestellt werden können. 1. Verstehen Sie den WeChat-Kontaktlöschmechanismus. Dies bietet uns die Möglichkeit, gelöschte Kontakte wiederherzustellen. Der Kontaktlöschmechanismus in WeChat entfernt sie aus dem Adressbuch, löscht sie jedoch nicht vollständig. 2. Nutzen Sie die integrierte „Kontaktbuch-Wiederherstellung“-Funktion von WeChat, um Zeit und Energie zu sparen. Mit dieser Funktion können Benutzer schnell gelöschte Kontakte wiederherstellen. 3. Rufen Sie die WeChat-Einstellungsseite auf und klicken Sie auf die untere rechte Ecke, öffnen Sie die WeChat-Anwendung „Me“ und klicken Sie auf das Einstellungssymbol in der oberen rechten Ecke, um die Einstellungsseite aufzurufen.

So spielen Sie die nächste Seite automatisch ab, nachdem Sie eine PPT-Diashow eingerichtet haben So spielen Sie die nächste Seite automatisch ab, nachdem Sie eine PPT-Diashow eingerichtet haben Mar 26, 2024 pm 03:26 PM

1. Öffnen Sie eine PPT, wechseln Sie zur Registerkarte auf [Diashow] und suchen Sie in der Menüleiste nach der Option [Diashow festlegen]. 2. Stellen Sie die [Filmwechselmethode] unter dieser Option auf [Wenn Probenzeit vorhanden ist, nutzen Sie diese], bestätigen Sie und beenden Sie den Vorgang. 3. Aktivieren Sie in der Optionsleiste [Diashow] die Option [Timer verwenden]. Die oben genannten drei Schritte müssen eingestellt werden, da sonst keine automatische Umschaltung möglich ist. 4. Wechseln Sie zur Registerkarte [Design], legen Sie zunächst eine Wechselanimation für die Folie fest und stellen Sie den Folienwechsel per Mausklick auf den Timer ein (automatischer Folienwechsel). 1 Sekunde nach Abschluss der Diashow auf der Seite zur nächsten Seite wechseln.

Wie schalte ich Hintergrundmusik in ppt aus? So löschen Sie den PPT-Hintergrundton Wie schalte ich Hintergrundmusik in ppt aus? So löschen Sie den PPT-Hintergrundton Mar 14, 2024 am 08:55 AM

Um ihre PPT-Inhalte ansprechender zu gestalten, entscheiden sich einige Benutzer dafür, Hintergrundmusik zu ihren Folien hinzuzufügen. Wie können sie die Hintergrundmusik ausschalten, wenn sie sie nicht benötigen? Sie können es direkt stummschalten oder den Hintergrundton aus der Animation löschen, um das Problem zu lösen. Schauen wir uns die spezifischen Vorgänge unten an. Methode 1: Lautstärke ausschalten. Klicken Sie auf die Schaltfläche „Musik“. Suchen Sie in der ppt die Schaltfläche „Hintergrundmusik“ und klicken Sie mit der linken Maustaste, um sie auszuwählen. Klicken Sie auf „Lautstärke“. Nachdem Sie die Hintergrundmusik ausgewählt haben, suchen Sie oben auf der Benutzeroberfläche die Option „Lautstärke“ und klicken Sie, um sie zu erweitern. Klicken Sie auf „Stumm“ Klicken Sie im erweiterten Dropdown-Menü auf die Option „Stumm“, um die Hintergrundmusik auszuschalten. Methode 2: Animation löschen Klicken Sie auf die Animation

So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) So stellen Sie die Schriftgröße auf dem Mobiltelefon ein (Schriftgröße auf dem Mobiltelefon einfach anpassen) May 07, 2024 pm 03:34 PM

Das Festlegen der Schriftgröße ist zu einer wichtigen Personalisierungsanforderung geworden, da Mobiltelefone zu einem wichtigen Werkzeug im täglichen Leben der Menschen geworden sind. Um den Bedürfnissen verschiedener Benutzer gerecht zu werden, wird in diesem Artikel erläutert, wie Sie das Nutzungserlebnis Ihres Mobiltelefons verbessern und die Schriftgröße des Mobiltelefons durch einfache Vorgänge anpassen können. Warum müssen Sie die Schriftgröße Ihres Mobiltelefons anpassen? Durch Anpassen der Schriftgröße kann der Text klarer und leichter lesbar werden. Geeignet für die Lesebedürfnisse von Benutzern unterschiedlichen Alters. Praktisch für Benutzer mit Sehbehinderung, die Schriftgröße zu verwenden Einstellungsfunktion des Mobiltelefonsystems – So rufen Sie die Systemeinstellungsoberfläche auf – Suchen und geben Sie die Option „Anzeige“ in der Einstellungsoberfläche ein – suchen Sie die Option „Schriftgröße“ und passen Sie sie mit einem Drittanbieter an Anwendung – Laden Sie eine Anwendung herunter und installieren Sie sie, die die Anpassung der Schriftgröße unterstützt – öffnen Sie die Anwendung und rufen Sie die entsprechende Einstellungsoberfläche auf – je nach Person

Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) Das Geheimnis des Ausbrütens mobiler Dracheneier wird gelüftet (Schritt für Schritt erfahren Sie, wie Sie mobile Dracheneier erfolgreich ausbrüten) May 04, 2024 pm 06:01 PM

Mobile Spiele sind mit der Entwicklung der Technologie zu einem festen Bestandteil des Lebens der Menschen geworden. Mit seinem niedlichen Drachenei-Bild und dem interessanten Schlüpfvorgang hat es die Aufmerksamkeit vieler Spieler auf sich gezogen, und eines der Spiele, das viel Aufmerksamkeit erregt hat, ist die mobile Version von Dragon Egg. Um den Spielern dabei zu helfen, ihre eigenen Drachen im Spiel besser zu kultivieren und zu züchten, erfahren Sie in diesem Artikel, wie Sie Dracheneier in der mobilen Version ausbrüten. 1. Wählen Sie den geeigneten Drachenei-Typ aus, der Ihnen gefällt und zu Ihnen passt, basierend auf den verschiedenen Arten von Drachenei-Attributen und -Fähigkeiten, die im Spiel zur Verfügung stehen. 2. Verbessern Sie die Stufe der Brutmaschine, indem Sie Aufgaben erledigen und Requisiten sammeln. Die Stufe der Brutmaschine bestimmt die Schlüpfgeschwindigkeit und die Erfolgsquote beim Schlüpfen. 3. Sammeln Sie die Ressourcen, die die Spieler zum Schlüpfen benötigen

Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Schneller Meister: So eröffnen Sie zwei WeChat-Konten auf Huawei-Handys! Mar 23, 2024 am 10:42 AM

In der heutigen Gesellschaft sind Mobiltelefone zu einem unverzichtbaren Bestandteil unseres Lebens geworden. Als wichtiges Werkzeug für unsere tägliche Kommunikation, Arbeit und unser Leben wird WeChat häufig genutzt. Allerdings kann es bei der Abwicklung unterschiedlicher Transaktionen erforderlich sein, zwei WeChat-Konten zu trennen, was erfordert, dass das Mobiltelefon die gleichzeitige Anmeldung bei zwei WeChat-Konten unterstützt. Als bekannte inländische Marke werden Huawei-Mobiltelefone von vielen Menschen genutzt. Wie können also zwei WeChat-Konten auf Huawei-Mobiltelefonen eröffnet werden? Lassen Sie uns das Geheimnis dieser Methode lüften. Zunächst müssen Sie zwei WeChat-Konten gleichzeitig auf Ihrem Huawei-Mobiltelefon verwenden. Der einfachste Weg ist

See all articles