Membuat MP3 Player dengan Bootstrap

by · June 9, 2015

Hai All ketemu lagi sama saya portgastea, tutorial kali ini adalah membuat mp3 player mengunakan tampilan boostrap.

Ok langsung saja kita buat file folder baru di htdocs dengan nama terserah anda, terus download boostrap dan copy folder assets ke directory yang baru anda bikin, setelah itu buat css dulu dengan nama bootsrap-playermusic.css dengan script seperti dibawah ini dan simpan di diretory assets/css.

.playa input[type=range] {
    -webkit-appearance:none;
    -moz-apperance:none;
    background-color:#bbb;
	border: 1px solid #000;
	height:.5em;
	border-radius:.5em;
    width:70%;
	margin:-2px;
	padding:0 !important;
	line-height:0;
}
.playa input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    -moz-apperance:none;
	z-index:3;
	height:1em;
	width:1em;
	border-radius:1em;
	border:1px solid #aaa;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1));
}
 
.playa {
	/*margin:0;*/
}
 
.playa  .thumbnail  {
	width:25%;
	padding:1.5%;
}
 
.playa  .btn-group  {
	text-align:center;
}
 
@media (max-width: 9px) and (min-width: 768px){
	.span4 .playa, .playa.span4{
		padding:0;
	}
}
@media (min-width: 500px){
	.playa .btn-group .btn {
		padding:4px 3px;
		margin:auto;
		display:inline-block;
		float:none;
	}
	.playa .btn-group .span1 {
		width:8%;
	}
	.playa .btn-group .span2 {
		width:16%;
	}
	.playa .btn-group .span3 {
		width:25%;
	}
	.playa .btn-group .span4{
		width:33%;
	}
	.playa.span2 .btn-group .btn, .playa.span1 .btn-group .btn, .span2 .playa .btn-group .btn, .span1 .playa .btn-group .btn{
		width:100%;
		display:block;
	}
	.span4.playa, .span3 .playa, .span2 .playa, .span1 .playa, .playa.span4, .playa.span3, .playa.span2, .playa.span1{
		padding:0;
		overflow:hidden;
	}
}

Ok selanjutnya kita buat file js nya dengan nama bootstrap-playermusic.js, masukan script dibawah ini dan copy directory assets/js

(function($) {
	'use strict';
	$('audio[controls]').before(function(){
		var song = this;
			song.controls=false;
		var player_box = document.createElement('div');
			$(player_box).addClass($(song).attr('class') + ' well container-fluid playa');
		var data_sec = document.createElement('section');
			$(data_sec).addClass('collapse');
		var toggle_holder = document.createElement('div');
			$(toggle_holder).addClass('btn-group row-fluid');
		var data_toggle = document.createElement('a');
			$(data_toggle).html('<i class="icon-reorder"></i>');
			$(data_toggle).addClass('btn btn-info');
			$(data_toggle).attr('style', 'opacity:0.3');
			$(data_toggle).click(function (){$(data_sec).collapse('toggle');});
			$(data_toggle).attr('title', 'Lihat');
			$(data_toggle).tooltip({'container': 'body', 'placement': 'top', 'html': true});
			$(toggle_holder).append(data_toggle);
		var data_table = document.createElement('table');
			$(data_table).addClass('table table-condensed');
		var player = document.createElement('section');
			$(player).addClass('btn-group row-fluid');
		var load_error = function(){
			console.log('error');
			$(player_box).find('.btn btn-danger').addClass('disabled');
			$(player_box).find('input[type="range"]').hide();
			$(player_box).find('.icon-spin').text('Error');
			$(player_box).find('.icon-spin').parent().attr('title', 'Audio Eror untuk loadiang.');
			$(player_box).find('.icon-spin').parent().tooltip('fixTitle');
			$(player_box).find('.icon-spin').removeClass('icon-spinner icon-spin');
		};
		var addPlay = function() {
			var play = document.createElement('button');
				$(play).addClass('btn btn-info disabled span1');
			play.setPlayState = function(toggle){
					$(play).removeClass('disabled');
				if (toggle === 'play') {
					$(play).html('<i class="icon-play"></i>');
					$(play).click(function () {
						song.play();
					});
				}
				if (toggle === 'pause') {
					$(play).html('<i class="icon-pause"></i>');
					$(play).click(function () {
						song.pause();
					});
				}
			};
			$(song).on('play', function(){play.setPlayState('pause');});
			$(song).on('canplay', function(){play.setPlayState('play');});
			$(song).on('pause', function(){play.setPlayState('play');});
			var timeout = 0;
			var loadCheck = setInterval(function() {
				if(isNaN(song.duration) === false){
					play.setPlayState('play');
					clearInterval(loadCheck);
					return true;
				}
				if(song.networkState === 3 || timeout === 75){
					load_error();
					clearInterval(loadCheck);
					return false;
				}
				timeout++;
			}, 50);
 
			$(player).append(play);
		};
		var addSeek = function() {
			var seek = document.createElement('input');
				$(seek).attr({
					'type': 'range',
					'min': 0,
					'value': 0,
					'class': 'seek'
				});
			seek.progress = function () {
				var bg = 'rgba(223, 240, 216, 1) 0%';
				bg += ', rgba(223, 240, 216, 1) ' + ((song.currentTime/song.duration) * 100) + '%';
				bg += ', rgba(223, 240, 216, 0) ' + ((song.currentTime/song.duration) * 100) + '%';
				for (var i=0; i<song.buffered.length; i++){
					if (song.buffered.end(i) > song.currentTime && isNaN(song.buffered.end(i)) === false && isNaN(song.buffered.start(i)) === false){
						var bufferedstart;
						var bufferedend;
						if (song.buffered.end(i) < song.duration) {
							bufferedend = ((song.buffered.end(i)/song.duration) * 100);
						}
						else {
							bufferedend = 100;
						}
						if (song.buffered.start(i) > song.currentTime){
							bufferedstart = ((song.buffered.start(i)/song.duration) * 100);
						}
						else {
							bufferedstart = ((song.currentTime/song.duration) * 100);
						}
						bg += ', rgba(217, 237, 247, 0) ' + bufferedstart + '%';
						bg += ', rgba(217, 237, 247, 1) ' + bufferedstart + '%';
						bg += ', rgba(217, 237, 247, 1) ' + bufferedend + '%';
						bg += ', rgba(217, 237, 247, 0) ' + bufferedend + '%';
					}						
				}
				$(seek).css('background', '-webkit-linear-gradient(left, ' + bg + ')');
				//These may be re-enabled when/if other browsers support the background like webkit
				//$(seek).css('background','-o-linear-gradient(left,  ' + bg + ')');
				//$(seek).css('background','-moz-linear-gradient(left,  ' + bg + ')');
				//$(seek).css('background','-ms-linear-gradient(left,  ' + bg + ')');
				//$(seek).css('background','linear-gradient(to right,  ' + bg + ')');
				$(seek).css('background-color', '#ddd');
			};
			seek.set = function () {
				$(seek).val(song.currentTime);
				seek.progress();
			};
			seek.slide = function () {
				song.currentTime = $(seek).val();
				seek.progress();
			};
			seek.init = function () {
				$(seek).attr({
					'max': song.duration,
					'step': song.duration / 100
				});
				seek.set();
			};
			seek.reset = function () {
				$(seek).val(0);
				song.currentTime = $(seek).val();
				if(!song.loop){song.pause();}
				else {song.play();}
			};
			var seek_wrapper = document.createElement('div');
				$(seek_wrapper).addClass('btn btn-danger disabled span4');
 
			$(seek_wrapper).append(seek);
			$(seek).on('change', seek.slide);
			$(song).on('timeupdate', seek.init);
			$(song).on('loadedmetadata', seek.init);
			$(song).on('loadeddata', seek.init);
			$(song).on('progress', seek.init);
			$(song).on('canplay', seek.init);
			$(song).on('canplaythrough', seek.init);
			$(song).on('ended', seek.reset);
			if(song.readyState > 0){
				seek.init();
			}
			$(player).append(seek_wrapper);
		};
		var addTime = function() {
			var time = document.createElement('a');
				$(time).addClass('btn btn-info span3');
				$(time).tooltip({'container': 'body', 'placement': 'right', 'html': true});
			time.twodigit = function (myNum) {
				return ("0" + myNum).slice(-2);
			};
			time.timesplit = function (a) {
				if (isNaN(a)){return '<i class="icon-spinner icon-spin"></i>';}
				var hours = Math.floor(a / 3600);
				var minutes = Math.floor(a / 60) - (hours * 60);
				var seconds = Math.floor(a) - (hours * 3600) - (minutes * 60);
				var timeStr = time.twodigit(minutes) + ':' + time.twodigit(seconds);
				if (hours > 0) {
					timeStr = hours + ':' + timeStr;
				}
				return timeStr;
			};
			time.showtime = function () {
				$(time).html(time.timesplit(song.duration));
				$(time).attr({'title': 'Klik untuk Reset<hr style="padding:0; margin:0;" />Position: ' + (time.timesplit(song.currentTime))});
				if (!song.paused){
					$(time).html(time.timesplit(song.currentTime));
					$(time).attr({'title': 'Klik untuk Reset<hr style="padding:0; margin:0;" />Length: ' + (time.timesplit(song.duration))});
				}
				$(time).tooltip('fixTitle');
			};
			$(time).click(function () {
				song.pause();
				song.currentTime = 0;
				time.showtime();
				$(time).tooltip('fixTitle');
				$(time).tooltip('show');
			});
			$(time).tooltip('show');
			$(song).on('loadedmetadata', time.showtime);
			$(song).on('loadeddata', time.showtime);
			$(song).on('progress', time.showtime);
			$(song).on('canplay', time.showtime);
			$(song).on('canplaythrough', time.showtime);
			$(song).on('timeupdate', time.showtime);
			if(song.readyState > 0){
				time.showtime();
			}
			else {
				$(time).html('<i class="icon-spinner icon-spin"></i>');
			}
			$(player).append(time);
		};
		var addMute = function() {
			var mute = document.createElement('button');
				$(mute).addClass('btn btn-danger span1');
			mute.checkVolume = function () {
				if (song.volume > 0.5 && !song.muted) {
					$(mute).html('<i class="icon-volume-up"></i>');
				} else if (song.volume < 0.5 && song.volume > 0 && !song.muted) {
					$(mute).html('<i class="icon-volume-down"></i>');
				} else {
					$(mute).html('<i class="icon-volume-off"></i>');
				}
			};
			$(mute).click(function () {
				if (song.muted) {
					song.muted = false;
					song.volume = song.oldvolume;
				} else {
					song.muted = true;
					song.oldvolume = song.volume;
					song.volume = 0;
				}
				mute.checkVolume();
			});
			mute.checkVolume();
			$(song).on('volumechange', mute.checkVolume);
			$(player).append(mute);
		};
		var addVolume = function() {
			var volume = document.createElement('input');
				$(volume).attr({
					'type': 'range',
					'min': 0,
					'max': 1,
					'step': 1 / 100,
					'value': 1
				});
			volume.slide = function () {
				song.muted = false;
				song.volume = $(volume).val();
			};
			volume.set = function () {
				$(volume).val(song.volume);
			};
			var vol_wrapper = document.createElement('div');
				$(vol_wrapper).addClass('btn btn-info disabled span3');
			$(vol_wrapper).append(volume);
			$(volume).on("change", volume.slide);
			$(song).on('volumechange', volume.set);
			$(player).append(vol_wrapper);
		};
		var addAlbumArt = function() {
			var albumArt = document.createElement('img');
				$(albumArt).addClass('thumbnail');
				$(albumArt).attr('src', $(song).data('infoAlbumArt'));
			$(data_sec).append(albumArt);
		};
		var addInfo = function(title, dataId) {
			var row = document.createElement('tr');
			var head = document.createElement('th');
			var data = document.createElement('td');
			$(head).html(title);
			$(data).html($(song).data(dataId));
			$(row).append(head);
			$(row).append(data);
			$(data_table).append(row);
		};
		var addData = function() {
			if (typeof($(song).data('infoAlbumArt')) !== 'undefined'){ addAlbumArt();}
			if (typeof($(song).data('infoArtist')) !== 'undefined'){ addInfo('Artist', 'infoArtist');}
			if (typeof($(song).data('infoTitle')) !== 'undefined'){ addInfo('Title', 'infoTitle');}
			if (typeof($(song).data('infoAlbumTitle')) !== 'undefined'){ addInfo('Album', 'infoAlbumTitle');}
			if (typeof($(song).data('infoLabel')) !== 'undefined'){ addInfo('Label', 'infoLabel');}
			if (typeof($(song).data('infoYear')) !== 'undefined'){ addInfo('Year', 'infoYear');}
			if ($(data_table).html() !== ""){
				$(data_sec).append(data_table);
				$(player_box).append(toggle_holder);
				$(player_box).append(data_sec);
			}
		};
		var addPlayer = function() {
			if ($(song).data('play') !== 'off'){ addPlay();}
			if ($(song).data('seek') !== 'off'){ addSeek();}
			if ($(song).data('time') !== 'off'){ addTime();}
			if ($(song).data('mute') !== 'off'){ addMute();}
			if ($(song).data('volume') !== 'off'){ addVolume();}
			$(player_box).append(player);
		};
		var addAttribution = function() {
			var attribution = document.createElement('small');
				$(attribution).addClass('pull-right muted');
			if (typeof($(song).data('infoAttLink')) !== 'undefined'){
				var attribution_link = document.createElement('a');
					$(attribution_link).addClass('muted');
					$(attribution_link).attr('href', $(song).data('infoAttLink'));
					$(attribution_link).html($(song).data('infoAtt'));
				$(attribution).append(attribution_link);
			}
			else {
				$(attribution).html($(song).data('infoAtt'));
			}
			$(player_box).append(attribution);
		};
		var fillPlayerBox = function() {
			addData();
			addPlayer();
			if (typeof($(song).data('infoAtt')) !== 'undefined'){ addAttribution();}
		};
		fillPlayerBox();
		$(song).on('error', function(){
			load_error();
		});
		return player_box;
	});
})(jQuery)

Setelah selesai kita buat file index.html, pada head kita taro script css dan boostrap seperti dibawah ini

<head>
    <meta charset="utf-8">
    <title>Membuat player mp3 dengan boostrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- Le styles -->
 
		<link href="assets/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" media="screen">
		<link href="assets/css/font-awesome.css" rel="stylesheet" media="screen"> 
		<link href="assets/css/bootstrap-playermusic.css" rel="stylesheet" media="screen"> 
 
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">
  </head>

lalu selanjutnya di dalam body kita masukan script dibawah ini untuk menampilkan gambar, judul,artist,label dan tentunya link file musik kita taro disini, lihat script dibawah ini.

<div class="container">
		<audio controls
			data-info-album-art="images/logo.jpg"
			data-info-album-title="Musim Yg Baik"
			data-info-artist="Sheilaon7"
			data-info-title="Lapang Dada"
			data-info-label="Sony Music Indonesia"
			data-info-year="2015"
			data-info-att="Sheilaon7"
			data-info-att-link="http://sheilaon7.com">
			<source src="music/Sheila On 7 - Lapang Dada.mp3" type="audio/mpeg" />
		</audio>
 
 
	</div>

ok next setelah kita masukan script diatas kita masukan script js yang di perlukan seperti dibawah ini

<script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
	<script src="assets/js/bootstrap-playermusic.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>

lalu index.html lengkap nya seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Membuat player mp3 dengan boostrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <!-- Le styles -->
 
		<link href="assets/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" media="screen">
		<link href="assets/css/font-awesome.css" rel="stylesheet" media="screen"> 
		<link href="assets/css/bootstrap-playermusic.css" rel="stylesheet" media="screen"> 
 
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">
  </head>
 
  <body>
 <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://andeznet.com">AndezNet</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li><a href="#">Home</a></li>
			  <li class="active"><a href="#">Music</a></li>
              <li><a href="#">Logout</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
 
	<div class="container">
		<audio controls
			data-info-album-art="images/logo.jpg"
			data-info-album-title="Musim Yg Baik"
			data-info-artist="Sheilaon7"
			data-info-title="Lapang Dada"
			data-info-label="Sony Music Indonesia"
			data-info-year="2015"
			data-info-att="Sheilaon7"
			data-info-att-link="http://sheilaon7.com">
			<source src="music/Sheila On 7 - Lapang Dada.mp3" type="audio/mpeg" />
		</audio>
 
 
	</div>
 
	<div class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></a>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</a>&nbsp<?php echo date("Y");?></p>
				</div><!--/span-->
			  </div><!--/row-->
			</div><!--/span-->
	</div><!--/row-->
 
 
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
	<script src="assets/js/bootstrap-playermusic.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
 
  </body>
</html>

Lalu kita jalankan di browser anda, jika sudah berhasil maka akan muncul seperti dibawah ini

player music bootstrap

Ok sekian tutorial kali ini & source lengkapnya bisa anda download disini.

Happy Coding & Programing

Tags:

You may also like...

9 Responses

  1. FanfanRA says:
    August 6, 2015 at 3:40 pm

    Akhirnya gan. ane nemu juga yang beginian,, ane dah keliling cari sana sini, yang nulled dah cari tapi paada pake flash :v Thanks banget ah gan…
    nitip aja gan
    http://ad-itech.blogspot.com

    Reply
  2. fedri says:
    August 24, 2015 at 9:07 am

    kalau mau buat list daftar lagunya gimana mas?

    Reply
  3. hanif says:
    October 7, 2015 at 7:56 am

    Ijin unduh mas bro…

    Reply
  4. bima says:
    July 2, 2017 at 9:46 am

    duh gan, linknya mati :'( boleh di reupload 🙂 ?

    Reply
  5. bima says:
    August 15, 2017 at 1:08 pm

    alhamdulillah bisa gan, terimakasih 🙂 ijin mengembangkan kodingan anda 🙂

    Reply

Leave a Reply

Your email address will not be published.