Membuat web pemutar musik dengan xampp - Hi friends, I hope you are all in good health update sa pilipinas, In the article you are reading this time with the title Membuat web pemutar musik dengan xampp, We have prepared this article well for you to read and take information in it. hopefully the contents of the post Article Tutorial, what we write you can understand. ok, happy reading.

Title : Membuat web pemutar musik dengan xampp
link : Membuat web pemutar musik dengan xampp

Membuat web pemutar musik dengan xampp

Sedikit penjelasan tentang software Xampp adalah software yang digunakan untuk menjalankan script php secara offline dengan software ini kalian bisa membuat website secara offline di localhost menggunakan xampp.

Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.

tutorial kali ini adalah membuat mp3 player menggunakan tampilan boostrap.
unduh source berikut ini 

     > Download <

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.



 bootstrap-playermusic.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

bootstrap-playermusic.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('');


$(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('');


$(play).click(function () {


song.play();


});


}


if (toggle === 'pause') {


$(play).html('');


$(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.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 '';}


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

Position: ' + (time.timesplit(song.currentTime))});


if (!song.paused){


$(time).html(time.timesplit(song.currentTime));


$(time).attr({'title': 'Klik untuk Reset

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('');


}


$(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('');


} else if (song.volume < 0.5 && song.volume > 0 && !song.muted) {


$(mute).html('');


} else {


$(mute).html('');


}


};


$(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 letak script css dan boostrap seperti dibawah ini

Source code

<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>


</audio>


</div>

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

Source Code

Source code

<div class="container">

<audio controls

data-info-album-art="albumfoto/album.jpg"

data-info-album-title="Divide"

data-info-artist="Ed Sheeran"

data-info-title="Perfect"

data-info-label="Asylum Records UK"

data-info-year="26 September 2017"

data-info-att="Ed Sheeran"

data-info-att-link="http://edsheeran.com">

<source src="musik/Ed Sheeran - Perfect.mp3" type="audio/mpeg" />

Selanjutnya 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

index.html

Source code

<!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="https://rudi2661.blogspot.com">DreamPedia</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="albumfoto/album.jpg"


data-info-album-title="Divide"


data-info-artist="Ed Sheeran"


data-info-title="Perfect"


data-info-label="Asylum Records UK"


data-info-year="26 September 2017"


data-info-att="Ed Sheeran"


data-info-att-link="http://edsheeran.com">


<source src="musik/Ed Sheeran - Perfect.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</p>


<p>&copy; &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.

(diambil dari berbagai sumber)

That's the article: Membuat web pemutar musik dengan xampp

Thank you for visiting my blog, hopefully it can be useful for all of you. Don't forget to share this article with your friends so they also know the interesting info, see you in other article posts.

You are now reading the article Membuat web pemutar musik dengan xampp with link address https://updatesapilipinas.blogspot.com/2020/04/membuat-web-pemutar-musik-dengan-xampp.html