CherryFramework 3. Wie man das automatisch abgespielte Audio-Objekt in HTML5 hinzufügt HTML5

Das jeweilige Tutorial zeigt, was man machen soll, um das Audio-Objekt in HTML5 hinzuzufügen und es automatisch abzuspielen, sobald Webseitenbesucher Ihre WordPress Website öffnen.

CherryFramework 3. Wie man das automatisch abgespielte Audio-Objekt in HTML5 hinzufügt

Um das Audio-Objekt in HTML5 zur WordPress Website hinzuzufügen, führen Sie die folgenden Schritte aus:

1. Laden Sie die Audio-Datei in den Ordner wp-content/themes/themeXXXXX/audio hoch. Wenn Sie diesen Ordner nicht finden können, erstellen Sie ihn. Wir empfehlen Ihnen die Audio-Datei im Format MP3 zu nutzen, weil dieses Format von allen modernen Browsern unterstützt wird.

2. Kopieren Sie die Datei header.php aus dem Ordner wp-content/themes/CherryFramework in den Ordner wp-content/themes/themeXXXXX, wenn die Datei in diesem Ordner fehlt.

3. Öffnen Sie die Datei wp-content/themes/themeXXXXX/header.php in jedem Code-Editor.

4. Fügen Sie den folgenden Code vor dem schlißenden Tag Header (head) ein:

   <script type="text/javascript">
   	(function($) {
   		$(document).ready(function() {
   			var audio = new Audio();
   			audio.src = "<?php echo get_stylesheet_directory_uri(); ?>/audio/file_name.mp3";
   			audio.loop = true;
   			audio.play();
   		});
   	})(jQuery);
   </script>
   </head>
   			

   Wo file_name.mp3 der Name der Audio-Datei im Hintergrund ist.

   Wenn Sie die Zeile audio.loop = true; hinzufügen, wird die Audio-Datei wieder abgespielt, sobald die Wiedergabe beendet ist:

   

5. Speichern Sie die Änderungen in der Datei header.php und laden Sie sie auf den Server hoch. Aktualisieren Sie Ihre Website, um den Sound im Hintergrund zu hören.

Sie können auch das ausführliche Video-Tutorial nutzen:

CherryFramework 3. Wie man das automatisch abgespielte Audio-Objekt in HTML5 hinzufügt