Audio în HTML

Audio HTML

Elementul <audio> este folosit pentru a reda un fișier audio pe o pagină web.

Elementul HTML <audio>

Pentru a reda un fișier audio în HTML, folosiți elementul <audio>, cu unul sau mai multe elemente <source> pentru fișierele audio.

Exemplu

Un player audio cu controale și două formate sursă.

Un player audio cu atributul controls și două fișiere sursă (horse.ogg și horse.mp3), plus text de rezervă pentru browserele care nu acceptă elementul audio.

> Ieșire: pagină HTML completă

Prompt

Un player audio cu atributul controls și două fișiere sursă (horse.ogg și horse.mp3), plus text de rezervă pentru browserele care nu acceptă elementul audio.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio de bază</title>
</head>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Browserul dvs. nu acceptă elementul audio.
</audio>

</body>
</html>

Audio HTML - Cum Funcționează

Atributul controls adaugă controale audio precum redare, pauză și volum. Elementul <source> vă permite să oferiți mai multe fișiere audio; browserul folosește primul format pe care îl recunoaște. Textul dintre <audio> și </audio> apare doar în browserele care nu suportă elementul.

Redare Automată <audio> HTML

Pentru a porni un fișier audio automat, folosiți atributul autoplay.

Notă: Browserele Chromium blochează de obicei redarea automată, dar redarea automată fără sunet este întotdeauna permisă. Adăugați muted după autoplay pentru a permite audio-ului să pornească automat (dar fără sunet).

Redare automată

Un player audio care pornește automat.

Un player audio cu controale care pornește și el automat folosind atributul autoplay, cu surse ogg și mp3 și text de rezervă.

> Ieșire: pagină HTML completă

Prompt

Un player audio cu controale care pornește și el automat folosind atributul autoplay, cu surse ogg și mp3 și text de rezervă.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redare automată audio</title>
</head>
<body>

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Browserul dvs. nu acceptă elementul audio.
</audio>

</body>
</html>

Redare automată fără sunet

Un player audio care pornește automat fără sunet, astfel încât funcționează în browserele Chromium.

Un player audio cu controale care pornește automat fără sunet (atributele autoplay și muted), cu surse ogg și mp3 și text de rezervă, astfel încât să poată porni automat în browserele Chromium.

> Ieșire: pagină HTML completă

Prompt

Un player audio cu controale care pornește automat fără sunet (atributele autoplay și muted), cu surse ogg și mp3 și text de rezervă, astfel încât să poată porni automat în browserele Chromium.

Ieșire: pagină HTML completă

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redare automată audio fără sunet</title>
</head>
<body>

<audio controls autoplay muted>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Browserul dvs. nu acceptă elementul audio.
</audio>

</body>
</html>

Suport pentru Browsere

Elementul <audio> este suportat în toate browserele moderne (începând cu Chrome 4, Edge 9, Firefox 3.5, Safari 4 și Opera 10.5).

Formate Audio HTML

HTML suportă trei formate audio: MP3, WAV și OGG. MP3 funcționează în toate browserele majore; WAV și OGG funcționează în toate, cu excepția faptului că OGG nu este suportat în Safari (iar suportul WAV și OGG în Edge începe de la Edge 79).

Audio HTML - Tipuri de Media

Tipurile media pentru formatele suportate sunt: MP3 este audio/mpeg, OGG este audio/ogg, iar WAV este audio/wav.

Audio HTML - Metode, Proprietăți și Evenimente

DOM-ul HTML definește metode, proprietăți și evenimente pentru elementul <audio>. Acestea vă permit să încărcați, redați și puneți pe pauză fișiere audio, să setați durata și volumul și să răspundeți la evenimente precum pornirea sau punerea pe pauză a audio-ului.

Etichete Audio HTML

Etichetele legate de audio sunt: <audio> (definește conținut sonor) și <source> (definește mai multe resurse media pentru <video> și <audio>).