Das <audio> Tag von HTML5 ist der einfachste Weg, um einer Webseite Hintergrundmusik oder Audio hinzuzufügen. Das grundlegende Schreiben lautet: , wobei die Eigenschaft der Steuerelemente zur Anzeige der Wiedergabesteuerung verwendet wird. 1. Die unterstützten Formate umfassen MP3, WAV, OGG, AAC und FLAC, aber die Kompatibilit?t jedes Browsers ist unterschiedlich. MP3 wird in Chrome, Edge, Safari und der neuen Version von Firefox unterstützt. WAV wird allgemein auf allen Plattformen verwendet. OGG wird von Firefox und Chrom unterstützt. AAC ist haupts?chlich auf Safari und iOS erh?ltlich. FLAC wird nur teilweise unterstützt; 2. Wenn Sie es verwenden, müssen Sie auf automatische Wiedergabestriktionen, Cross-Dom?nen-Probleme, Dateipfadfehler und Servermime-Typ-Konfiguration achten. 3.. Es wird empfohlen, mehrere Formate von Quelldateien bereitzustellen, um die Kompatibilit?t zu verbessern, z. B. gleichzeitig MP3 und OGG. 4. Das Wiedergabeverhalten kann über JavaScript gesteuert werden, z. B. auf die Schaltfl?che zum Abspielen von Audio.

Der einfachste Weg, um Hintergrundmusik oder Audio auf einer Webseite zu spielen, besteht darin, das HTML5 <audio></audio> > -Tag zu verwenden. Es erfordert keine Plug-Ins, und Mainstream-Browser unterstützen es ebenfalls, aber viele Leute stellen fest, dass das Audio nach der Verwendung nicht gespielt werden kann. Tats?chlich liegen die meisten Probleme im Format.

Grundlegende Schreibmethode: So fügen Sie ein Audio hinzu

Das <audio></audio> -Element von HTML5 ist sehr direkt zu verwenden, wobei eine grundlegende Struktur wie folgt:

 <audio src = "your-edio-file.mp3" Steuerelemente> </audio>

Nach dem Hinzufügen des controls wird der Browser mit Steuerelementen wie Spielen, Pause und Fortschrittsbalken geliefert. Sie k?nnen das Wiedergabeverhalten auch über JavaScript steuern, wie z. B. automatische Wiedergabe, Stummsch?pfen und Schleifenfunktionen.

Welche Formate werden unterstützt? Nicht alle Formate k?nnen verwendet werden

Obwohl <audio> sehr bequem ist, ist das von ihm unterstützte Format nicht einheitlich und unterschiedliche Browser sind unterschiedlich. Mehrere gemeinsame Formate sind MP3, WAV, OGG, AAC und FLAC, aber nicht alle Browser sind mit diesen kompatibel.

Allgemein gesprochen:

• MP3 : Chrome, Edge, Safari werden alle unterstützt und Firefox wird ebenfalls unterstützt (neuere Version).
• WAV : Universal auf der gesamten Plattform, verlustfreie Klangqualit?t, aber gro?e Dateien.
• OGG / Vorbis : Firefox- und Chromunterstützung, Safari unterstützt es auch, aber nicht so h?ufig wie MP3.
• AAC / M4A : Haupts?chlich gut auf Safari und iOS.
• FLAC : Einige Browser unterstützen wie Chrom und Firefox, werden jedoch nicht als einziges Format empfohlen.

Für die Kompatibilit?t wird daher im Allgemeinen empfohlen, mehrere Formate von Quelldateien bereitzustellen, damit der Browser das Spielen entscheiden kann:

 <Audiokontrollen>
  <Source Src = "audio.mp3" Typ = "Audio/mpeg">
  <Source Src = "Audio.ogg" Typ = "Audio/OGG">
  Ihr Browser unterstützt keine Audio -Wiedergabe.
</audio>

Ein paar Punkte, auf die wir im tats?chlichen Gebrauch achten k?nnen

Manchmal, selbst wenn das Format korrekt ist, kann es immer noch nicht gespielt werden. H?ufige Gründe sind:

• Automatische Wiedergabebeschr?nkungen : In den meisten Browsern k?nnen Benutzer zuerst mit der Seite (z. B. Klicken) interagieren, bevor sie automatisch Audio abspielen k?nnen, insbesondere solche mit Ton.
• Cross-Domain-Problem : Wenn die Audiodatei von einem anderen Dom?nennamen stammt, muss der Server die CORS-Berechtigungen korrekt festlegen.
• Dateipfadfehler : Die SRC-Adresse ist falsch geschrieben, was der h?ufigste Fehler mit niedrigem Niveau ist. überprüfen Sie, ob der Pfad korrekt ist.
• Die Konfiguration des Server -MIME -Typs ist falsch : Einige Server konfigurieren nicht den richtigen MIME -Typ, wodurch einige Formate nicht geladen werden k?nnen.

Wenn Sie beispielsweise auf die Schaltfl?che klicken m?chten, um mit dem Spielen zu beginnen, k?nnen Sie sie in JS wie folgt schreiben:

 const audio = document.querySelector ('audio');
Document.querySelector ('#Play-Btn'). AddEventListener ('Click', () => {
  audio.play ();
});

Welches Format ist der bequemste Weg zu w?hlen?

Wenn Sie nur ein Format einfügen m?chten, ist MP3 derzeit die beste Wahl für die Kompatibilit?t , insbesondere angesichts der Unterstützung von Mainstream -Browsern sowohl auf Mobilger?ten als auch auf dem Desktop. Wenn der Zielbenutzer jedoch h?ufiger Firefox oder andere Open Source -Browser verwendet, k?nnen Sie die OGG -Version gleichzeitig zur Verfügung stellen.

Kurz gesagt, verlassen Sie sich nicht nur auf ein Format. Bereiten Sie mehr Quellen für <audio></audio> vor, um mehr Ger?te und Browser abzudecken. Grunds?tzlich ist das.

Das obige ist der detaillierte Inhalt vonHTML5 -Audioelement und unterstützte Formate. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!