JavaScript Audio #7- Tombol Play Pada Playlist


Tutorial pemrograman audio javascript, cara membuat tombol play pada playlist

playlist.html

<html>
	<head>
		<title> Audio JavaScript | idrcorner.com </title>
		
		<style>
			.barisTrack{
				background: #cfc;
				font-family:Arial;
				height:50px;
			}
			
			.barisTrack:nth-child(even){
				background: #9f9;
			}
			
			.tombolPlay {
				width: 22px;
				height: 22px;
				display:block;
				float:left;
				opacity:0.8;
				margin : 14px 0px 0px 14px;
				border:none;
				cursor:pointer;
				outline:none;
				background: url('play.png');
			}
			
			.namaTrack {
				float:left;
				font-size:20px;
				margin : 12px 0px 0px 14px;
			}
		
		</style>
		
		<script>
			
			function _(id){
				return document.getElementById(id);
			}
			
			function mulaiApp(){
				var kotakMusik= _('kotakMusik');
				var musik=new Audio();
				var ext=".mp3";
				var nomor=1;
				var sedangPutar= false;
				var playTrack;
				
				var lagu={
					"Lagu1" : ["Jay Jay","Jay_Jay"],
					"Lagu2" : ["Airport", "Airport"],
					"Lagu3" : ["Easy Jam", "Easy_Jam"]
				}
				
				for(var lagunya in lagu){
					var barisTrack = document.createElement("div");
					var tombolPlay = document.createElement("button");
					var namaTrack = document.createElement("div");
					
					barisTrack.className="barisTrack";
					tombolPlay.className="tombolPlay";
					namaTrack.className="namaTrack";
					
					namaTrack.innerHTML=nomor + ". " + lagu[lagunya][0];
					tombolPlay.id= lagu[lagunya][1];
					
					tombolPlay.addEventListener('click', gantiTrack);
					
					barisTrack.appendChild(tombolPlay);
					barisTrack.appendChild(namaTrack);
					
					kotakMusik.appendChild(barisTrack);
					
					nomor++;
				}
				
				musik.addEventListener('ended', function(){
					_(playTrack).style.background="url(play.png)";
					playTrack="";
				})
				
				function gantiTrack(e){
					if(sedangPutar){
						if(playTrack!=e.target.id){
							sedangPutar=true;
							_(playTrack).style.background="url(play.png)";
							e.target.style.background="url(pause.png)";
							musik.src=e.target.id+ext;
							musik.play();
						}else{
							musik.pause();
							sedangPutar=false;
							e.target.style.background="url(play.png)";
						}
					}else{
						sedangPutar=true;
						e.target.style.background="url('pause.png')";
						if (playTrack!=e.target.id){
							musik.src=e.target.id+ext;
						}
						musik.play();
					}
					
					playTrack=e.target.id;
					 
				}
			}
			
			window.addEventListener('load', mulaiApp);
		</script>
		
	</head>
	<body>
		<div id="kotakMusik"> </div>
	</body>
</html>