Membuat Shoutcast Web Player dengan jPlayer

Dengan menggunakan jPlayer, semakin banyak browser yang di support, karena jPlayer bisa dijalankan di browser yang support HTML 5, dan baik di browser yang menggunakan flash maupun yang ga menggunakan flash.

Copy paste code dibawah ini dan simpan sebagai shoutcast_player.html

<!DOCTYPE html>
<html>
<head>
	<title>Radio Online &raquo; Jaranguda.com</title>
</head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
 
	$("#radio_karo").jPlayer({
		ready: function(event) {
			$(this).jPlayer("setMedia", {
				title: "Radio Karo Online",
				mp3: "http://radio.karo.or.id:2012/;stream/1"
			});
		},
		swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.swf",
		supplied: "mp3",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});
});   
</script>
<body>
<div id="radio_karo" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-single">
		<div class="jp-gui jp-interface">
			<div class="jp-controls">
				<button class="jp-play" role="button" tabindex="0">play</button>
				<button class="jp-stop" role="button" tabindex="0">stop</button>
			</div>
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
			<div class="jp-time-holder">
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-toggles">
					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
				</div>
			</div>
		</div>
		<div class="jp-details">
			<div class="jp-title" aria-label="title">&nbsp;</div>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>
 
</body>
</html>

Dari contoh diatas yang perlu di ubah adalah

// Nama Radio Online
title: "Radio Karo Online",
// Link shoutcast 
mp3: "http://radio.karo.or.id:2012/;stream/1"

dibagian mp3, formatnya adalah URL:PORT, contoh diatas saya menggunakan port 2012.

Tampilan shoutcast player diatas

Script daitas baru di cobain pada shoutcast 1.9.8 :), jadi shoutcast 2 belum tau compatible atau ngga.

Tulisan menarik lainnya

Leave a comment