<html>
<head>
<title>KodeKodeKode Player</title>
<!-- load library dari jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- customize tampilan player -->
<style>
.player-doom{
width: 300px;
height: 30px;
background-color: rgb(22, 21, 21);
border-radius: 6px;
}
.audioplayer{
display: inline-block;
float: left;
}
.player-rewind,.player-pref,.player-next,.player-shuffle{
display: inline-block;
float: left;
width: 21px;
height: 20px;
background-color: white;
margin-left: 10px;
margin-top: 5px;
}
</style>
<!-- JQuery untuk meload lagu dan set play, pause button-->
<script>
$(document).ready(function(){
var index = 0
//buat daftar object yang berisikan judul lagu yang akan di masukan ke playlist
//path disini adalah alamat lagu yang kita simpan
var trackList = [{path : "Catapult.mp3"},
{path : "R U Mine.mp3"},
{path : "Baby Im Yours.mp3"}]
var musicBox = $('#audioplayer').bind('play', function() {
//fungsi apabila tombol play di tekan
playing = true;
}).bind('pause', function() {
//fungsi apabila tombol pause di tekan
playing = false;
}).bind('ended', function() {
//fungsi shuffle apa blia lagu telah habis
var randomNum = Math.ceil(Math.random()*trackList.length) - 1;
$('#audioplayer')[0].pause();
$('#audioplayer').attr("src", trackList[randomNum].path);
$('#audioplayer')[0].play();
index = randomNum;
console.log(trackList[randomNum].path)
}).get(0)
//set apabila playlist di tekan, mengambil judul lagu yang di tekan, class "song"
$(".song").click(function(){
var text = $(this).text();
$('#audioplayer')[0].currentTime = 0;
$('#audioplayer').attr("src", text + '.mp3');
$('#audioplayer')[0].play();
})
})
</script>
</head>
<body>
<div class="player-doom">
<!-- audio player -->
<div class="audioplayer">
<audio id="audioplayer" name="audioplayer" controls>
<source src="Catapult.mp3" srctype="audio/mpeg">
browser kamu tidak support elemen audio
</audio>
</div>
</div>
<!-- playlist kita sediakan dengan class "song" maka
apabila di tekan jquery pergantian lagu berdasarkan judul akan terjadi-->
<div class="song">Catapult</div>
<div class="song">R U Mine</div>
</body>
</html>
No comments:
Post a Comment