Cara menggunakan audio background 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 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 (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)

Silahkan, lihat referensi mengenai HTML Global Attribute

Event AttributesAtribut event (Peristiwa)

Silahkan, lihat referensi mengenai HTML Events Attribute

ExampleContoh HTML 2 element

Contoh 1:

HTML

<audio src="/media/audio/kucing.mp3" controls>audio>
1 dengan satu sumber file audio (.mp3) dan konten paragraf (

) 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 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



<html>
  <head>
    <meta charset="utf-8">
    <title>Contoh Cross browser audiotitle>
  head>
  <body>
    <h1>Contoh HTML audio elementh1>
    <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?

Bagaimana cara memasukkan audio di HTML?

Cara Menambahkan Audio di HTML Tag Lalu kita bisa memberikan file audio yang akan diputar dengan tag . Perhatikan! Pada atribut src , kita menulis langsung nama file audio yang akan diputar.

Apa elemen HTML yang benar untuk memutar file audio?

Tag yang digunakan untuk menampilkan audio dalam HTML disebut dengan tag dalam penulisannya tag audio juga harus ditutup dengan penutup tag .
Atribut-atribut untuk Link Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target , title , rel , style , dan lain-lain.

Tag apa yang digunakan untuk membuat baris baru dalam HTML?

Tag
untuk Membuat Paragraf Fungsi utama tag
adalah untuk membuat baris baru.