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.
| 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-TagErforderlich.
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.Das Ergebnis des Beispiels im Opera-Browser ist in Abb. dargestellt. 1.
Reis. 1. Spielen Sie eine Audiodatei ab
BrowserDie 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.
Früher verfügten Browser nicht über integrierte Funktionen zur Unterstützung von Audio- und Videoinhalten, aber mit der Entwicklung des Internets ist die Unterstützung von Multimedia-Elementen als Funktion moderner Browser zu einer Notwendigkeit geworden. HTML5 führte neue Elemente und ein, die in allen modernen Browsern unterstützt werden. Der Hauptzweck des Tags besteht darin, der Seite Audioinhalte hinzuzufügen.
Das Audiodateiformat bestimmt die Struktur und Darstellungsmerkmale von Audiodaten bei der Speicherung auf einem Speichermedium (Speichergerät). Um Redundanz von Audiodaten zu vermeiden, werden in der Regel spezielle Audio-Codecs verwendet, dank derer Audiodaten komprimiert werden. Moderne Browser unterstützen die folgenden 3 Audioformate:
| JA | JA | JA |
| JA | JA | JA |
| JA | JA | JA |
| JA | JA | NEIN |
| JA | NEIN | NEIN |
| JA | JA | NEIN |
- Das MP3-Format ist Codec und Container zugleich. Es wird überall häufig zum Hosten heruntergeladener Musik verwendet.
- Das WAV-Format ist gleichzeitig Codec und Container.
- Ogg-Container + Vorbis-Audiocodec. Er wird allgemein als „Ogg Vorbis“ bezeichnet. Es wurde von der Xiph-Community entwickelt, um proprietäres MP3, AAC und WMA zu ersetzen.
MIME-Typen für Audio:
| Audio/MPEG |
| audio/ogg |
| Audio/WAV |
| 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
| automatisches Abspielen | automatisches Abspielen | Legt fest, dass das Audio automatisch gestartet wird, sobald es fertig ist. |
| Kontrollen | Kontrollen | Zeigt integrierte Steuerelemente für Mediendateien an (Wiedergabe-/Pause-Taste, Schieberegler, mit dem Sie zu einem bestimmten Fragment des Videos springen können, und Lautstärkeregelung). |
| Schleife | Schleife | Schleife die Dateiwiedergabe (unser Song ist gut – fangen Sie von vorne an). |
| gedämpft | gedämpft | Zeigt an, dass der Ton stummgeschaltet wird (kein Ton). |
| Vorspannung | Auto Metadaten keiner | Gibt an, wie Audio geladen werden soll, wenn die Seite geladen wird. Das Attribut wird ignoriert, wenn das Autoplay-Attribut vorhanden ist. |
| src | URL | Gibt die URL der Audiodatei an. |
Das Element verwendet dieselben Attribute wie das Element, mit Ausnahme der Breiten-, Höhen- und Posterattribute. Ähnlich wie bei der Verwendung des Elements können Sie mithilfe des Elements mehrere Audioformatoptionen bereitstellen, wie im folgenden Beispiel gezeigt:
Audio in HTML5 Audio in HTML5 Ihr Browser unterstützt dieses Audioformat nicht. Sie können diese Datei über den folgenden Link herunterladen:In diesem Beispiel:
Wir haben der Seite Audioinhalt (Tag) hinzugefügt und das Attribut „controls“ hinzugefügt, um integrierte Steuerelemente für die Multimediadatei anzuzeigen (Wiedergabe-/Pause-Schaltfläche, einen Schieberegler, mit dem Sie zu einem bestimmten Fragment des Videos wechseln können, sowie einen Lautstärkeregler).
Eines der bemerkenswertesten Merkmale HTML5 streamt Audio.
Wenn Sie sich für Webentwicklung interessieren, ist diese Sammlung von 10 unglaublichen HTML5-Audioplayern praktisch.
- Audio- und Videoplayer, der in reiner Sprache geschrieben ist HTML5 Und CSS. Die Unterstützung älterer Browser erfolgt über Blitz Und Silverlight Spieler, die nachahmen HTML5 MediaElement-API.
MediaElement bietet viele Designs und Unterstützung für gängige Plattformen: WordPress, Drupal, Joomla usw.
Dieser Player ist recht minimalistisch, aber funktional. Gut, wenn Sie Wiedergabelisten und ausgefallene Effekte benötigen!
Ein weiterer großartiger Spieler, vielleicht der beste auf der gesamten Liste. Profis ist, dass es sehr einfach einzurichten ist und in der Größe recht flexibel ist und auf eine unbegrenzte Anzahl von Farben anpassbar ist.
U Cross-Browser-Unterstützung, und für ältere Browser gibt es sie Blitz-analog.
Du benutzt Mootools Auf deiner Webseite? Wenn ja, dann könnte Ihnen dieser Player gefallen HTML5 Und Mootools JavaScript Rahmen. Der Player funktioniert perfekt in allen modernen Browsern.
Dieser Spieler ist der einzige auf der Liste, der bezahlt wird. Es kostet nur 5 $, funktioniert aber perfekt. Der Spieler hat viele nützliche Funktionen, zum Beispiel den Schutz Ihrer Audiodaten vor Abhören durch Signal-Overlay, was sich sehr gut für die kommerzielle Nutzung eignet.
Quelle: http://codecanyon.net/item/universal-html5-audio-player
IN beteiligte Technologien HTML5 Und Blitz, was es zu einer sehr leichten (10 KB) und robusten Cross-Browser-Lösung für das Streaming von Audio macht.
Möchten Sie wissen, was Sie damit machen können? Soundmanager 2? Besuchen Sie uns, um die Demo anzusehen!
HTML5-Audio bietet verbesserte Funktionen für die Arbeit mit Audioinhalten. Bis vor Kurzem bestand die einzige Möglichkeit, Sounddateien zu Webseiten hinzuzufügen, darin, Hintergrundsound über ein Tag zu integrieren, das abgespielt wurde, während der Benutzer auf der Seite surfte, ohne die Möglichkeit, es auszuschalten.
Dank der Hinzufügung eines neuen Elements zur HTML5-Spezifikation ist es nun möglich, Audioinhalte eingebettet hinzuzufügen Softwareschnittstelle ohne Plug-Ins zu verwenden.
So fügen Sie HTML5-Audio zu einer Webseite hinzu 1. Element-Browser-UnterstützungIE: 9.0
Firefox: 3.5 Basisunterstützung, 15.0 volle Unterstützung
Chrome: 3.0
Safari: 3.1
Oper: 10.5
iOS Safari: 7.1
Opera Mini: -
Android-Browser: 4.1
Chrome für Android: 44
Das HTML5-Element wird zum Einbetten von Audioinhalten in Webseiten verwendet. Im Allgemeinen sieht HTML-Markup so aus:
Das Steuerattribut fügt Browser hinzu, um die Steueroberfläche des Audioplayers anzuzeigen – Wiedergabe-, Pause- und Lautstärketasten.
Reis. 1. Aussehen Audioplayer in verschiedenen Browsern Derzeit gibt es kein Audioformat, das in allen Browsern funktioniert. Um sicherzustellen, dass Inhalte einem möglichst breiten Publikum zugänglich sind, wird daher empfohlen, mehrere Audioquellen einzubeziehen, die über das src-Attribut des Elements dargestellt werden. Gleichzeitig können Sie Fallback-Inhalte für Browser hinzufügen, die das Element nicht unterstützen.
Laden Sie name.mp3 herunter
| automatisches Abspielen | Automatische Wiedergabe einer Audiodatei unmittelbar nach dem Laden der Seite. |
| Kontrollen | Weist den Browser an, grundlegende Steuerelemente für die Wiedergabe anzuzeigen (Wiedergabe starten und stoppen, zu einer anderen Stelle in einer Aufnahme springen, Lautstärke anpassen). |
| Schleife | Loop-Wiedergabe einer Audiodatei. |
| gedämpft | Schaltet den Ton beim Abspielen einer Audiodatei aus. |
| Vorspannung | Ein Attribut, das für das Vorladen von Audioinhalten verantwortlich ist. Optional, einige Browser ignorieren es. Mögliche Werte: auto – Der Browser lädt die gesamte Audiodatei herunter, sodass sie verfügbar ist, wenn der Benutzer mit der Wiedergabe beginnt. Metadaten – Der Browser lädt den ersten kleinen Teil der Audiodatei herunter, um ihre grundlegenden Eigenschaften zu bestimmen. keine – kein automatischer Download der Audiodatei. |
| src | Enthält die absolute oder relative URL der Audiodatei. |
Ein Audio-Codec (Decoder) ist ein Programm zum Konvertieren digitaler Daten in ein Audiodatei- oder Audiostream-Format. Beliebte Audioformate sind:
MP3 ist das beliebteste Audioformat, das eine verlustbehaftete Komprimierung verwendet und es Ihnen ermöglicht, die Dateigröße um ein Vielfaches zu reduzieren. Aufgrund der Lizenzgebühren werden Firefox und Opera nicht unterstützt.
A.A.C. (Erweiterter Audio-Codec)- geschlossener Codec, analog zu MP3, unterstützt aber im Vergleich zu letzterem mehr hohe Qualität Ton mit einer ähnlichen Dateigröße.
Ogg Vorbis ist ein kostenloses Format mit Open Source, unterstützt in Firefox, Opera und Chrome. Bietet gute Qualität Sound, wird aber von Hardware-Playern nicht allgemein unterstützt.
3. Alternative MedienressourcenDas Element wird verwendet, um mehrere Medienressourcen für und hinzuzufügen. Zeigt alternative Video-/Audiodateien an, aus denen der Browser basierend auf dem unterstützten Medientyp oder Codec auswählen kann.
4. Fügen Sie Untertitel und Titel hinzuDas Element wird verwendet als untergeordnetes Element Und . Fügt eine Textspur für Untertitel, Medientitel oder andere Textinformationen hinzu, die während der Wiedergabe einer Audio- oder Videodatei sichtbar sein sollen.
| Standard | Zeigt an, dass dieser Titel standardmäßig abgespielt wird. Nur ein Element kann ein bestimmtes Attribut enthalten. |
| Art | Gibt die Art der Textspur an; Untertitel werden standardmäßig angezeigt. Akzeptierte Werte: Untertitel – Übersetzung von Dialogen und Soundeffekten, die als Text über dem Video angezeigt werden (für gehörlose Benutzer). Kapitel – fügt Kapiteltitel als Liste zur Navigation durch die Mediendatei hinzu. Beschreibungen – fügt eine Audiobeschreibung des Geschehens im Video hinzu (für blinde Benutzer). Metadaten – Von Skripten verwendete Metadaten werden Benutzern nicht angezeigt. Untertitel – Textvervielfältigung der Video-Audiospur, angezeigt als Untertitel für das Video. |
| Etikett | Fügt einen Titeltitel hinzu. Wenn dieses Attribut nicht festgelegt ist, wendet der Browser den Standardwert an. |
| src | Enthält eine absolute oder relative URL zu den Textspurdaten. |
| srclang | Sprache des abgespielten Titels. |
Mithilfe von CSS-Stilen können Sie Ihrem Audioplayer ein ungewöhnliches Aussehen verleihen. Die Wiedergabe wird über ein kleines Skript (unter Verwendung der jQuery-Bibliothek) gesteuert. Der Ton erscheint, wenn Sie mit der Maus über die Aufnahme fahren.
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.
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-TagAudio- gepaartes Tag, das den Hintergrundton, die Musik oder einen anderen Audiostream auf der Website definiert.
Audio-Tag-Attribute
Autoplay – die Datei wird sofort abgespielt, wenn die Seite geladen wird (ähnlich wie Hintergrundmusik bgsound)
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.
