Cara membuat Musik Player dengan HTML5
Hai pemirsa, kali ini saya akan membagikan tutorial cara membuat Musik Player dengan HTML5 tanpa harus javascrip tambahan.
Baiklah langsung saja kita mulai membuatnya. Yang perlu anda perhatikan yaitu anda harus menambahkan <!doctype html> di awal file html atau php anda.
Buatlah file index.php dan tambahkan kode berikut ini. Saya telah menambahkan komentar dalam kode agar anda lebih mudah memahami maksud dari kode tersebut.
<!doctype html>
<html>
<head>
<title>Sound - harviacode.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>
<!--buat progress bar-->
<div id="kotak" style="border: 1px solid black; height: 4px; width: 500px; margin-bottom: 10px">
<div id="progres" style="background: lightblue; height: 4px; width: 0px"></div>
</div>
<!--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();
}
function update() {
// update progress tiap 200 milidetik
setInterval(function () {
// harviacode.com
// cari posisi lagu dan durasi
var saatini = lagu.currentTime;
var durasi = lagu.duration;
// hitung persentase progress
var persen = (saatini / durasi) * 500;
// update progress bar
progres.style.width = parseInt(persen) + 'px';
}, 200);
}
</script>
</body>
</html>
Jalankan index.php 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.Terimakasih.
Sumber : HarviaCode
Komentar
Posting Komentar