Wstawienie audio: <audio>

3.1 Podstawy tagu <audio>

Tag <audio> w HTML5 służy do osadzania plików audio na stronie internetowej. Ten element obsługuje różne formaty audio i oferuje użytkownikowi wbudowane elementy sterujące do odtwarzania, pauzowania i regulacji głośności.

Najprostszy przykład

Tag <audio> jest używany z atrybutem src, który wskazuje ścieżkę do pliku audio. Można również dodać atrybut controls dla wyświetlenia standardowych elementów sterujących, takich jak przyciski odtwarzania, pauzy i regulacji głośności.

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Przykład z wieloma źródłami

Aby zapewnić wsparcie dla różnych przeglądarek, można określić kilka źródeł audio za pomocą tagu <source>. To pozwala przeglądarce wybrać obsługiwany format audio.

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Twoja przeglądarka nie obsługuje elementu audio.
      </audio>
    
  

Atrybuty tagu <audio>

• src: określa ścieżkę do pliku audio.
• controls: wyświetla elementy sterujące odtwarzaniem
• autoplay: automatycznie odtwarza audio po załadowaniu strony
• loop: powtarza odtwarzanie audio po zakończeniu
• muted: wycisza dźwięk po załadowaniu
• preload: określa, jak przeglądarka ma ładować audio. Możliwe wartości: none, metadata, auto

3.2 Przykłady użycia atrybutów

Atrybut controls

Atrybut controls dodaje standardowe elementy sterujące odtwarzaniem audio, takie jak przyciski "Play", "Pause" i regulator głośności. Ten atrybut czyni element audio bardziej interaktywnym i wygodnym dla użytkowników.

Przykład:

    
      <audio src="audiofile.mp3" controls></audio>
    
  

Atrybut autoplay

Atrybut autoplay sprawia, że plik audio automatycznie zaczyna odtwarzać się zaraz po załadowaniu strony. Używaj tego atrybutu ostrożnie, ponieważ niespodziewane odtwarzanie audio może drażnić użytkowników.

Przykład:

    
      <audio src="audiofile.mp3" autoplay></audio>
    
  

Atrybut loop

Atrybut loop wskazuje, że plik audio powinien być odtwarzany w nieskończonej pętli. Jest to przydatne dla muzyki w tle lub efektów dźwiękowych, które powinny się powtarzać.

Przykład:

    
      <audio src="audiofile.mp3" autoplay loop></audio>
    
  

Atrybut muted

Atrybut muted wycisza dźwięk pliku audio po załadowaniu. Może być przydatny, jeśli chcesz, aby audio odtwarzało się domyślnie bez dźwięku, a użytkownik mógł włączyć dźwięk w razie potrzeby.

    
      <audio src="audiofile.mp3" muted></audio>
    
  

Atrybut preload

Atrybut preload określa przeglądarce, jak ma ładować plik audio podczas ładowania strony. Może przyjmować jedno z trzech wartości:

• none: przeglądarka nie powinna wstępnie ładować audio
• metadata: przeglądarka powinna ładować tylko metadane (czas trwania, rozmiar itp.)
• auto: przeglądarka powinna całkowicie załadować audio podczas ładowania strony

    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Obsługiwane formaty audio

Aby zapewnić zgodność z różnymi przeglądarkami, zaleca się użycie kilku formatów audio. Najbardziej powszechne formaty to MP3, OGG i WAV. Omówimy je bardziej szczegółowo.

Format MP3

MP3 (MPEG-1 Audio Layer III) — jeden z najbardziej popularnych formatów audio. Obsługiwany jest przez większość przeglądarek i urządzeń. MP3 używa kompresji stratnej, co pozwala zmniejszyć rozmiar pliku przy zachowaniu dość wysokiej jakości dźwięku.

Przykład:

    
      <audio src="audiofile.mp3" type="audio/mpeg"></audio>
    
  

Format OGG

OGG (Ogg Vorbis) — otwarty format kompresji audio stratnej, obsługiwany przez większość nowoczesnych przeglądarek. Ten format zapewnia dobrą jakość dźwięku i często jest używany jako alternatywa dla MP3.

Przykład:

    
      <audio src="audiofile.ogg" type="audio/ogg"></audio>
    
  

Format WAV

WAV (Waveform Audio File Format) — format audio bez kompresji, który zapewnia wysoką jakość dźwięku. Jednakże pliki WAV mają większy rozmiar w porównaniu do MP3 i OGG, dlatego są rzadziej używane w internecie.

Przykład:

    
      <audio src="audiofile.wav" type="audio/wav"></audio>
    
  

3.4 Zgodność formatów

Nie wszystkie przeglądarki obsługują te same formaty audio. Aby zapewnić wsparcie dla różnych przeglądarek, zaleca się użycie kilku formatów audio, takich jak MP3, OGG i WAV.

Przykład z obsługą kilku formatów:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Twoja przeglądarka nie obsługuje elementu audio.
      </audio>
    
  

Dostępność

Aby zapewnić dostępność, powinno się dostarczyć tekstową alternatywę na wypadek, gdyby przeglądarka nie obsługiwała elementu <audio> lub plików audio. Można to zrobić za pomocą tekstu między otwierającym a zamykającym tagiem <audio>.

Przykład zapewnienia dostępności:

    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Twoja przeglądarka nie obsługuje elementu audio.
        Możesz pobrać plik audio <a href="audiofile.mp3">tutaj</a>.
      </audio>
    
  

Zrozumienie możliwości tagu <audio> i jego API pomaga tworzyć bardziej interaktywne i dostępne strony internetowe.