Cara Menambahkan Audio pada HTML

-

Cara Menambahkan Audio di HTML

Sebelum adanya HTML 5, audio di HTML ditambahkan dengan program eksternal seperti flash player.

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

Tag audio di HTML

Contoh: 📄 contoh-audio.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Audio di HTML</title>
</head>
<body>
  <h1>Contoh Audio di Web</h1>
  <audio controls>
    <source src="Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
  </audio>
</body>
</html>

File audionya bisa kamu download di: 🎵 Ngoni.mp3

Hasilnya:

Contoh audio di HTML

Perhatikan!

Pada atribut src, kita menulis langsung nama file audio yang akan diputar. Ini karena kita menaruh file tersebut dalam satu folder yang sama dengan file HTML.

File audio dan HTML

Jika file audio tersimpan di folder yang berbeda, maka harus ditulis alamat path menuju folder tersebut.

Misalkan, saya menaruhnya di dalam folder 📁 audio,

File audio dan HTML

maka atribut src bisa diisi seperti ini:

<audio controls>
    <source src="audio/Ngoni.mp3" type="audio/mpeg">
    Browsermu tidak mendukung tag audio, upgrade donk!
</audio>

…dan jiga file audionya tersimpan di website yang berbeda, maka kita harus mengisinya dengan alamat URL.

Format File Audio yang didukung

Audio player di HTML tidak mendukung semua jenis format file audio. Berikut ini daftar format file audio yang bisa diputar di HTML. 

FormatContainerMIME type
PCMWAVaudio/wav
MP3MP3audio/mpeg
AACMP4audio/mp4
AACAACaudio/aac
AACAACaudio/aacp
VorbisOggaudio/ogg
VorbisWebMaudio/webm
OpusOggaudio/ogg
OpusWebMaudio/webm
FLACFLACaudio/flac
FLACOggaudio/ogg

Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas tinggi dan ukuran filenya relatif lebih besar.

Atribut untuk Audio

Tag <audio> punya beberapa atribut yang sering digunakan:

1. controls

Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti tombol play, pause, stop, scroll, dan volume).

2. autoplay

Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai yang bisa diberikan pada atribut ini adalah true dan false.

Nilai true artinya kita akan memutar audio secara otomatis, dan false artinya audio tidak akan diputar secara otomatis.

3. loop

Atribut loop berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat one. Nilai yang bisa diberikan adalah true dan false.

4. muted

Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa diberikan adalah true dan false.

Audio Sebagai Background

Audio kadang sering digunakan sebagai background. Biasanya menggunakan musik.

Tujuan menambahkan background agar menambah kesan tertentu pada web. Misalkan, ingin membuat pengunjung merasa santai.. maka kita bisa memutar audio musik yang santai.

Cara membuat musk sebagai background adalah dengan menambahkan atribut autoplay, loop, dan menghilangkan kontrol (hidden).

Komentar

Posting Komentar

Postingan populer dari blog ini

IP

-
Gambar
  Internet Protocol (IP) Sebuah IP Address adalah produk yang menarik dari teknologi komputer modern yang dirancang untuk memungkinkan satu komputer (atau perangkat digital lainnya) untuk bisa berkomunikasi dengan yang lain melalui Internet. IP Address akan memungkinkan lokasi harfiah dari miliaran perangkat digital yang terhubung ke Internet untuk menunjuk dan membedakan dari perangkat lain. Dalam arti yang nyata sama dengan ketika seseorang perlu alamat anda untuk mengirimkan surat, sehingga komputer remote memerlukan alamat IP Anda untuk berkomunikasi dengan komputer Anda. “IP” singkatan dari Internet Protocol, sehingga alamat IP adalah alamat Internet Protocol. Apa artinya? Internet Protocol adalah seperangkat aturan yang mengatur aktivitas internet dan bisa memfasilitasi untuk penyelesaian berbagai tindakan di World Wide Web. Oleh karena itu alamat Internet Protocol merupakan bagian dari sistematis yang diletakkan pada jaringan yang saling berhubungan yang mengatur k...
Baca selengkapnya

Scala

-
Pengertian   Scala merupakan bahasa pemrograman yang menggabungkan paradigma pemrograman yang berorientasi pada objek dengan fungsional. Bahasa pemrograman ini termasuk dalam bahasa pemrograman berorientasi objek murni yang dalam arti bahwa setiap nilai adalah objek. Serta termasuk bahasa pemrograman fungsional yang artinya setiap fungsi adalah nilai. Sama halnya seperti Java, Scala di tulis untuk dapat dijalankan pada JVM (Java Virtual Machine). Bahasa pemrograman lainnya yang dapat berjalan di JVM seperti Kotlin dan Ceylon. Semua bahasa ini dibuat dengan tujuan menyederhanakan atau membuat Java yang lebih baik. Meskipun dijalankan pada JVM, nyatanya Scala bukanlah perpanjangan dari Java. Ketika proses kompilasi (penyusunan) kode Scala di terjemahkan ke dalam betycode Java dan berjalan di JVM. Scala dapan digunakan dalam berbagai lingkungan, mulai dari script yang sederhana hingga sistem yang besar atau rumit sekalipun dalam dunia pemrograman ini disebut dengan istilah general pur...
Baca selengkapnya

Variabel Dan Tipe Data

-
Gambar
    Memahami Variabel dan Tipe Data dalam Javascript Pengertian Variabel Variabel adalah sebuah nama yang mewakili sebuah nilai. Variabel bisa diisi dengan berbagai macam nilai seperti  string  (teks),  number  (angka), objek, array, dan sebagainya. Cara Membuat Variabel Di JavaScript Cara membuat variabel yang umum digunakan di javascript adalah menggunakan kata kunci  var  lalu diikuti dengan nama variabel dan nilainya. Contoh: var title = "Belajar Pemrograman Javascript" ; Pada contoh di atas, kita membuat variabel bernama  title  dengan nilai berupa teks  (string) :  "Belajar Pemrograman Javascript" . Perhatikan! Pada contoh di atas, kita menggunakan huruf bersar atau kapital untuk nama variabel yang terdiri dari dua suku kata. Kenapa tidak menggunakan  underscore ? Pada Javascript kita dianjurkan menggunakan camelCase dalam penamaan. Boleh-boleh saja menggunakan  snake case  atau  underscore. Hal ters...
Baca selengkapnya