Membuat Audio Player dengan HTML 5 (update)
Oke, Mungkin pada halaman sebelumnya anda telah melihat tutorial ini, Namun Pasti anda bertanya kenapa ada tutorial updatenya, Ada cara yg sedikit berbeda dengan sebelum nya.
anda bisa menggunakan element progress untuk mengatur progress barnya. di HTML5 juga disediakan element progress. Hanya saja untuk element kita perlu menuliskan css yang berbeda2 untuk masing2 mesin browser. Untuk mengatur besarnya progress anda bisa menggunakan addEventListener timeupdate. Berikut ini adalah kode anda bila menggunakan element progress dan addEventListener.
<!doctype html>
<html>
<head>
<title>Sound - Agusciialex.blogspot.com</title>
</head>
<body>
<h2>HTML 5 Sound</h2>
<p>Bawalah Cintaku Cover.mp3 - Zony Hartawan</p>
<p><a href="http://roomsession.com/bawalah-cintaku-cover/">http://roomsession.com/bawalah-cintaku-cover/</a></p>
<style>
/*css buat progress*/
progress{
display: block;
margin: 10px 0px;
width: 500px;
height: 5px;
border-radius: 0px;
border:none;
}
</style>
<!--buat progress bar-->
<progress id="progres" max="100" value="0"></progress>
<!--tambahkan element audio-->
<audio id="bawalahcintaku" src="bawalahcintaku.mp3"></audio>
<!--tambahkan tombol-->
<button id="tombol_play" onclick="play()">Play</button>
<button id="tombol_pause" onclick="pause()">Pause</button>
<button id="tombol_stop" onclick="stop()">Stop</button>
<script>
// definisikan masing masing id
var lagu = document.getElementById('bawalahcintaku');
var tombol_play = document.getElementById('tombol_play');
var tombol_pause = document.getElementById('tombol_pause');
var tombol_stop = document.getElementById('tombol_stop');
var progres = document.getElementById('progres');
// set tombol
tombol_play.disabled = false;
tombol_pause.disabled = true;
tombol_stop.disabled = true;
function play() {
// harviacode.com
lagu.play();
tombol_play.disabled = true;
tombol_pause.disabled = false;
tombol_stop.disabled = false;
// update();
}
function pause() {
// harviacode.com
lagu.pause();
tombol_play.disabled = false;
tombol_pause.disabled = true;
tombol_stop.disabled = false;
// update();
}
function stop() {
// harviacode.com
lagu.pause();
lagu.currentTime = 0;
tombol_play.disabled = false;
tombol_pause.disabled = true;
tombol_stop.disabled = true;
// update();
}
lagu.addEventListener("timeupdate", updateProgress, false);
function updateProgress() {
var persen = parseInt((100 / lagu.duration) * lagu.currentTime);
progres.value = persen;
}
</script>
</body>
</html>
Simpan dan Jalankan index.php atau index.html menggunakan browser. dan hasilnya akan seperti link demo di atas. Sangat mudah bukan. Audio player di atas sangat sederhana, silahkan dikreasikan sendiri dengan CSS, gambar dan lain lain agar lebih menarik.
Sumber HarviaCode
Komentar
Posting Komentar