So fügen Sie eine Audiospur in HTML ein. Wir speichern Audiodaten aus dem Internet in Dateien. Untertitel und Titel hinzufügen

Da diese Frage sehr häufig gestellt wird, habe ich beschlossen, ihr im Unterricht einen eigenen Artikel zu widmen. Da HTML nicht über eine universelle Technologie zum Abspielen von Audio für alle Browser verfügt, empfehle ich zur Lösung dieses Problems, die Audio-Player-Datei herunterzuladen, wie es auf den meisten Websites der Fall ist. Wir machen alles Schritt für Schritt:

1. Erstellen Sie auf dem Hosting, auf dem sich Ihre Site befindet, im Stammverzeichnis (dem Ordner, in dem sich die Indexdatei befindet) den Audioordner. In Zukunft werden Sie alle Audiodateien darin ablegen.

3. Wählen Sie nun aus notwendigen Dateien, besser im MP3-Format. Erstellen Sie einen Audioordner im Stammverzeichnis der Site und laden Sie sie hoch.

4. Jetzt müssen Sie nur noch den Player-Verbindungscode eingeben. Es ist für jede Site geeignet. An der richtigen Stelle müssen Sie nur den Pfad zur Player-Datei und zur Audiodatei angeben und die Wörter your_domain und audio_file name ersetzen:

Und alles ist fertig! Sie können sich auch das Arbeitsbeispiel ansehen.

So stellen Sie Hintergrundmusik in HTML ein, das ich verwende HTML-Funktionen und Browser können Sie auch Hintergrundmusik in die Seite einfügen. Sie benötigen eine Audiodatei im gewünschten Format: WAV, AU, MIDI oder MP3. Als Beispiel können Sie jede Datei mit der angegebenen Erweiterung verwenden.

Der erste Weg ist das Embed-Tag. Das Embed-Element wird zum Laden und Anzeigen von Objekten (z. B. Videodateien, Flash-Filmen, einigen Audiodateien usw.) verwendet, die der Browser zunächst nicht versteht.

Die Syntax ist ganz einfach:

Ein schließendes Tag ist nicht erforderlich.

Schauen wir uns nun ein Beispiel eines Datensatzes mit Attributen und unten deren Dekodierung an:

Tag-Attribute für die Audiowiedergabe in HTML einbetten
width – Panelbreite in Pixel (oder Prozentsatz)
Höhe – Panelhöhe in Pixel (oder Prozentsatz)
ausrichten – Position des Panels relativ zum Text, mögliche Werte sind links, rechts, zentriert
versteckt – ermöglicht das Ausblenden des Panels, Attributwerte: true – das Panel ist ausgeblendet, false – das Panel ist sichtbar (Standardwert)
autostart – true – der Player startet automatisch, wenn die Seite geladen wird, false – wartet darauf, dass die Play-Taste gedrückt wird
Schleife – Schleife, wahr – der Titel wird im Kreis abgespielt, und wenn falsch – nur einmal

Zweiter Weg. Sehr alt, aber auch praktisch) Fügen Sie die Melodie dem gleichen Ordner (Verzeichnis) hinzu, in dem sich Ihre Datei befindet, und schreiben Sie in den Textkörper den folgenden Code:

Dadurch erklingt nach dem Laden der Seite die von Ihnen im bgsound-Tag angegebene Melodie. Schauen wir uns nun die Tag-Attribute genauer an:

src – Pfad zu Ihrer Audiodatei
Schleife – wie oft die Melodie wiederholt werden soll (wenn -1, wird sie endlos wiederholt)
Balance – Stereo-Balancewert (von -10000 bis 10000)
Lautstärke – Lautstärke der Melodiewiedergabe, wobei 0 das Maximum und -10000 das Minimum ist.

Allerdings gibt es keinerlei Möglichkeit, den Player zu steuern – jedes Mal, wenn die Seite aktualisiert wird, wird der Titel erneut abgespielt.

Nachdem ich die Methode zum Einfügen von Hintergrundmusik beschrieben habe, möchte ich Sie davon abraten, da die meisten Benutzer in der Regel bereits Musik hören, wenn sie verschiedene Websites besuchen. Begleitmusik kann ihn daher nur dazu zwingen, den Tab mit der Seite zu schließen.

Einfügen von Audio und Musik in HTML5 – Audio-Tag
Audio – ein gepaartes Tag, das Hintergrundsound, Musik oder andere Audiostreams auf der Website definiert.

Audio-Tag-Attribute

Autoplay – die Datei wird sofort abgespielt, wenn die Seite geladen wird (ähnlich wie bei bgsound-Hintergrundmusik)
Steuerelemente – Zeigt das Player-Bedienfeld im Browser an
Schleife – spielt die Datei nach ihrem Ende erneut ab
Vorladen – Die Audiodatei wird beim Laden der Seite geladen
src – Pfad zur Audiodatei (mp3 oder ogg)

Beispielcode mit Audio-Tag

Audio-Tag

Audio in HTML 5

Das Audio-Tag wird von Ihrem Browser nicht unterstützt.
Musik herunterladen.

Beschreibung

Fügt Audioeinstellungen auf einer Webseite hinzu, spielt sie ab und verwaltet sie. Der Pfad zur Datei wird über das src-Attribut oder einen Subtag angegeben. Sie können Text in den Container schreiben, der in Browsern angezeigt wird, die dieses Tag nicht unterstützen.

Die Liste der von Browsern unterstützten Codecs ist begrenzt und in der Tabelle aufgeführt. 1.

Tisch 1. Codecs und Browser

Codec	Internet Explorer	Chrom	Oper	Safari	Feuerfuchs
ogg/vorbis
wav
mp3
A.A.C.

Für die universelle Wiedergabe in bestimmten Browsern wird Audio mit verschiedenen Codecs codiert und Dateien werden gleichzeitig über das Tag hinzugefügt.

Syntaxattribute Die Tonwiedergabe beginnt sofort nach dem Laden der Seite. Fügt einer Audiodatei ein Bedienfeld hinzu. Wiederholt den Ton von Anfang an, nachdem er beendet ist. Wird zum Herunterladen einer Datei und zum Laden einer Webseite verwendet. Gibt den Pfad zur abgespielten Datei an. Schluss-Tag

Erforderlich.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

Audio-

Alexander Klimenkov – Vierzehn

Das Audio-Tag wird von Ihrem Browser nicht unterstützt. Musik herunterladen.

Beispielergebnis in Opera-Browser in Abb. dargestellt. 1.

Reis. 1. Spielen Sie eine Audiodatei ab

Browser

Die Steuerelemente für die Audiowiedergabe sehen je nach Browser unterschiedlich aus, die grundlegenden Elemente sind jedoch gleich. Dies sind die Wiedergabe-/Pause-Taste, die Titellänge, die verstrichene und die Gesamtspielzeit sowie die Lautstärke.

HTML-Sprache
Einfügen von Audio und Video

Ton einfügen. Etikett
Fügt Audioeinstellungen auf einer Webseite hinzu, spielt sie ab und verwaltet sie. Der Pfad zur Datei wird über das src-Attribut oder einen Subtag angegeben.

Syntax:

Manche

Tag-Attribute:

Autoplay – der Ton beginnt sofort nach dem Laden der Seite;

Kontrollen – fügt der Audiodatei ein Kontrollfeld hinzu;

Schleife – wiederholt die Wiedergabe des Sounds von Anfang an, nachdem er beendet ist;

Vorladen – wird zum Herunterladen einer Datei zusammen mit dem Laden einer Webseite verwendet;

src

Das schließende Tag ist erforderlich.
Sie können in den Container erläuternden Text schreiben, der in Browsern angezeigt wird, die dieses Tag nicht unterstützen.
Die Steuerelemente für die Audiowiedergabe sehen je nach Browser unterschiedlich aus, die grundlegenden Elemente sind jedoch gleich. Dies sind die Wiedergabe-/Pause-Taste, die Titellänge, die verstrichene und die Gesamtspielzeit sowie die Lautstärke.

Beispiel:

Ein Video einfügen. Etikett
Fügt Videoeinstellungen auf einer Webseite hinzu, spielt sie ab und verwaltet sie. Der Pfad zur Datei wird über das src-Attribut oder einen Subtag angegeben.

Syntax:

Es können mehrere Elemente verknüpft werden verschiedene Dateien. Der Browser verwendet das erste Format, das er startet.

Tag-Attribute:

Autoplay – das Video wird automatisch abgespielt, nachdem die Seite geladen wurde;

Kontrollen – fügt dem Video ein Kontrollfeld hinzu;

Schleife – wiederholt die Wiedergabe des Videos von Anfang an, nachdem es zu Ende ist;

Höhe – legt die Höhe des Bereichs für die Videowiedergabe fest;

Breite – legt die Breite des Bereichs für die Videowiedergabe fest;

Vorladen – wird zum Laden des Videos zusammen mit dem Laden der Webseite verwendet;

src – gibt den Pfad zur abgespielten Datei an.

Das schließende Tag ist erforderlich.
Sie können auch erklärenden Text in den Container schreiben, der in Browsern angezeigt wird, die diesen Tag nicht unterstützen.
Das Steuerattribut fügt Videosteuerelemente wie Wiedergabe, Pause und Lautstärke hinzu.
Es empfiehlt sich, immer die Attribute „Breite“ und „Höhe“ einzubeziehen.
Wenn Höhe und Breite nicht festgelegt sind, kennt der Browser die Videogröße nicht. Der Effekt besteht darin, dass die Seite aktualisiert wird (oder flackert), während das Video geladen wird.

Beispiel:

Das Video-Tag wird von Ihrem Browser nicht unterstützt.

Beispielergebnis im Browser:

Hallo, liebe Blog-Leser. Es überrascht nicht, dass Medienseiten in letzter Zeit immer beliebter werden. Auf solchen Seiten ist es sehr interessant, man kann sich zum Beispiel ein Video ansehen oder tolle Musik hören. Aber dieses Mal hören wir Musik, und zwar lernen wir, wie wir mit HTML5 Audiodateien in unsere Website einfügen.

Wie sich herausstellt, unterstützt HTML5 Audio-Tags, was das Einfügen von Musik in eine Website sehr einfach macht. Zwar spielen nicht alle alten Browser die Audiodatei ab, aber alle modernen Browser spielen die Audiodatei mit Bravour ab.

Demo-Browser-Unterstützung

Alle Browser, die das Tag unterstützen, sind IE9+, Chrome, Opera, Safari und Firefox. Aber es gibt noch eine Nuance: Nicht alle Browser unterstützen alle Audioformate.

Beispiel: IE9+ unterstützt nur MP3-Dateien, nicht jedoch WAV und OGG.

Chrome unterstützt ab Version 6 fast alle Formate.

Opera 10+ unterstützt kein MP3, ehrlich gesagt scheint mir das sein ganz großer Nachteil zu sein, z beliebtes Format und unterstützt es nicht. Aber es funktioniert großartig mit WAV und OGG.

MIT Firefox-Browser die gleiche Geschichte wie bei Opera. Dafür hat sie ein riesiges und fettes Minus.

Safari unterstützt alle Audioformate außer ogg.

Hinzufügen einer Audiodatei zur Site

Um Ihrer Website eine Audiodatei hinzuzufügen, müssen Sie zwischen den Tags einen direkten Link zur Datei einfügen. Der Link wird mit dem Tag gekennzeichnet. So sieht der fertige Code aus:

Ihr Browser unterstützt kein Audio

Wie Sie sehen, wurden hier drei Dateien gleichzeitig hinzugefügt. Wenn also ein Browser MP3 nicht unterstützt, spielt er automatisch das Format ab, in dem er unterstützt wird, und so weiter.

Und wenn der Browser das Tag überhaupt nicht unterstützt, erscheint die Meldung „Ihr Browser unterstützt kein Audio“.

Freunde, hier ist ein Beispiel unserer Arbeit. Ein einfacher Player wird vom Browser selbst installiert.

Demo

Das ist alles, liebe Freunde. Wenn Sie Fragen oder Schwierigkeiten haben, stellen Sie diese in den Kommentaren. Bis bald.

Warum brauchen Sie Musik auf der Website?

Genug Interesse Fragen Das Abspielen von Musik- oder Sprachdateien auf der Website oder ein integrierter Player hilft den Website-Besuchern, sich zu entspannen, weckt positive Emotionen und versetzt sie in die richtige Stimmung, erleichtert sozusagen die Interaktion mit der Website. Diese Effekte funktionieren jedoch nur, wenn die Musik auf der Website richtig ausgewählt ist und die Lautstärke akzeptable Grenzen nicht überschreitet. Andernfalls sind alle Ihre Bemühungen umsonst und führen zu negativen Emotionen bei den Website-Besuchern.

Wie füge ich Audio (Musik) in HTML in eine Website ein?

Diese Frage wird uns oft gestellt: Musik auf einer Website ist ein relevantes und kreatives Element, und es gibt viele Möglichkeiten, sie abzuspielen, und sie sind nicht so schwer umzusetzen. Beginnen wir mit der Tatsache, dass jeder Benutzer Globales Netzwerk verwendet jeden Browser, um auf das Internet zuzugreifen, es gibt jedoch keine allgemeine und universelle Technologie zum Abspielen von Sound- und Musikdateien. Jeder Browser arbeitet nach seinen eigenen Algorithmen und diese unterscheiden sich etwas voneinander, sodass beim Abspielen von Musik durch Einbetten Probleme auftreten können im HTML-Code der Seite. Aber wie Sie wissen, sind alle Probleme lösbar!

Einfügen von Musik in Website-HTML, JavaScript, jQuery, AJAX-Methoden: Methode 1. Erstellen eines Audio-Musik-Players auf der Website oder im Player

Die Technologie ist einfach: Es wird eine Player-Datei erstellt, die die Website oder den Server nicht belastet. Wir wählen die Technologie aus, die wir verwenden möchten: JavaScript, jQuery, AJAX. Basierend auf der ausgewählten Technologie entwickeln wir ein Skript für unsere Site und fügen es in die Site ein. Das Skript wird je nach Bedarf erstellt: automatische Wiedergabe von Hintergrundmusik auf der Website oder ein vom Besucher gesteuerter Player. Als nächstes erstellen Sie im Stammverzeichnis der Site einen Ordner für Musik und laden dort Audiodateien hoch.

Alternativ können Sie auch einen Player mithilfe der Flash-Technologie erstellen. Ein solcher Player sieht dann eindrucksvoller aus. Die Wahrheit ist, dass es für die Website teurer und schwieriger wird (dadurch erhöht sich die Ladezeit der Seiten der Website).

Methode 2.

Installieren von Musik auf einer Website mithilfe von HTML

Mithilfe der HTML- und Browserfunktionen können Sie einen Player oder Hintergrundmusik in die Site einfügen. Die Technologie ist genauso einfach: HTML5-Code wird mit dem „Audio“-Tag erstellt und dieser Code wird in die Seite geschrieben, und wenn der Benutzer die Seite besucht, sieht er einen minimierten Player, der Besucher drückt den Play-Button oder automatisch Hintergrundmusik beginnt zu spielen. Das Erscheinungsbild des Players hängt vom Browser ab, über den der Besucher kam, die Funktionalität bleibt jedoch Standard: Schaltflächen „Wiedergabe“, „Stopp“, „Weiter“, „Zurück“, „Lautstärke“. Der Player mit HTML-Code sieht so aus:

Der Einbettungscode selbst sieht folgendermaßen aus:

Wie Sie vielleicht bemerkt haben, ermöglicht der Befehl „Steuert die automatische Wiedergabe“ die automatische Wiedergabe von Musik, sobald ein Besucher die Website betritt.

Eine alternative Version des HTML-Codes ist das „bgsound“-Tag. Dabei wird überhaupt kein visueller Player verwendet. Wenn Sie die Website besuchen, wird die Musik auf der Website abgespielt, Sie können jedoch die Lautstärke anpassen, pausieren usw. Der Benutzer wird dazu nicht in der Lage sein. Die Einstellung der Wiedergabelautstärke der Audiodatei wird im Code selbst konfiguriert.

Sounddateiformate zum Abspielen von Musik auf der Website können sein: WAV, AU, MIDI, MP3, OGG (Erweiterungen). Musikdateien werden auf die Site hochgeladen oder es werden Links zu den Sites verwendet, auf denen die Audiodatei Hauptsache, es ist gemeinfrei.