Cum să folosești elementul audio în HTML — ghid complet

In this tutorial, you'll learn about Cum să folosești elementul audio în HTML. We cover key concepts, practical examples, and best practices.

Elementul <audio> permite redarea fișierelor audio direct în browser, fără pluginuri externe — perfect pentru podcasturi, muzică, notificări sonore și cărți audio.

The Problem

Redarea audio pe web era odată dependentă de Flash. Acum avem <audio>, dar mulți dezvoltatori nu specifică formate multiple, nu adaugă comenzi de redare sau nu oferă fallback pentru browsere vechi.

The Wrong Way

<audio src="melodie.mp3"></audio>

Probleme: Fără atribute controls, utilizatorul nu poate porni/opri redarea. Un singur format — nu toate browserele suportă MP3.

The Right Way

<audio controls preload="metadata">
  <source src="melodie.mp3" type="audio/mpeg">
  <source src="melodie.ogg" type="audio/ogg">
  <source src="melodie.wav" type="audio/wav">
  Browserul tău nu suportă elementul audio.
</audio>

Step-by-Step Fix

1. Folosește elementul <audio> cu atribute

<audio controls autoplay loop muted preload="auto">
  <source src="audio.mp3" type="audio/mpeg">
</audio>

2. Oferă formate multiple

Diferite browsere suportă formate diferite. Oferă cel puțin MP3 și OGG:

<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">

3. Adaugă fallback text

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Browserul tău nu suportă audio HTML5.
  <a href="audio.mp3">Descarcă fișierul audio</a>
</audio>

4. Controlează redarea cu JavaScript

const audio = document.querySelector('audio');
audio.play();   // pornește
audio.pause();  // oprește
audio.currentTime = 10; // sari la secunda 10
audio.volume = 0.5;     // volum 50%

Prevention Tips

• Adaugă controls — utilizatorul trebuie să poată controla redarea
• Specifică type pe <source> pentru încărcare mai rapidă
• Folosește preload="metadata" pentru a nu încărca tot fișierul la încărcarea paginii
• Nu folosi autoplay cu sunet — browserele moderne îl blochează

Common Mistakes

1. Fără controls — utilizatorul nu poate da play/pauză
2. Un singur format audio — Firefox nu suportă MP3 pe unele sisteme; adaugă OGG fallback
3. Autoplay cu sunet — browserele blochează redarea automată cu sunet până la interacțiunea utilizatorului
4. Fără tip MIME pe source — browserul nu știe formatul și poate eșua
5. Fallback lipsă — utilizatorii cu browsere foarte vechi nu văd nimic

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.