Cara menggunakan audio link html

HTML element tagmerupakan tag HTML yang digunakan untuk menambahkan data audio ke dalam halaman HTML. HTML element tagakan mengenali dan memainkan file audio dalam bentuk suara atau musik. Secara default tagakan menampilkan pemutar audio yang dilengkapi dengan beberapa kontrol seperti tombol play, pause, volume, track bar, ataupun track position.

Setiap browser memiliki tampilan yang berbeda meskipun menggunakan HTML tagyang sama. Dukungan untuk memutar file audio pada media filenya setiap brwoser juga berbeda.

File audio file dengan dalam bentuk file .mp3 adalah file audio yang dapat dimainkan pada hampir semua browser. Kemudian disusul oleh audio file jenis .wav.

Penggunaan file audio dengan jenis .ogg dan .acc perlu dihindari karena hanya didukung oleh beberapa browser saja. Jadi jika anda ingin menambahkan file audio pada halaman HTML, sebaiknya menggunakan audio file jenis .mp3. Proses konversi file audio yang tidak didukung oleh browser ke dalam bentuk file .mp3 perlu dilakukan, jika file tersebut akan digunakan di dalam halaman HTML.

Anda dapat memasukkan beberapa file audio dengan format yang berbeda di dalam tagtepatnya di dalam tag. Browser akan memainkan file audio yang pertama secara default. Jika file audio pertama tidak didukung akan memainkan file audio yang kedua dan seterusnya. Namun jika file audio yang dimiliki hanya satu, dapat menggunakan atribut SRC dengan isi URL dimana file audio tersebut diletakkan.

Penggunaan Tag AUDIO

Hal yang perlu disiapkan pertama adalah file audio itu sendiri. File tersebut diletakkan sejajar dengan halaman HTML aktif. File audio tersebut dapat dipanggil dan dimainkan pada browser dengan menyertakan nama dan extensi file audio di dalam atribut SRC.

Berikut cara menggunakan audio player melalui tag:

1
2
3
4
5
6
7

   
   
   
   

Native audio playback is not supported.


Akan menghasilkan tampilan :

Native audio playback is not supported.

Atribut Khusus

HTML element tagmemiliki atribut yang dapat digunakan untuk menampilkan, memainkan dan menata pemutar fle pada halaman HTML.

Atribut khusus pada tag audio sangat berhubungan dengan audio player untuk memainkan file audio di dalam halaman HTML.

HTML

<audio src="/media/audio/kucing.mp3" controls></audio>
1 element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.

Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav.

Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).


Media FormatsTipe Media untuk HMTL audio element

FormatPenjelasanExtensi FileMIME TypesMP3MP3 adalah MPEG-1 atau MPEG-2 Audio Layer III, merupakan format audio paling terkenal yang menggunakan format lossy data compression..mp3audio/mp3Ogg VorbisFormat free, open standar yang menyuguhkan kualitas audio lebih baik dari MP3..oggaudio/oggWAVFormat original untuk raw digital audio. Format WAV tidak menggunakan metode kompresi file sehingga ukurannya lebih besar dari format lainnya..wavaudio/wav

AttributesAtribut HTML Tag <audio src="/media/audio/kucing.mp3" controls></audio>2

<audio src="/media/audio/kucing.mp3" controls></audio>
3

Menentukkan bahwa audio akan diputar secara otomatis (langsung ketika halaman telah dimuat).

Contoh:

<audio src="/media/audio/kucing.mp3" autoplay controls></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" controls></audio>
3

<audio src="/media/audio/kucing.mp3" controls></audio>
5

Menentukkan bahwa controls audio ditampilkan. Controls, dapat dilihat seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan sebagainya. Setiap browser memiliki tampilan controls yang berbeda.

Contoh:

<audio src="/media/audio/kucing.mp3" controls></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" controls></audio>
5

<audio src="/media/audio/kucing.mp3" controls></audio>
7

Digunakan untuk memutar ulang audio ketika selesai.

Contoh:

<audio src="/media/audio/kucing.mp3" loop></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" controls></audio>
7

<audio src="/media/audio/kucing.mp3" controls></audio>
9

Digunakan untuk membisukkan suara, artinya audio akan diputar tanpa suara pada awal inisial.

Contoh:

<audio src="/media/audio/kucing.mp3" muted></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" controls></audio>
9

<audio src="/media/audio/kucing.mp3" loop></audio>
1

Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.

Contoh:

<audio src="/media/audio/kucing.mp3" preload="metadata"></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" loop></audio>
2 |
<audio src="/media/audio/kucing.mp3" loop></audio>
3 |
<audio src="/media/audio/kucing.mp3" loop></audio>
4

<audio src="/media/audio/kucing.mp3" loop></audio>
5

<audio src="/media/audio/kucing.mp3" loop></audio>
5 menunjukkan source yaitu sumber file audio ditempatkan atau URL yang menunjukkan keberadaan audio file tersebut. Dapat pula menggunakan element <source> (lihat Contoh 2 dibawah).

Contoh:

<audio src="/media/audio/kucing.mp3"></audio>

Lihat hasilnya

Value:

<audio src="/media/audio/kucing.mp3" loop></audio>
2 |
<audio src="/media/audio/kucing.mp3" loop></audio>
3 |
<audio src="/media/audio/kucing.mp3" loop></audio>
4


Global AttributesAtribut Secara Global (Keseluruhan)

<audio> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event AttributesAtribut event (Peristiwa)

<audio> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

ExampleContoh HTML <audio src="/media/audio/kucing.mp3" controls></audio>2 element

Contoh 1:

HTML

<audio src="/media/audio/kucing.mp3" controls></audio>
1 dengan satu sumber file audio (.mp3) dan konten paragraf (<p>) yang akan muncul apabila browser tidak mendukung html audio.

HTML

<audio src="/media/audio/kucing.mp3" controls>
<p>
<strong>Download File: </strong>
<a href="/media/audio/kucing.mp3">"MP3"</a>
</p>
</audio>

Contoh 2:

HTML

<audio src="/media/audio/kucing.mp3" controls></audio>
1 element yang merujuk format audio lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.

HTML

<audio controls>
<source src="/media/audio/kucing.mp3"  type="audio/mpeg" >
<source src="/media/audio/kucing.ogg"  type="audio/ogg" >
<source src="/media/audio/kucing.wav"  type="audio/wav" >
<p> <strong>Download Audio:</strong>
Format:  <a href="/media/audio/kucing.mp3">"MP3"</a>
Format:  <a href="/media/audio/kucing.ogg">"Ogg"</a>
</p>
</audio>

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE

editor

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Contoh Cross browser audio</title>
  </head>
  <body>
    <h1>Contoh HTML audio element</h1>
    <p>Contoh HMTL audio element dengan beberapa format audio.</p>

    <audio controls preload="none">
      <source src="/media/audio/kucing.mp3"  type="audio/mpeg" >
      <source src="/media/audio/kucing.ogg"  type="audio/ogg" >
      <source src="/media/audio/kucing.wav"  type="audio/wav" >
      <p> <strong>Download Audio:</strong>
        Format:  <a href="/media/audio/kucing.mp3">"MP3"</a>
        Format:  <a href="/media/audio/kucing.ogg">"Ogg"</a>
      </p>
    </audio>
  </body>
</html>

Browser SupportStatus & Dukungan Browser

Berikut adalah keterangan mengenai dukungan (support) dari beberapa browser.

HTMLElementChromeSafariFirefoxOperaIE

<audio src="/media/audio/kucing.mp3" controls></audio>
2443.510.59
<audio src="/media/audio/kucing.mp3" muted></audio>
48.05.0.3 (+ quicktime)37?9
<audio src="/media/audio/kucing.mp3" muted></audio>
58.05.0.3 (+ quicktime)3.610.639
<audio src="/media/audio/kucing.mp3" muted></audio>
68.0?3.610.63?

Apa elemen HTML yang benar untuk memutar file audio?

Attributes.
autoplay. Menentukkan bahwa audio akan diputar secara otomatis (langsung ketika halaman telah dimuat). ... .
controls. Menentukkan bahwa controls audio ditampilkan. ... .
loop. Digunakan untuk memutar ulang audio ketika selesai. ... .
muted. ... .
preload. ... .

Tag apa yang digunakan untuk menyisipkan audio kedalam dokumen HTML?

Cara Menambahkan Audio di HTML Namun, kini HTML sudah punya tag sendiri yakni <audio> . Tag <audio> adalah tag untuk membuat audio player. Lalu kita bisa memberikan file audio yang akan diputar dengan tag <source> .