اصنع مشغل MP3 باستخدام Bootstrap

Hai All ketemu lagi sama saya بورتغاستيا, 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 دفعة 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:-2مقصف;
	حشوة:0 !important;
	خط-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%;
	حشوة:1.5%;
}
 
.playa  .btn-group  {
	text-align:مركز;
}
 
@وسائل الإعلام (max-width: 9مقصف) and (min-width: 768مقصف){
	.span4 .playa, .playa.span4{
		حشوة:0;
	}
}
@وسائل الإعلام (min-width: 500مقصف){
	.playa .btn-group .btn {
		حشوة: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{
		حشوة:0;
		overflow:hidden;
	}
}

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

(وظيفة($) {
	'use strict';
	$('audio[controls]").before(وظيفة(){
		var song = this;
			song.controls=خاطئة;
		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).لغة البرمجة("<i class="icon-reorder"></أنا>");
			$(data_toggle).addClass('btn btn-info');
			$(data_toggle).attr('style', 'opacity:0.3");
			$(data_toggle).click(وظيفة (){$(data_sec).انهيار('toggle');});
			$(data_toggle).attr('title', 'Lihat');
			$(data_toggle).tooltip({'container': 'body', 'placement': 'top', 'html': صحيح});
			$(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 = وظيفة(){
			console.log('خطأ');
			$(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 = وظيفة() {
			var play = document.createElement('button');
				$(play).addClass('btn btn-info disabled span1');
			play.setPlayState = وظيفة(تبديل){
					$(play).removeClass('disabled');
				إذا (تبديل === 'play') {
					$(play).لغة البرمجة("<i class="icon-play"></أنا>");
					$(play).click(وظيفة () {
						song.play();
					});
				}
				إذا (تبديل === 'pause') {
					$(play).لغة البرمجة("<i class="icon-pause"></أنا>");
					$(play).click(وظيفة () {
						song.pause();
					});
				}
			};
			$(song).on('play', وظيفة(){play.setPlayState('pause');});
			$(song).on('canplay', وظيفة(){play.setPlayState('play');});
			$(song).on('pause', وظيفة(){play.setPlayState('play');});
			var timeout = 0;
			var loadCheck = setInterval(وظيفة() {
				إذا(isNaN(song.duration) === خاطئة){
					play.setPlayState('play');
					clearInterval(loadCheck);
					إرجاع صحيح;
				}
				إذا(song.networkState === 3 || timeout === 75){
					load_error();
					clearInterval(loadCheck);
					إرجاع خاطئة;
				}
				timeout++;
			}, 50);
 
			$(player).append(play);
		};
		var addSeek = وظيفة() {
			var seek = document.createElement('input');
				$(seek).attr({
					'type': 'range',
					'min': 0,
					'value': 0,
					'class': 'seek'
				});
			seek.progress = وظيفة () {
				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) + '%';
				إلى عن على (var أنا=0; أنا<song.buffered.length; أنا++){
					إذا (song.buffered.النهاية(أنا) > song.currentTime && isNaN(song.buffered.النهاية(أنا)) === خاطئة && isNaN(song.buffered.start(أنا)) === خاطئة){
						var bufferedstart;
						var bufferedend;
						إذا (song.buffered.النهاية(أنا) < song.duration) {
							bufferedend = ((song.buffered.النهاية(أنا)/song.duration) * 100);
						}
						آخر {
							bufferedend = 100;
						}
						إذا (song.buffered.start(أنا) > song.currentTime){
							bufferedstart = ((song.buffered.start(أنا)/song.duration) * 100);
						}
						آخر {
							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 = وظيفة () {
				$(seek).val(song.currentTime);
				seek.progress();
			};
			seek.slide = وظيفة () {
				song.currentTime = $(seek).val();
				seek.progress();
			};
			seek.init = وظيفة () {
				$(seek).attr({
					'max': song.duration,
					'step': song.duration / 100
				});
				seek.set();
			};
			seek.reset = وظيفة () {
				$(seek).val(0);
				song.currentTime = $(seek).val();
				إذا(!song.loop){song.pause();}
				آخر {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);
			إذا(song.readyState > 0){
				seek.init();
			}
			$(player).append(seek_wrapper);
		};
		var addTime = وظيفة() {
			var time = document.createElement('a');
				$(time).addClass('btn btn-info span3');
				$(time).tooltip({'container': 'body', 'placement': 'right', 'html': صحيح});
			time.twodigit = وظيفة (myNum) {
				إرجاع ("0" + myNum).slice(-2);
			};
			time.timesplit = وظيفة (أ) {
				إذا (isNaN(أ)){إرجاع "<i class="icon-spinner icon-spin"></أنا>";}
				var hours = Math.floor(أ / 3600);
				var minutes = Math.floor(أ / 60) - (hours * 60);
				var seconds = Math.floor(أ) - (hours * 3600) - (minutes * 60);
				var timeStr = time.twodigit(minutes) + ":" + time.twodigit(seconds);
				إذا (hours > 0) {
					timeStr = hours + ":" + timeStr;
				}
				إرجاع timeStr;
			};
			time.showtime = وظيفة () {
				$(time).لغة البرمجة(time.timesplit(song.duration));
				$(time).attr({'title': 'Klik untuk Reset<hr style="padding:0; margin:0;" />Position: " + (time.timesplit(song.currentTime))});
				إذا (!song.paused){
					$(time).لغة البرمجة(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(وظيفة () {
				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);
			إذا(song.readyState > 0){
				time.showtime();
			}
			آخر {
				$(time).لغة البرمجة("<i class="icon-spinner icon-spin"></أنا>");
			}
			$(player).append(time);
		};
		var addMute = وظيفة() {
			var mute = document.createElement('button');
				$(mute).addClass('btn btn-danger span1');
			mute.checkVolume = وظيفة () {
				إذا (song.volume > 0.5 && !song.muted) {
					$(mute).لغة البرمجة("<i class="icon-volume-up"></أنا>");
				} آخر إذا (song.volume < 0.5 && song.volume > 0 && !song.muted) {
					$(mute).لغة البرمجة("<i class="icon-volume-down"></أنا>");
				} آخر {
					$(mute).لغة البرمجة("<i class="icon-volume-off"></أنا>");
				}
			};
			$(mute).click(وظيفة () {
				إذا (song.muted) {
					song.muted = خاطئة;
					song.volume = song.oldvolume;
				} آخر {
					song.muted = صحيح;
					song.oldvolume = song.volume;
					song.volume = 0;
				}
				mute.checkVolume();
			});
			mute.checkVolume();
			$(song).on('volumechange', mute.checkVolume);
			$(player).append(mute);
		};
		var addVolume = وظيفة() {
			var volume = document.createElement('input');
				$(volume).attr({
					'type': 'range',
					'min': 0,
					'max': 1,
					'step': 1 / 100,
					'value': 1
				});
			volume.slide = وظيفة () {
				song.muted = خاطئة;
				song.volume = $(volume).val();
			};
			volume.set = وظيفة () {
				$(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 = وظيفة() {
			var albumArt = document.createElement('img');
				$(albumArt).addClass('thumbnail');
				$(albumArt).attr('src', $(song).البيانات('infoAlbumArt'));
			$(data_sec).append(albumArt);
		};
		var addInfo = وظيفة(عنوان, dataId) {
			var صف = document.createElement('tr');
			var رئيس = document.createElement('th');
			var البيانات = document.createElement('td');
			$(رئيس).لغة البرمجة(عنوان);
			$(البيانات).لغة البرمجة($(song).البيانات(dataId));
			$(صف).append(رئيس);
			$(صف).append(البيانات);
			$(data_table).append(صف);
		};
		var addData = وظيفة() {
			إذا (typeof($(song).البيانات('infoAlbumArt')) !== 'undefined'){ addAlbumArt();}
			إذا (typeof($(song).البيانات('infoArtist')) !== 'undefined'){ addInfo('Artist', 'infoArtist');}
			إذا (typeof($(song).البيانات('infoTitle')) !== 'undefined'){ addInfo('Title', 'infoTitle');}
			إذا (typeof($(song).البيانات('infoAlbumTitle')) !== 'undefined'){ addInfo('Album', 'infoAlbumTitle');}
			إذا (typeof($(song).البيانات('infoLabel')) !== 'undefined'){ addInfo('Label', 'infoLabel');}
			إذا (typeof($(song).البيانات('infoYear')) !== 'undefined'){ addInfo('Year', 'infoYear');}
			إذا ($(data_table).لغة البرمجة() !== ""){
				$(data_sec).append(data_table);
				$(player_box).append(toggle_holder);
				$(player_box).append(data_sec);
			}
		};
		var addPlayer = وظيفة() {
			إذا ($(song).البيانات('play') !== 'off'){ addPlay();}
			إذا ($(song).البيانات('seek') !== 'off'){ addSeek();}
			إذا ($(song).البيانات('time') !== 'off'){ addTime();}
			إذا ($(song).البيانات('mute') !== 'off'){ addMute();}
			إذا ($(song).البيانات('volume') !== 'off'){ addVolume();}
			$(player_box).append(player);
		};
		var addAttribution = وظيفة() {
			var attribution = document.createElement('small');
				$(attribution).addClass('pull-right muted');
			إذا (typeof($(song).البيانات('infoAttLink')) !== 'undefined'){
				var attribution_link = document.createElement('a');
					$(attribution_link).addClass('muted');
					$(attribution_link).attr('href', $(song).البيانات('infoAttLink'));
					$(attribution_link).لغة البرمجة($(song).البيانات('infoAtt'));
				$(attribution).append(attribution_link);
			}
			آخر {
				$(attribution).لغة البرمجة($(song).البيانات('infoAtt'));
			}
			$(player_box).append(attribution);
		};
		var fillPlayerBox = وظيفة() {
			addData();
			addPlayer();
			إذا (typeof($(song).البيانات('infoAtt')) !== 'undefined'){ addAttribution();}
		};
		fillPlayerBox();
		$(song).on('خطأ', وظيفة(){
			load_error();
		});
		إرجاع player_box;
	});
})(jQuery)

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

<رئيس>
    <أحرف التعريف="utf-8">
    <عنوان>Membuat player mp3 dengan boostrap</عنوان>
    <اسم ميتا="viewport" المحتوى="width=device-width, المقياس الأولي = 1.0">
    <اسم ميتا="description" المحتوى="">
    <اسم ميتا="author" المحتوى="">
 
    <!-- الأنماط -->
 
		<رابط href="assets/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" وسائل الإعلام="screen">
		<رابط href="assets/css/font-awesome.css" rel="stylesheet" وسائل الإعلام="screen"> 
		<رابط href="assets/css/bootstrap-playermusic.css" rel="stylesheet" وسائل الإعلام="screen"> 
 
    <أسلوب>
      الجسم {
        حشوة-أعلى: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
      }
    </أسلوب>
    <رابط href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <ارتباط rel="shortcut icon" href="assets/ico/favicon.png">
  </رئيس>

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.

<شعبة صف دراسي="container">
		<audio controls
			data-info-album-art="images/logo.jpg"
			البيانات-info-album-عنوان="Musim Yg Baik"
			البيانات-info-artist="Sheilaon7"
			البيانات-info-عنوان="Lapang Dada"
			البيانات-info-label="Sony Music Indonesia"
			البيانات-info-year="2015"
			البيانات-info-att="Sheilaon7"
			البيانات-info-att-حلقة الوصل="http://sheilaon7.com">
			<source src="music/Sheila On 7 - Lapang Dada.mp3" type="audio/mpeg" />
		</audio>
 
 
	</شعبة>

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

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

lalu index.html lengkap nya seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
  <رئيس>
    <meta charset="utf-8">
    <عنوان>Membuat player mp3 dengan boostrap</عنوان>
    <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"> 
 
    <أسلوب>
      الجسم {
        padding-top: 60مقصف; /* 60بكسل لجعل الحاوية تذهب طوال الطريق إلى أسفل الشريط العلوي */
      }
    </أسلوب>
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
 
                                   <link rel="shortcut icon" href="assets/ico/favicon.png">
  </رئيس>
 
  <الجسم>
 <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 class="icon-bar"></امتداد>
            <span class="icon-bar"></امتداد>
          </زر>
          <a class="brand" href="http://andeznet.com">AndezNet</أ>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <في ال><a href="#">الصفحة الرئيسية</أ></في ال>
			  <li class="active"><a href="#">Music</أ></في ال>
              <في ال><a href="#">تسجيل خروج</أ></في ال>
            </ال>
          </شعبة><!--/.nav-collapse -->
        </شعبة>
      </شعبة>
    </شعبة>
 
	<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 class="row-fluid">
			<div class="span12">
			  <div class="row-fluid">
				<div class="alert alert-info">
					<a name="contact"></أ>
				  <h2>www.andeznet.com</h2>
				  <p class="text-info">Gudang Teknologi & Informasi</p>
				  <p>&copy; <a href="http://andeznet.com">www.andeznet.com</أ>&nbsp<?بي أتش بي صدى صوت date("Y");?></p>
				</شعبة><!--/span-->
			  </شعبة><!--/row-->
			</شعبة><!--/span-->
	</شعبة><!--/row-->
 
 
    <script src="assets/js/jquery.js"></النصي>
    <script src="assets/js/bootstrap-transition.js"></النصي>
    <script src="assets/js/bootstrap-alert.js"></النصي>
    <script src="assets/js/bootstrap-modal.js"></النصي>
    <script src="assets/js/bootstrap-dropdown.js"></النصي>
    <script src="assets/js/bootstrap-scrollspy.js"></النصي>
    <script src="assets/js/bootstrap-tab.js"></النصي>
    <script src="assets/js/bootstrap-tooltip.js"></النصي>
    <script src="assets/js/bootstrap-popover.js"></النصي>
    <script src="assets/js/bootstrap-button.js"></النصي>
    <script src="assets/js/bootstrap-collapse.js"></النصي>
    <script src="assets/js/bootstrap-carousel.js"></النصي>
    <script src="assets/js/bootstrap-typeahead.js"></النصي>
	<script src="assets/js/bootstrap-playermusic.js"></النصي>
	<script src="assets/js/bootstrap.min.js"></النصي>
 
  </الجسم>
</لغة البرمجة>

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.

ترميز سعيد & برمجة

ربما يعجبك أيضا...

9 استجابات

  1. FanfanRA يقول:

    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

  2. fedri يقول:

    kalau mau buat list daftar lagunya gimana mas?

  3. bima يقول:

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

  4. bima يقول:

    alhamdulillah bisa gan, terimakasih 🙂 ijin mengembangkan kodingan anda 🙂

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *