CodeGym /Kurslar /Frontend SELF AZ /Audio daxil etmək: <audio>

Audio daxil etmək: <audio>

Frontend SELF AZ
Səviyyə , Dərs
Mövcuddur

3.1 <audio> tag-ın əsasları

HTML5-də <audio> tag-ı veb-səhifəyə audio fayllar əlavə etmək üçün istifadə olunur. Bu element müxtəlif audio formatlarını dəstəkləyir və istifadəçiyə daxil olan idarəetmə elementləri təqdim edir: səsləndirmək, dayandırmaq və səs səviyyəsini tənzimləmək.

Ən sadə nümunə

<audio> tag-ı src atributu ilə istifadə olunur. src atributu audio fayla yol göstərir. Bundan əlavə, controls atributunu əlavə etmək olar ki, bu da səsləndirmə, pauza və səs tənzimləmə kimi standart idarəetmə düymələrini göstərir.

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

Çoxsaylı mənbələr ilə nümunə

Müxtəlif browserlərin dəstəyini təmin etmək üçün <source> tag-ı vasitəsilə bəzi audio mənbələrini qeyd etmək olar. Bu brauzerə dəstək verilən audio formatını seçməyə imkan yaradır.

HTML
    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        Sizin brauzer audio elementini dəstəkləmir.
      </audio>
    
  

<audio> tag-ın atributları

  • src: audio fayla yol göstərir.
  • controls: səsləndirilmənin idarəetmə elementlərini göstərir.
  • autoplay: səhifə yükləndikdən dərhal sonra avtomatik olaraq audio səsləndirir.
  • loop: audio tamamlandıqdan sonra təkrarlanır.
  • muted: səhifə yükləndikdə səsi söndürür.
  • preload: brauzerin audioyu necə yükləməsini təyin edir. Mümkün dəyərlər: none, metadata, auto

3.2 Atributların istifadəsi nümunələri

controls atributu

controls atributu audio oynatma idarəetmə elementlərini əlavə edir, məsələn, "Play", "Pause" düymələri və səs səviyyəsi tənzimləyicisi. Bu atribut audio elementinin daha interaktiv və istifadəçi rahat olmasını təmin edir.

Nümunə:

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

autoplay atributu

autoplay atributu audio faylın səhifə yükləndikdən dərhal sonra avtomatik oynanmasına imkan verir. Bu atributu ehtiyatla istifadə etmək lazımdır, çünki gözlənilməyən audio səsləri istifadəçiləri narahat edə bilər.

Nümunə:

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

loop atributu

loop atributu audio faylın sonsuz şəkildə təkrar oynanmasını tələb edir. Bu, fon musiqisi və ya təkrarlanan səs effektləri üçün faydalıdır.

Nümunə:

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

muted atributu

muted atributu audio faylın səhifə yükləndikdə səsini söndürür. Bu, audio faylın başlanğıcda səssiz oynanmasını təmin etmək üçün faydalı ola bilər, istifadəçi lazım olduqda səsi açmaq imkanı əldə edir.

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

preload atributu

preload atributu brauzerə audio faylın səhifə yüklənərkən necə yüklənməsi lazım olduğunu bildirir. Üç dəyər qəbul edə bilər:

  • none: brauzer audio əvvəlcədən yükləməməlidir
  • metadata: brauzer yalnız metadata yükləməlidir (məsələn, uzunluq, ölçü və s.)
  • auto: brauzer səhifə yükləndikdə tam audio faylı yükləməlidir
HTML
    
      <audio src="audiofile.mp3" preload="auto"></audio>
    
  

3.3 Dəstəklənən audio formatları

Brauzerlər arasında uyğunluğu təmin etmək üçün bir neçə audio formatından istifadə etmək tövsiyə olunur. Ən çox yayılmış formatlar MP3, OGG və WAV-dır. Gəlin onları daha ətraflı nəzərdən keçirək.

MP3 formatı

MP3 (MPEG-1 Audio Layer III) — ən populyar audio formatlarından biridir. O, əksər brauzerlər və cihazlar tərəfindən dəstəklənir. MP3 itgili sıxılma istifadə edir, bu isə fayl ölçüsünü kiçiltməyə imkan verir, səs keyfiyyətini isə kifayət qədər yüksək səviyyədə saxlayır.

Nümunə:

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

OGG formatı

OGG (Ogg Vorbis) — itgili sıxılma ilə açıq audio formatdır, əksər müasir brauzerlər tərəfindən dəstəklənir. Bu format yaxşı səs keyfiyyəti təqdim edir və çox vaxt MP3 üçün alternativ kimi istifadə olunur.

Nümunə:

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

WAV formatı

WAV (Waveform Audio File Format) — sıxılmamış audio formatıdır, yüksək səs keyfiyyəti təmin edir. Lakin WAV faylları MP3 və OGG ilə müqayisədə daha böyük ölçüyə malikdir, buna görə də onlar vebdə daha az istifadə olunur.

Nümunə:

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

3.4 Formatların Uyğunluğu

Bütün brauzerlər eyni audio formatlarını dəstəkləmir. Cross-browser uyğunluğu təmin etmək üçün MP3, OGG və WAV kimi bir neçə audio formatından istifadə etmək tövsiyə olunur.

Bir neçə formatın dəstəkləndiyi nümunə:

HTML
    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Sənin brauzerin audio elementini dəstəkləmir.
      </audio>
    
  

Keçidlilik

Keçidliliyi təmin etmək üçün brauzer <audio> elementi və ya audio fayllarını dəstəkləmədiyi hallarda yazılı alternativ təklif edilməlidir. Bu, açıq və bağlanış <audio> teqləri arasında mətn əlavə etməklə həyata keçirilə bilər.

Keçidliyin təmin edilməsi nümunəsi:

HTML
    
      <audio controls>
        <source src="audiofile.mp3" type="audio/mpeg">
        <source src="audiofile.ogg" type="audio/ogg">
        <source src="audiofile.wav" type="audio/wav">
        Sənin brauzerin audio elementini dəstəkləmir.
        Səs faylını <a href="audiofile.mp3">buradan</a> yükləyə bilərsən.
      </audio>
    
  

<audio> teqinin imkanlarını və onun API-sini başa düşmək daha interaktiv və keçidli veb səhifələrin yaradılmasına kömək edir.

Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION