Anleitung: So fügt man Audio in HTML mit Attributen hinzu

HTML Audio Tag

Das HTML-Audio-Tag wird verwendet, um die Audio-Datei direkt in Ihre Webseite einzubetten. Dieses Etikett verfügt über viele Attribute, mit denen das Verhalten von Audio-Playern angepasst werden kann, einschließlich autoplay, loop, preload und controls.

Hier ist ein Beispiel für das HTML-Audio-Tag in Aktion:

<audio src="/audiofile.mp3" controls></audio>

In diesem Beispiel ist die Audio-Datei „audioFile.mp3“ in die Webseite eingebettet, und das Steuerungsattribut wird verwendet, um den Benutzer des Audio-Players (Spielen, Sperre, Volumen usw.) anzuzeigen.

HTML Audio Attribute

Das HTML-Audioelement enthält mehrere Attribute, mit denen Sie sein Verhalten anpassen können:

• src: Die URL der Audio-Datei abzuspielen.
• autoplay: Ob das Audio beim Laden der Seite automatisch abgespielt werden sollte.
• controls: Geben Sie an, ob die Standard-Audio-Steuerung angezeigt werden soll.
• loop: Gibt an, ob sich das Audio wiederholen sollte, wenn er das Ende erreicht.
• preload: Geben Sie an, ob Audio vorgeladen werden soll. Der mögliche Wert ist „none“, „metadata“ und „auto“.

HTML Audio Player

HTML Audio Player ist eine grafische Schnittstelle, mit der Benutzer die in der Webseite eingebetteten Audiodateien steuern können. Standardmäßig zeigt der HTML-Audio-Player grundlegende Steuerelemente wie Wiedergabe, Pause und Volumen an. Allerdings Sie können das Aussehen und die Funktionalität des Audio-Players mit CSS und JavaScript anpassen.

HTML Play Audio

Um Audio in HTML abzuspielen, können Sie Audio-Tag verwenden und mit SRC-Attributen gespielte Audiodateien angeben. Zum Beispiel:

<audio src="/audiofile.mp3" controls></audio>

Dadurch wird die Audio-Datei „audiofile.mp3“ in Ihre Webseite eingebettet und die Audio-Player-Steuerelemente für den Benutzer angezeigt.

HTML Audio Autoplay

HTML Audio Autoplay Attribut kann verwendet werden, um automatisch eine Audio-Datei abzuspielen, wenn die Webseite geladen wird. Zum Beispiel:

<audio src="/audiofile.mp3" autoplay></audio>

Bitte beachten Sie, dass einige Webbrowser aus Sicherheitsgründen eine automatische Wiedergabe verhindern können. In allen Fällen funktioniert diese Funktion möglicherweise nicht.

HTML Audio Autoplay Falsch

Einige Browser verhindern Audio und Videos, die automatisch abspielen, um unnötige Wiedergabe zu verhindern. Um sicherzustellen, dass Ihr Audio-Player in diesen Browsern arbeitet, sollten Sie das automatische Wiedergabeattribut auf false festlegen. Zum Beispiel:

<audio controls autoplay="false"> <source src="/audiofile.mp3" type="audio/mp3" /> </audio>

HTML-Audioelement

HTML-Audioelemente sind die Kernelemente, die zur Einbindung von Audiodateien in die Webseite verwendet werden. Es unterstützt umfangreiche Audioformate, einschließlich MP3, OGG und WAV.

Was ist das richtige HTML-Element, das Audio-Datei abspielt?

Das korrekte HTML-Element, das Audio-Dateien gespielt hat, ist das Audioelement. Sie können eine Reihe von Attributen verwenden, um dieses Element zu definieren, um das Verhalten und das Aussehen des Audio-Players zu steuern.

HTML Audio Steuerelemente

Mit dem Attribut HTML-Audio-Steuerelemente kann der Benutzer Standard-Audio-Player-Steuerelemente (Spielen, Pause, Lautstärke usw.) angezeigt werden. Zum Beispiel:

<audio src="/audiofile.mp3" controls></audio>

Dadurch wird die Audio-Datei „audiofile.mp3“ in die Webseite eingebettet und die Audio-Player-Steuerung für Benutzer angezeigt.

Einbetten Audio HTML

Um Audio in HTML einzubetten, können Sie das Audio-Tag verwenden und die Audio-Datei mit dem SRC-Attribut angeben. Zum Beispiel:

<umio src = "/adifile.mp3"> </audio>

HTML-Audiovolumen

Mit den HTML-Lautstärkemitteln können eine Lautstärke des Audio-Players eingerichtet werden. Dieses Attribut akzeptiert den Wert zwischen 0 (stumm) und 1 (maximales Volumen). Es ist ein Beispiel:

<audio src="/audiofile.mp3" volume="0.5"></audio>

Dadurch wird die Audio-Datei „audiofile.mp3“ in Ihre Webseite eingebettet und das Volumen auf 50% festgelegt.

HTML-Audio-Vorspannung

Das HTML-Audio-Vorspannungsattribut kann verwendet werden, um festzustellen, ob die Audio-Datei beim Laden der Webseite vorinstalliert (heruntergeladen) werden soll. Das Vorspannungsattribut akzeptiert drei Werte: none, metadata, und auto. Zum Beispiel:

<audio src="/audiofile.mp3" preload="none"></audio>

Dadurch wird die Audio-Datei „audiofile.mp3“ in die Webseite einbettet und verhindert, dass sie vor dem Laden vorliegt.

HTML-Audio-Autoplay funktioniert nicht

Wenn die automatische Wiedergabefunktion von HTML Audio nicht funktioniert, kann der Webbrowser des Benutzers sie möglicherweise stoppen. Um dieses Problem zu lösen, können Sie eine Wiedergabetaste oder einen Ereignis hinzufügen, das von anderen Benutzern ausgelöst wird, um die Audio-Wiedergabe zu starten.

HTML-Audio Loop

HTML-Audio-Loop-Attribute können für die automatische Wiedergabe von Audiodateien verwendet werden. Zum Beispiel:

<audio src="/audiofile.mp3" loop></audio>

Es wird in die Audio-Datei „audiofile.mp3“ in der Webseite eingebettet und automatisch überträgt.

HTML-Audio-Player-Code

Es ist ein Beispiel für den HTML-Audio-Player-Code. Dieses Beispiel zeigt, wie CSS und JavaScript verwendet werden, um das Aussehen und die Funktion des Audio-Players anzupassen:

<audio id="myAudio" src="/audiofile.mp3" controls></audio> <script> var audio = document.getElementById("myAudio"); audio.volume = 0.5; // Set volume to 50% audio.addEventListener("ended", function() { // Loop playback when audio file ends this.currentTime = 0; this.play(); }); </script> <style> /* Customize appearance of audio player */ #myAudio { width: 100%; background-color: #f2f2f2; padding: 16px; } </style>

YouTube Audio Player HTML

YouTube bietet Audio-Player, die mit HTML in die Webseite eingebettet werden können. Um den YouTube-Audio-Player einzubetten, können Sie den folgenden Code verwenden:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{VIDEO_ID}?" title="xxx" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Ersetzen Sie {VIDEO_ID} durch die ID des YouTube-Videos, das Sie einbetten möchten.

HTML 5 Record Audio

HTML5 bietet die erstellte API von Audio mithilfe der Mediarecorder-Schnittstelle in der Webseite. Es ist ein Beispiel dafür, wie Audio in HTML5 mithilfe der Mediarecorder-API aufzeichnet wird:

navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { const recorder = new MediaRecorder(stream); recorder.start(); setTimeout(() => { recorder.stop(); }, 5000); recorder.ondataavailable = (e) => { const audioURL = URL.createObjectURL(e.data); const audio = document.createElement("audio"); audio.src = audioURL; document.body.appendChild(audio); };