• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Shoutcast Web Player dengan jPlayer

Last Updated on 29 June 2015 By tommy Leave a Comment

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
shoutcast player free

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

Tulisan menarik lainnya

  • Membuat Perulangan dengan Satu Kali Looping di PHP

    Hasil yang diinginkan # # # # # # # # # # # #…

  • Membuat Pemutar Musik MP3 dengan Delphi

    Tutorial ini menggunakan Delphi XE, dan penggunaan di Delphi 7 atau versi lainnya seharusnya tidak…

  • Membuat Kalender dengan PHP

    Buat sebuah file dengan nama kalender.php lalu tambahkan script dibawah ini Minggu Senin Selasa Rabu…

  • Membuat Streaming Radio Online dengan Icecast Debian 7

    Icecast adalah salah satu alternative untuk shoutcast, cara instalasinya mudah dan cepat ;). Sebelum icecast…

Filed Under: Internet Tagged With: Flash, shoutcast

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Solusi AWS CLI SSL VALIDATION failed
  • Monitoring Kubernetes Cluster dengan Prometheus
  • Solusi Playwright Firefox version `GLIBCXX_3.4.30′ not found (required by /lib64/libicuuc.so.69)
  • Cara Upgrade Fedora 35 ke Fedora 36
  • Ekstrak Gzip File dan Ambil Total dengan Python

Komentar

  • Xpud on Script PHP untuk Mengambil History Lagu Shoutcast v2.5
  • Jrenx on Membuat Bot Telegram Sederhana dengan PHP
  • Sella on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rian on Mengganti Halaman Error Laravel
  • Suchie on Kemana Menghilangnya Saldo BCA 50 ribu

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1m views
  • Password Terbaru ZTE F609 Indihome 781.5k views
  • Password Superadmin Huawei HG8245A 294.5k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 267.9k views
  • Cara Setting Wireless ZTE F609 Indihome 251k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 165.4k views
  • Akses UseeTV Indihome via Wireless ZTE F609 154.8k views
  • Cara Reset Password ZTE F609 Indihome 146k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 135.4k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 109k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java