Oke teman teman kembali lagi di blog IT Programmer Tegal. Kali ini teman saya Fabi.ID akan memberikan materi tentang bagaimana cara menambahkan Audio pada HTML5. langsung saja pada pembahasan materinya.
Pertama yaitu kita mengenal Elemen Audio, apa itu Elemen Audio?
Elemen audio merupakan elemen baru keluaran HTML5 yang digunakan untuk memasukkan audio seperti lagu ke dalam HTML yang dapat diputar. Penggunaan elemen audio ditandai dengan pasangan tag <audio>……</audio>. Diantara pasangan tag <audio> terdapat elemen source dan dapat ditambahkan teks yang akan tampil jika browser tidak mendukung elemen audio.
Pada elemen audio ini juga terdapat dari beberapa atribut yaitu :
1. autoplay – Menentukan bahwa audio akan diputar langsung ketika halaman sudah diload secara otomatis.
2. controls – Menunjukkan bahwa controls audio (setiap browser memiliki tampilan controls audio yang berbeda – beda) ditampilkan seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan lain sebagainya.
3. muted – Digunakan untuk mematikan atau membisukan suara yang berarti audio akan diputar tanpa suara pada awal inisial.
4. loop – Digunakan untuk memutar ulang audio yang sudah selesai diputar.
5. src - URL lokasi file audio (Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.)
6. preload - auto, none, metada (Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.)
Oke sekarang kita belajar tentang atribut pada elemen audio.
1. Attribut src dan controls. Berikut contoh code penggunaan atribut src dan controls di HTML :
Penggunaan atribut controls menghasilkan controls audio yang tampilannya berbeda – beda untuk setiap browser. Saya sangat menyarankan Anda menambahkan atribut ini. Lihat perbedaannya pada gambar dibawah ini :
Note: Pada atribut src, saya hanya menuliskan honestly.mp3 saja dikarenakan lokasi file audio tersebut satu folder dengan file HTMLnya.
Jika Anda hanya menggunakan atribut src langsung pada tag <audio> maka hanya akan ada satu format audio yang digunakan. Perlu diingat bahwa tidak semua format didukung oleh semua browser.
Agar audio tersebut tetap dapat didukung oleh browser yang berbeda-beda maka digunakan format audio yang lebih dari satu dengan menggunakan elemen source yang ditandai dengan penggunaan tag <source>. Adapun atribut yang terdapat pada elemen source yang berhubungan dengan elemen audio yaitu:
Fungsi src - URL lokasi file audio Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
Type MIME_type Menentukan MIME type dari audio tersebut.
Berikut tabel dari MIME type :
•Format File Mp3 : audio/mpeg
•Wav : audio/wav
•Ogg : audio/ogg
Berikut contoh penulisan dan penggunaanya di HTML :
Ketika file HTML dijalankan, hasilnya akan seperti ini :
Jika kode HTML diatas diatas dijalankan, hanya satu audio saja yang dimuat, bukan ketiga-tiganya, dikarenakan atribut type ini hanya digunakan untuk menentukan tipe MIME suatu file, bisa gambar, audio, video dan lain sebagainya.
Sebelum tag penutup <audio> , saya menambahkan kalimat “Gagal memutar lagu” yang akan tampil ketika browser yang Anda gunakan tidak mendukung elemen audio. Tampilannya di browser seperti ini (sebagai contoh saya menggunakan browser Safari 5.7.1) .
2. Attribut Autoplay
Seperti yang sudah dijelaskan sebelumnya, atribut autoplay digunakan agar audio langsung diputar saat halaman web selesai dimuat atau dapat disebut sebagai inline audio. Bagi Anda yang mengelola website musik, fanpage atau yang lainnya, penggunaan atribut ini tentunya akan menghidupkan suasana.
Berikut contoh kode penggunaannya di HTML :
Tampilan dari kode diatas setelah dijalankan di browser :
3. Atrribut Loop
Fungsi atribut ini digunakan untuk memutar lagu secara berulang. Jadi selama pengunjung masih membuka halaman web tersebut maka lagunya akan selalu diputar berulang – ulang (tidak hanya sekali putar saja).
Berikut contoh kode penggunaannya di HTML :
tampilan kode diatas jika dijalankan seperti dibawah ini:
Jika kode HTML diatas dijalankan, maka lagu akan terus diputar terus-menerus sampai pengunjung menutup halaman tersebut.
Ok sekian dulu materi kali ini dari saya, jika ada kata" yang tidak kalian mengerti silahkan tinggalkan komentar atau hubungi no WA. Semoga bermanfaat.
Pertama yaitu kita mengenal Elemen Audio, apa itu Elemen Audio?
Elemen audio merupakan elemen baru keluaran HTML5 yang digunakan untuk memasukkan audio seperti lagu ke dalam HTML yang dapat diputar. Penggunaan elemen audio ditandai dengan pasangan tag <audio>……</audio>. Diantara pasangan tag <audio> terdapat elemen source dan dapat ditambahkan teks yang akan tampil jika browser tidak mendukung elemen audio.
Pada elemen audio ini juga terdapat dari beberapa atribut yaitu :
1. autoplay – Menentukan bahwa audio akan diputar langsung ketika halaman sudah diload secara otomatis.
2. controls – Menunjukkan bahwa controls audio (setiap browser memiliki tampilan controls audio yang berbeda – beda) ditampilkan seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan lain sebagainya.
3. muted – Digunakan untuk mematikan atau membisukan suara yang berarti audio akan diputar tanpa suara pada awal inisial.
4. loop – Digunakan untuk memutar ulang audio yang sudah selesai diputar.
5. src - URL lokasi file audio (Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.)
6. preload - auto, none, metada (Menunjukkan seberapa penting audio harus diload ketika halaman web dimuat.)
Oke sekarang kita belajar tentang atribut pada elemen audio.
1. Attribut src dan controls. Berikut contoh code penggunaan atribut src dan controls di HTML :
Penggunaan atribut controls menghasilkan controls audio yang tampilannya berbeda – beda untuk setiap browser. Saya sangat menyarankan Anda menambahkan atribut ini. Lihat perbedaannya pada gambar dibawah ini :
Note: Pada atribut src, saya hanya menuliskan honestly.mp3 saja dikarenakan lokasi file audio tersebut satu folder dengan file HTMLnya.
Jika Anda hanya menggunakan atribut src langsung pada tag <audio> maka hanya akan ada satu format audio yang digunakan. Perlu diingat bahwa tidak semua format didukung oleh semua browser.
Agar audio tersebut tetap dapat didukung oleh browser yang berbeda-beda maka digunakan format audio yang lebih dari satu dengan menggunakan elemen source yang ditandai dengan penggunaan tag <source>. Adapun atribut yang terdapat pada elemen source yang berhubungan dengan elemen audio yaitu:
Fungsi src - URL lokasi file audio Menunjukkan lokasi penyimpanan file audio atau URL yang menunjukkan keberadaan audio file tersebut.
Type MIME_type Menentukan MIME type dari audio tersebut.
Berikut tabel dari MIME type :
•Format File Mp3 : audio/mpeg
•Wav : audio/wav
•Ogg : audio/ogg
Berikut contoh penulisan dan penggunaanya di HTML :
Ketika file HTML dijalankan, hasilnya akan seperti ini :
Jika kode HTML diatas diatas dijalankan, hanya satu audio saja yang dimuat, bukan ketiga-tiganya, dikarenakan atribut type ini hanya digunakan untuk menentukan tipe MIME suatu file, bisa gambar, audio, video dan lain sebagainya.
Sebelum tag penutup <audio> , saya menambahkan kalimat “Gagal memutar lagu” yang akan tampil ketika browser yang Anda gunakan tidak mendukung elemen audio. Tampilannya di browser seperti ini (sebagai contoh saya menggunakan browser Safari 5.7.1) .
2. Attribut Autoplay
Seperti yang sudah dijelaskan sebelumnya, atribut autoplay digunakan agar audio langsung diputar saat halaman web selesai dimuat atau dapat disebut sebagai inline audio. Bagi Anda yang mengelola website musik, fanpage atau yang lainnya, penggunaan atribut ini tentunya akan menghidupkan suasana.
Berikut contoh kode penggunaannya di HTML :
3. Atrribut Loop
Fungsi atribut ini digunakan untuk memutar lagu secara berulang. Jadi selama pengunjung masih membuka halaman web tersebut maka lagunya akan selalu diputar berulang – ulang (tidak hanya sekali putar saja).
Berikut contoh kode penggunaannya di HTML :
Jika kode HTML diatas dijalankan, maka lagu akan terus diputar terus-menerus sampai pengunjung menutup halaman tersebut.
Ok sekian dulu materi kali ini dari saya, jika ada kata" yang tidak kalian mengerti silahkan tinggalkan komentar atau hubungi no WA. Semoga bermanfaat.
0 Comments