Menyajikan Audio dalam tampilan Web - Catatan Faiq Hisyam Marwan

Contact Form

 

Menyajikan Audio dalam tampilan Web

1.) Menyajikan audio dalam tampilan web
File  audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>.  Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web.
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>   
</body>
</html>

Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "house.mp3" dan "house.ogg".

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.
Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :
Atribut
Sintaks
Keterangan
<audio autoplay="autoplay">
memulai audio secara otomatis pada web terbuka
<audio controls = "controls" >
menampilkan kontrol seperti volume, audio, dan juga tombol untuk memulai/pause
<audio loop="loop">
mengulang audio kembali setelah pemutaran awal selesai
<audio muted =”muted” >
mematikan suara
<audio preload="preload">
memuat ulang audio ketika halaman dimuat ulang
<audio>
source src="/usr/home/damay/house.ogg"
</audio>
Value dari src  adalah file audio tersebut berserta lokasi filenya bisa juga mengarahkan suatu alamat url/web audio tertentu


Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop  . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play .
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls = "controls" autoplay="autoplay" loop="loop" >
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”. 

Total comment

Author

Faiq Hisyam Marwan

0   comments

Cancel Reply