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

Durch das Hinzufügen von Audio zu Ihrer Website können Ihre Benutzer attraktiver und interaktiver werden. Mit HTML-Audio können Sie die Audiodatei direkt in die Webseite einbetten. In diesem Artikel, der vom MiniTool Movie Editor bereitgestellt wird, werden wir alle Informationen zu HTML-Audio vorstellen, einschließlich HTML-Audio-Labels, HTML-Audio-Player und der Verwendung von HTML, um Ihrer Website Audio hinzuzufügen.

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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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=“https://de.minitool.com//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:

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); };

Audio-Player für Website HTML-Code

Es gibt viele kostenlose und bezahlte HTML-Audio-Playback-Bibliotheken, mit denen Sie Ihre Website Audio-Player hinzufügen können. Einige beliebte Optionen sind:

Plyr
jPlayer
AudioJS
MediaElement.js
Wavesurfer.js

Hier ist ein Beispiel für die Verwendung von Plyr, um Ihrer Website einen Audio-Player hinzuzufügen:

Der Code verwendet die PRYR-Bibliothek, um das Aussehen und die Funktion des Audio-Players anzupassen.

Kostenloser HTML-Audio-Player mit Wiedergabeliste

Einige HTML-Audio-Wiedergabelbibliotheken wie jPlayer und MediaElement.js bieten die bauliche Unterstützung für die Wiedergabeliste. So verwenden Sie iPlayer, um eine Wiedergabeliste zu verwenden, um einen kostenlosen HTML-Audio-Player auf Ihrer Website hinzuzufügen:

HTML-Audio-Player für alle Browser

Um sicherzustellen, dass Ihr Audio-Player in allen Browsern arbeitet, sollten Sie ein alternatives Dateiformat bereitstellen, das von verschiedenen Browsern unterstützt wird. Zum Beispiel:

Durch die Bereitstellung mehrerer Quellen können Sie sicherstellen, dass der Browser das erste Support-Format verwendet, das er begegnet.

HTML Hidden Audio Player

Wenn Sie den Audio-Player in die Website einbetten möchten, ihn jedoch aus der Ansicht ausblenden können, können Sie CSS verwenden, um die Display-Eigenschaft des Players auf keine zu setzen. Zum Beispiel:

<audio controls id=“audio“ style=“display: none;“> <source src=“https://de.minitool.com//audiofile.mp3″ type=“audio/mp3″ /> </audio>

Sie können dann JavaScript verwenden, um den Player-Player zu steuern.

WMA in HTML-Audio

WMA (Windows Media Audio) ist ein proprietäres Audio-Format, das von Microsoft entwickelt wurde. Obwohl es nicht als MP3 oder WAV verwendet wird, spielen einige Benutzer möglicherweise noch WMA-Dateien auf ihren Websites ab.

Leider unterstützen alle Webbrowser WMA nicht. Laut Caniuse unterstützen nur Internet Explorer und Microsoft Edge die WMA-Wiedergabe.

Wenn Sie Ihrer Website WMA-Dateien hinzufügen möchten, können Sie HTML-Audioelemente verwenden und mehr alternative Dateiformate bereitstellen, die vom Browser unterstützt werden. Zum Beispiel:

Benutzerdefinierter Audio-Player HTML-CSS

Wenn Sie das Erscheinungsbild des Audio-Players steuern möchten, können Sie HTML und CSS verwenden, um einen benutzerdefinierten Audio-Player zu erstellen. Hier ist ein Beispiel:

<audio id=“audio“ src=“https://de.minitool.com//audiofile.mp3″></audio> <div id=“audio-player“> <div id=“play-pause“ class=“play“> <i class=“fa fa-play“></i> </div> <div id=“progress-container“> <div id=“progress“></div> </div> <div id=“volume-container“> <i class=“fa fa-volume-up“></i> <input type=“range“ min=“0″ max=“1″ step=“0.1″ value=“1″ id=“volume-slider“ /> </div> </div> <style> #audio-player { display: flex; align-items: center; justify-content: center; } #play-pause { cursor: pointer; margin-right: 10px; padding: 5px; border-radius: 50%; background-color: #333; } #play-pause i { color: #fff; } #progress-container { width: 50%; height: 5px; background-color: #ccc; margin-right: 10px; border-radius: 10px; position: relative; } #progress { position: absolute; top: 0; left: 0; height: 100%; background-color: #333; border-radius: 10px; } #volume-container { display: flex; align-items: center; } #volume-slider { margin-left: 10px; } </style> <script> const audio = document.getElementById(„audio“); const playPause = document.getElementById(„play-pause“); const progress = document.getElementById(„progress“); const volumeSlider = document.getElementById(„volume-slider“); let isPlaying = false; function togglePlayPause() { if (isPlaying) { audio.pause(); playPause.innerHTML = ‚<i class=“fa fa-play“></i>‘; } else { audio.play(); playPause.innerHTML = ‚<i class=“fa fa-pause“></i>‘; } isPlaying = !isPlaying; } function updateProgress() { const duration = audio.duration; const currentTime = audio.currentTime; const progressPercent = (currentTime / duration) * 100; progress.style.width = `${progressPercent}%`; } function setVolume() { audio.volume = volumeSlider.value; } playPause.addEventListener(„click“, togglePlayPause); audio.addEventListener („timeupdate“, updateProgress); volumeSlider.addEventListener(„input“, setVolume); </script>

In diesem Beispiel verwenden wir ein großartiges Schriftartsymbol, um die Play- und Pause-Tasten anzuzeigen. Wir verwenden auch Flexbox, um den Audio-Player zu konzentrieren und den Schieberegler und die Symbole auszurichten.

HTML-Code-Streaming-Audio

Wenn Sie Audio auf der Website übertragen möchten, können Sie HTML-Audioelemente verwenden und Links zu Audiodateien bereitstellen. Zum Beispiel:

<audio controls> <source src=“https://example.com/audiofile.mp3″ type=“audio/mp3″ /> </audio>

Stellen Sie sicher, dass Ihr Server so konfiguriert ist, dass der Fluss von Audiodateien unterstützt wird.

HTML-Audiosteuerung Stil

Sie können CSS verwenden, um die Standard-HTML-Audio-Steuerung zu stylen. Es ist ein Beispiel:

audio::-webkit-media-controls { display: none !important; } audio::-webkit-media-controls-play-button { background-image: url(„play.png“); width: 50px; height: 50px; } audio::-webkit-media-controls-volume-slider { height: 10px; background-color: #ccc; border-radius: 10px; } audio::-webkit-media-controls-timeline-container { height: 5px; background-color: #ccc; border-radius: 10px; } audio::-webkit-media-controls-timeline { height: 100%; background-color: #333; border-radius: 10px; }

Der CSS-Code verbirgt die Standardsteuerung im Webkit-Browser (wie Safari und Chrome) und ersetzt sie durch ein benutzerdefiniertes Bild der Schaltfläche „Spielen Sie“. Es ist auch für den Lautstärkeregler und den Zeitplan ausgelegt.

HTML-Code für Audio und Video

Sie können HTML-Videoelemente verwenden, um das Video auf Ihre Website einzubetten. Es ist ein Beispiel:

<video controls> <source src=“https://example.com/videofile.mp4″ type=“video/mp4″ /> </video>

Das Videoelement funktioniert ähnlich wie das Audioelement, jedoch mit zusätzlichen Attributen und untergeordneten Elementen zum Anzeigen von Bildunterschriften, Untertiteln und alternativen Videoformaten.

HTML Audio Book

Wenn Sie eine Audioversion eines Buches auf der Website bereitstellen möchten, können Sie HTML-Audioelemente verwenden und für jedes Kapitel separate Audiodateien bereitstellen. Sie können auch JavaScript verwenden, um das Spielen zu steuern und das aktuelle Kapitel anzuzeigen.

Hier ist ein Beispiel:

<audio id=“audio“> <source src=“https://de.minitool.com//chapter1.mp3″ type=“audio/mp3″ /> </audio> <div id=“chapter-list“> <ul> <li><a href=“https://de.minitool.com/#“ data-source=“chapter1.mp3″>Chapter 1</a><li><a href=“https://de.minitool.com/#“ data-source=“chapter2.mp3″>Chapter 2</a></li> <li><a href=“https://de.minitool.com/#“ data-source=“chapter3.mp3″>Chapter 3</a></li>

</ul> </div> <script> const audio = document.getElementById(„audio“); const chapterList = document.getElementById(„chapter-list“); chapterList.addEventListener(„click“, (event) => { event.preventDefault(); const source = event.target.getAttribute(„data-source“); audio.src = source; audio.play(); }); </script>

In diesem Beispiel verwenden wir JavaScript, um den Kapitellink anzuhören und dann die Audioquelle in die entsprechende Datei zu ändern. Wir verwenden auch das Attribut „Datenquelle“, um die URL jeder Audiodatei zu speichern. Zeigen Sie auf der HTML-Seite echte Audio und Video auf der HTML-Seite. Wenn Sie auf der Website echte Audio- oder Video-Audio- oder-videos anzeigen möchten, können Sie HTML-Audio- und Videoelemente verwenden, einschließlich Streaming-Protokolle wie HLS (HTTP Live-Streaming) oder DASH (Dynamic Adaptive Flow auf HTTP). Diese Protokolle ermöglichen es dem Browser, Audio oder Video in einem kleinen Block zu empfangen, wodurch der Puffer verringert und ein reibungsloseres Spielerlebnis bietet. Um HLS oder Dash zu verwenden, müssen Sie Medienserver verwenden, die diese Protokolle wie WOWZA oder Amazon Cloudfront unterstützen.

HTML Audio Android

Die meisten Android-Geräte unterstützen HTML-Audioelemente, aber einige ältere Geräte können nicht alle Audioformate unterstützen. Um die maximale Kompatibilität zu gewährleisten, sollten Sie auf verschiedenen Android-Geräten eine Vielzahl von Audioformaten und Prüfungs Audio-Player bereitstellen.

HTML-Audioquelle

Das Attribut „src“ des HTML-Audioelements gibt die von der Audio-Datei zu spielen angeben. Sie können mehrere Quellen bereitstellen, indem Sie das „source „-Element im Audioelement verwenden. Zum Beispiel:

<audio controls> <source src=“https://de.minitool.com//audiofile.mp3″ type=“audio/mp3″ /> <source src=“https://de.minitool.com//audiofile.ogg“ type=“audio/ogg“ /> </audio> „`

Der Code gibt zwei Quellen in der Audio-Datei im MP3- und OGG-Vorbis-Format an.

So fügen Sie einen Audio-Link in HTML hinzu

Um dem HTML-Code einen Link zur Audiodatei hinzuzufügen, setzen Sie das Element und die HREF-Eigenschaft auf die URL der Audio-Datei. Zum Beispiel:

<a href=“https://de.minitool.com//audiofile.mp3″>Listen to audio file</a>

HTML-Audioereignisse

HTML-Audioelemente haben mehrere Vorfälle ausgestellt, und Sie können Vorgänge im JavaScript-Code auslösen.

canplay: Der Browser kann beim Starten des Audios gestartet werden.
play: Das Audio wird gestartet, wenn es zu spielen beginnt.
pause: Es wird gestartet, wenn das Audio suspendiert wird.
ended: Feuer, wenn das Audio das Spielen beendet hat.

Sie können JavaScript verwenden, um diese Ereignisse anzuhören. Zum Beispiel:

const audio = document.getElementById („audio“); Audio.AdDeVentListener („Play“, () => {console.log („Audio begann zu spielen“);});

WordPress HTML Audio Player

Wenn Sie WordPress verwenden, stehen mehrere Plugins zur Verfügung, um Ihrer Website HTML-Audio-Player hinzuzufügen. Einige beliebte Optionen sind Audioigniter, kompakter WP-Audio-Player und sehr einfache Podcasts.

Fazit

HTML-Audioelemente bieten eine einfache Möglichkeit, Audiodateien zur Website hinzuzufügen. Durch die Verwendung von JavaScript können Sie die Audio-Wiedergabe steuern und benutzerdefinierte Funktionen wie Playlist oder Real-Time-Streaming-Medien hinzufügen. Bei der Unterstützung einer Vielzahl von Audioformaten und verschiedenen Veranstaltungen sind HTML-Audioelemente ein leistungsstarkes Tool, um ein faszinierendes Audioerlebnis im Internet zu schaffen.

Videos/Audios/Fotosverwaltung-Tool empfohlen

Diese Anwendungen sind vollständig mit Windows 11/10/8.1/8/7 kompatibel.

MiniTool MovieMaker

Eine einfache und kostenlose Videobearbeitungssoftware, kein Wasserzeichen. Mit der eingebetteten Vorlage können Sie schnell persönliche Folien machen und sie mit Ihren Freunden teilen!

MiniTool MovieMakerKlicken zum Download100%Sauber & Sicher

MiniTool uTube Downloader

Kostenlos YouTube-Videos, Audio und Untertitel ohne Anzeigen oder Bündel erhalten. Es kann mehrere Aufgaben gleichzeitig mit hoher Geschwindigkeit bedienen und unterstützt mehrere Dateiformate.

Holen Sie sich kostenlose Werbung oder Bündel-Tasche YouTube-Videos, Audio und Untertitel. Es kann mehrere Aufgaben mit hoher Geschwindigkeit ausführen und mehrere Dateiformate unterstützen.

MiniTool uTube DownloaderKlicken zum Download100%Sauber & Sicher

MiniTool Video Converter

Konvertieren Sie Videos und Audio schnell von einem Dateiformat in ein anderes Dateiformat, um mehr Geräte anzuwenden. Es unterstützt mehr als 1.000 beliebte Ausgangsformate und die Batch-Konvertierung. Darüber hinaus kann der PC-Bildschirm ohne Wasserzeichen aufzeichnen.

MiniTool Video ConverterKlicken zum Download100%Sauber & Sicher

Lesen Sie auch

ÜBER DEN AUTOR

Sylie

Position: Kolumnistin

Seit September 2016 lernt sie Deutsch. Sie hat immer geglaubt, dass Deutsch eine sehr lebendige Sprache ist. Im Jahr 2019 fuhr sie nach Deutschland als Austauschstudentin zum Sprachstudium an der Martin-Luther-Universität und blieb lange Zeit hier. In ihrer Freizeit reist sie gerne und hält die Landschaft unterwegs mit ihrer Kamera fest. Während des Auslandsstudiums hat sie viele Städte in Deutschland und sogar in Europa besucht. Abgesehen von ihrer Heimatstadt Chengdu ist ihre Lieblingsstadt Leipzig, wegen der künstlerischen Atmosphäre und des leckeren chinesischen Restaurants. Im Alltagesleben mag sie gerne, mit zwei Freundinnen eine Tasse Kaffee zu trinken und zu plaudern.