آموزش ساخت یک پخش کننده موسیقی(MP3 player) با HTML5
آموزش ایجاد یک پخش کننده موسیقی با HTml5

آموزش ساخت یک پخش کننده موسیقی(MP3 player) با HTML5

در این آموزش قصد داریم تا به شما نحوه ایجاد یک پخش کننده موسیقی رو بدهیم که در آن شما با استفاده از HTML5 یک پخش کننده ساده ولی کاربردی را طراحی و ایجاد خواهید کرد.

 دریافت فایل  پیش نمایش

ما ادر این آموزش از سه کتابخانه اساسی استفاده خواهیم کرد که به مرور آنها را برایتان معرفی خواهیم کرد.ولی در ابتدا کار را با نوشتن کدهای HTML آغاز می کنیم.

HTML

div id="container" class="disabled">

	<div id="cover-art">
		<div id="cover-art-big"></div>
		<img id="cover-art-small" alt="cover-art-small" src="assets/img/default.png">
		<div class="instructions">ترانه خود را برای پخش شدن به اینجا بکشید</div>
	</div>

	<div id="wave"></div>

	<div id="control-bar">

		<div class="player-control">
			<div id="previous-button" title="قبلی"><i class="fa fa-fast-backward"></i></div>
			<div id="play-button" title="پخش"><i class="fa fa-play"></i></div>
			<div id="pause-button" title="مکث"><i class="fa fa-pause"></i></div>
			<div id="stop-button" title="متوقف کردن"><i class="fa fa-stop"></i></div>
			<div id="next-button" title="بعدی"><i class="fa fa-fast-forward"></i></div>
			<div id="shuffle-button" title="انتخاب تصادفی خاموش است"><i class="fa fa-random"></i></div>
			<div id="repeat-button" title="تکرار خاموش است"><i class="fa fa-refresh"><span>1</span></i></div>
		</div>

		<div id="playlist">

			<div id="track-details" title="نمایش لیست پخش">
				<i class="fa fa-sort"></i>
				<p id="track-desc">هیچ ترانه ای برای پخش بارگذاری نشده است.</p>
				<p id="track-time">
					<span id="current">-</span> / <span id="total">-</span>
				</p>
			</div>

			<div id="expand-bar" class="hidden">

				<form>
					<label for="searchBox" class="lable">جست و جو</label><div><input id="searchBox" type="search" name="search"></div>
				</form>
				<ul id="list"></ul>
			</div>

		</div>

	</div>

	<div id="drop-zone" class="hidden">فایل ها را به اینجا بکشید و رها کنید</div>

</div>

<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/js/id3-minimized.js"></script>
<script src="assets/js/wavesurfer.min.js"></script>
<script src="assets/js/script.js"></script>

ما در کدهای بالا تنظیمات مربوط به نمایش اولیه کاور آهنگ،دکمه های کنترلی و لیست پخش را انجام داده ایم یعنی به عبارتی کلاس های اولیه ای را که لازم داریم  فراخوانی کرده ایم،سپس در آخر نیز کتابخانه های مورد نیاز خود را وارد کرده ایم.

دو کتابخانه مهمی که ما در اینجا استفاده کرده ایم عبارتند از Wavesurfer.js و  id3-minimized میباشند که اولی برای نمایش موج بار(wave) و دومی برای استخراج اطلاعات آهنگ می باشد.

فعلا چیز خاصی تا به اینجا جهت توضیح وجود ندارد.

حالا ما به سراغ کدهای جاوا اسکریپت می رویم.ما در سه بخش برایتان توضیح می دهیم .

جاوااسکریپت-بخش اول

var dropZone = $('#drop-zone'),
	searchInput = $('#searchBox');

$(document).on('dragover', function(event) {
	event.stopPropagation();
	event.preventDefault();

	dropZone.removeClass('hidden');
});

dropZone.on('dragleave', function(event) {
	event.stopPropagation();
	event.preventDefault();

	dropZone.addClass('hidden');
});

dropZone.on('dragover', function(e) {
	e.stopPropagation();
	e.preventDefault();
	e.originalEvent.dataTransfer.dropEffect = 'copy';
});

// دریافت اطلاعات فایل ها هنگام رها کردن آنها
dropZone.on('drop', function(e) {
	e.stopPropagation();
	e.preventDefault();


	if(e.originalEvent.dataTransfer.items){
		// For chrome users folder upload is supported
    //برای استفاده کننده ها از گوگل کروم که از پوشه بارگذاری پشتیبانی می کند.
		var items = e.originalEvent.dataTransfer.items;
		for(var j=0; j<items.length; j++){
			var item = items[j].webkitGetAsEntry();
			if(item){
				traverseFileTree(item);
			}
		}
	}
	else{
    //کاربران دیگر مرورگر ها باید فایل ها را بطور مستقیم بارگذاری نمایند
		var files = e.originalEvent.dataTransfer.files;

		for(var j=0; j<files.length; j++){
			if(files[j].type.match(/audio\/(mp3|mpeg)/)){

				getID3Data(files[j], function (song) {
					allTracks.push(song);
					playlist.push(song);
					$('#list').append($(returnTrackHTML(song, playlist.length-1)));
				});
			}
		}
	}

  //اگر یک فایل جدید به لیست پخش موجود اضافه شد آنگا هجست و جو را لغو کن
	if(allTracks.length){
		searchInput.val('');
		searchInput.trigger('input');
		temporarySearchPlaylist = [];
	}

	dropZone.addClass('hidden');
});

//دریافت فایل ها بصورت بازگشتی از پوشه(فقط در کروم کار میکند)
function traverseFileTree(item,path) {
	path = path || "";
	if(item.isFile){
		item.file(function(file){
			if(file.type.match(/audio\/mp3/)){
				getID3Data(file, function (song) {
					allTracks.push(song);
					playlist.push(song);
					$('#list').append($(returnTrackHTML(song,playlist.length-1)));
				});
			}
		})
	}
	else if(item.isDirectory){
		var dirReader = item.createReader();
		dirReader.readEntries(function (entries) {
			for(var j=0; j<entries.length; j++){
				traverseFileTree(entries[j], path + item.name + "/");
			}
		})
	}
}

//یک شیء با تمام اطلاعات مورد نیاز در مورد ترانه ایجاد می کند.
function getID3Data(file, done) {

	getTags(file,function(result){

		result.audioTrack = file;
		result.playing = false;
		done(result);

	});
}

//دریافت تگ اطلاعات ID3 از فایل
function getTags(file,done){

	var result = {};

	ID3.loadTags(file.name, function() {

		var tags = ID3.getAllTags(file.name);

		result.artist = tags.artist || "Unknown Artist";
		result.title = tags.title || "Unknown";
		result.album = tags.album || "";
		if(tags.picture && tags.picture.data && tags.picture.data.length) {
			result.picture = tags.picture;
			getImageSource(result.picture, function (imageSource) {
				result.picture = imageSource;
				done(result);
			});
		}
		else {
			result.picture = 'assets/img/default.png';
			done(result);
		}


	}, {
		tags: ["artist", "title", "album", "picture"],
		dataReader: FileAPIReader(file)
	});

}

function getImageSource(image, done) {
	var base64String = "";
	for (var j = 0; j < image.data.length; j++) {
		base64String += String.fromCharCode(image.data[j]);
	}
	done("data:" + image.format + ";base64," + window.btoa(base64String));
}


function readFile(file,done) {

	var reader = new FileReader();

	reader.onload = function(data){
		done(data);
	};

	reader.readAsDataURL(file);
}


/*-------------------
	پخش کننده صدا
 ------------------*/


var wavesurfer = Object.create(WaveSurfer);

wavesurfer.init({
	container: document.querySelector('#wave'),
	cursorColor: '#aaa',
	cursorWidth: 1,
	height: 80,
	waveColor: '#588efb',
	progressColor: '#f043a4'
});


// خواندن و پخش فایل
//دریافت یک ارامتر--ایندکس ترانه ای که ما میخواهیم پخش کنیم.
function playTrack(number){

	if(playlist[number] && playlist[i]) {

		lastPlayed.push(number);

		var file = playlist[i].audioTrack,
			result = {};


		readFile(file, function(result){
			result = file;
			wavesurfer.loadBlob(result);
		});

	}
	// اگر چیز دیگری اتفاق افتاد پخش موزیک را متوقف کن
	else{
		wavesurfer.stop();
	}

}


// یک برنامه کنترل رویداد برای زمانی که ترانه بارگذاری شده و آماده پخش است.
wavesurfer.on('ready', function () {

	// پخش کردن ترانه
	wavesurfer.play();

	var duration = wavesurfer.getDuration();

	if(playlist[i]){
		document.title = playlist[i].artist + ' - ' + playlist[i].title;

		// تنظیم کردن کاور هنری-نمایش کاور آهنگ

		if(playlist[i].picture == 'assets/img/default.png'){
			$('#cover-art-big').css("background", "");
		}
		else{
			$('#cover-art-big').css("background-image", "url("+ playlist[i].picture +")").css("background-repeat", "no-repeat").css("background-position", "center");
		}

		$('#cover-art-small').attr('src', playlist[i].picture);

		// نمایش عنوان و خواننده.
		$('#track-desc').html('<b>' + playlist[i].title + '</b> by ' + playlist[i].artist);

		//نمایش مدت  آهنگ
		$('#current').text('0:00');
		$('#total').text(formatTime(duration));

    //نمایش زمان سپری شده آهنگ
		clearInterval(timer);
		timer = setInterval(function() {
			$('#current').text(formatTime(wavesurfer.getCurrentTime()));
		}, ۱۰۰۰);

    //مشخص کردن آهنگ در حال پخش در آرایه لیست پخش
		allTracks.forEach(function (tr) {
			tr.playing = false;
		});
		playlist[i].playing = true;


		if(temporarySearchPlaylist.length){
      //اگر جست و جویی در حال انجام است،آن را برای  مشخص کردن ترانه درست دو باره آغاز کن
			renderTrackList(temporarySearchPlaylist);
		}
		else{
			// If there isn't a search simply highlight the according element from the .track array
			$('.track').removeClass('active').eq(i).addClass('active');
		}
	}

});

//یک رویداد برای کنترل زمانی که پخش ترانه تمام شد
wavesurfer.on('finish', function () {
	//در این مورد shuffle روشن است
	if (shuffle){
		if (repeat == 2) {
			if (playlist[i]) {
				playTrack(i);
			}
		}
		else if (playlist.length > 1) {
			var temp = i;
			while (i == temp) {
				i = Math.floor(Math.random() * playlist.length);
			}
			if(playlist[i]) {
				playTrack(i);
			}
		}
	}
	// در این مورد shuffle خاموش است
	else {
		if (!repeat) {
			if (i >= playlist.length - 1) {
				wavesurfer.stop();
			}
			else {
				i++;
				playTrack(i);
			}
		}
		else if (repeat == 1) {
			if (i >= playlist.length - 1) {
				i = 0;
			}
			else {
				i++;
			}
			playTrack(i);
		}
		else if (repeat == 2) {
			if (playlist[i]) {
				playTrack(i);
			}
		}
	}

});


wavesurfer.on('seek', function () {
	$('#current').text(formatTime(wavesurfer.getCurrentTime()));
});

ما در ابتدا با استفاده از متغییر  dropZone قابلیت کشیدن و رها کردن فایل رو تعریف کرده ایم سپس با استفاده از یک تابع اطلاعات مریوط به فایل کشیده و رها شده را دریافت می کنیم،سپس با استفاده از یک تابع دیگر به نام getTags و  با استفاده از امکانات کتابخانه id3 اطلاعات مربوط به آهنگ را دریافت می کنیم که این اطلاعات شامل نام آهنگ،خواننده،مدت زمان و کاور آن میباشد.سپس با استفاده یک تابع دیگر (playTrack) اقدام به خواندن و پخش فایل انتخابی می کنیم.(بقیه توضیحات اضافی در داخل متن کد موجود میباشد.

جاوااسکریپت-بخش دوم

/*---------------------
	کنترلر های پخش کننده
----------------------*/

// فشاردادن دکمه 'بعدی 
//پخش کردن ترانه بعدی موجود در لیست پخش و یا اگر shuffles روشن باشد انتخاب تصادفی یک آهنگ 
$('#next-button').on('click', function () {

	if (!shuffle) {
		i++;
		if (i > playlist.length - 1) {
			i = 0;
		}
	}
	else {
		if (playlist.length > 1) {
			var temp = i;
			while (i == temp) {
				i = Math.floor(Math.random() * playlist.length);
			}
		}
	}

	if(playlist[i]) {
		playTrack(i);
	}

});

// فشار دادن دکمه 'قبلی 
//اگر shuffle خاموش باشد ترانه ماقبل ترانه فعلی را از لیست پخش،پخش می کند.
// اگر shuffle روشن باشد یک ترانه از پاخرین لیست پخش شده با حفظ نظم پخش می کند
$('#previous-button').on('click', function () {

	if(!shuffle){
		if(i==0){
			i=playlist.length-1;
		}
		else{
			i--;
		}
	}
	else{
		lastPlayed.pop();
		i = lastPlayed.pop();
	}

	if(i==undefined || i<0){
		i = 0;
	}

	playTrack(i);

});

$('#play-button').on('click', function(){
	wavesurfer.play();
});

$('#pause-button').on('click', function () {
	wavesurfer.playPause();
});

$('#stop-button').on('click', function(){
	wavesurfer.stop();
});

// shuffleروشن خاموش کردن 
$('#shuffle-button').on('click', function(){
	var that = $(this);

	if(that.hasClass('active')){
		that.removeClass('active');
		that.attr('title', 'Shuffle Off');
		shuffle = false;
	}
	else{
		that.addClass('active');
		that.attr('title', 'انتخاب تصادفی روشن است');
		shuffle = true;
	}
});

// repeat = 0 تکرار خاموش است. - پس از اینکه لیست پخش به انتها رسید آن را متوقف می کند
// repeat = 1 تکرار خاموش است. - پس از اینکه لیست پخش به انتها رسید دوباره شروع به پخش لیست پخش می کند
// repeat = 2 تکرار ترانه فعلی - ترانه فعلی را تکرار می کند.
$('#repeat-button').on('click', function(){

	var that = $(this);

	if(repeat==0){
		that.addClass('active');
		that.attr('title', 'تکرار همه');
		repeat = 1;
	}

	else if(repeat==1){
		that.find('span').show();
		that.attr('title', 'تکرار آهنگ فعلی');
		repeat = 2;
	}

	else if(repeat==2){
		that.find('span').hide();
		that.removeClass('active');
		that.attr('title', 'حالت تکرار خاموش است');
		repeat = 0;
	}

});

ما در کدهای بالا به تعریف عملکرد کنترلر های موجود در داخل پخش کننده پرداخته ایم که این عملکردها عباتند از:انتخاب حالت پخش تصادفی،حالت تکرار که خود شامل ۳ بخش است،عملکرد های مربوط به پخش،توقف و مکث.

کدهای جاوااسکریپت-بخش سوم

/*----------------------
	پیمایش لیست پخش
----------------------*/

// باز و بسته کردن لیست پخش.
$('#track-details').on('click', function () {
	var expandBar = $('#expand-bar');

	if(expandBar.hasClass('hidden')){
		expandBar.removeClass('hidden');
		$(this).attr('title', 'بستن لیست پخش');
	}
	else{
		expandBar.addClass('hidden');
		$(this).attr('title', 'نمایش لیست پخش');
	}
});

$('#playlist').on('click', function (e) {

  //دریافت ایندکس ترانه ای که روی آن کلیک شد

	var target = $(e.target),
		index = target.closest('.track').data('index');

	if(index!=undefined){

		// انتخاب ترانه
		if(!target.hasClass('remove-track')){


			// اگر یک جست و جو ایجاد شد آنگاه یک لیست پخش جدید از نتیجه جست و جو  ایجاد میشود.
			if(temporarySearchPlaylist.length){
				playlist = temporarySearchPlaylist.slice(0);
				temporarySearchPlaylist = [];
				lastPlayed = [];
			}

      //پخش آهنگ جدید انتخاب شده و تنظیم اندیس آن به عنوان آهنگ   فعلی در حال پخش
			i = index;

			playTrack(i);

		}
		// حذف کردن آهنگ ها
		else{

			var position,
				track;

      //اگر آهنگ  هنگامی که در حال جست و جو هستید حذف شود
			if(temporarySearchPlaylist.length) {
				track = temporarySearchPlaylist[index];
			}
			// اگر آهنگ هنگام پخش عادی حذف شود.
      
			else {
				track = playlist[index];
			}

			//alltrcksحذف آهنگ از 
			position = allTracks.indexOf(track);

			if(position != -1) {
				allTracks.splice(position, 1);
			}

			// حذف از لیست پخش
			position = playlist.indexOf(track);

			if(position != -1) {
				playlist.splice(position, 1);
			}

      //اگر ما ترانه در حال پخش را حذف کنیم آنگاه اولین ترانه بعدی را پخش کن
			if (track.playing) {
				if (i >= playlist.length) {
					i = 0;
				}

				playTrack(i);
			}

      //تریگر کردن جست و جو برای بارگذاری لیست پخش جدید 
			searchInput.trigger('input');

			if(!playlist.length){
        //اگر لیست پخش خالی باشد-از آرایه alltracks یک لیست پخش جدید تولید کن
				if(allTracks.length){
					playlist = allTracks.slice(0);
					renderTrackList(playlist);
					i = 0;
					playTrack(i);
				}
        //اگر آرایه alltracks و لیست پخش خالی باشد آنگاه پخش کننده را غیرفعال کن
				else{
					wavesurfer.empty();
					clearInterval(timer);
					$('#cover-art-big').css("background", "");
					$('#cover-art-small').attr('src', 'assets/img/default.png');
					$('#expand-bar').addClass('hidden');
					$('#track-desc').html('هیچ ترانه برای پخش بارگذاری نشده است');
					$('#current').text('-');
					$('#total').text('-');
					$('#container').addClass('disabled');

					startPlayerWhenReady()
				}
			}

		}
	}

});

//هنگامی که روی کاور کلیک شد آنگاه لیست پخش را ببند
$('#container').on('click', function (e) {
	if(e.target==this){
		$('#expand-bar').addClass('hidden');
	}
});



/*----------------------
	قابلیت جست و جو
-----------------------*/

var clearSearchDelay;

searchInput.on('keydown', function (e) {

	if(e.keyCode == 27){
		$(this).val('');
		$(this).trigger('input');
	}
	else if(e.keyCode == 13) {

		e.preventDefault();

		if ($(this).val().trim().length) {

			var searchString = $(this).val().trim();
			searchTracks(searchString);
			clearTimeout(clearSearchDelay);

		}
	}

});

searchInput.on('input', function(e){
	e.preventDefault();
	var searchStr = $(this).val().trim();

	clearTimeout(clearSearchDelay);

	if(!searchStr.length) {
		searchInput.val('');

		searchTracks();
	}
	else {

		clearSearchDelay = setTimeout(function() {
			if (searchStr.length) {
				searchTracks(searchStr);
			}
		},۷۰۰);
	}
});

function searchTracks(query){

	query = query || "";
	query = query.toLowerCase();

	temporarySearchPlaylist = allTracks.slice(0);

	if(query.length){
		temporarySearchPlaylist = temporarySearchPlaylist.filter(function (tr) {
			if(tr.artist.toLowerCase().indexOf(query) != -1 || tr.title.toLowerCase().indexOf(query) != -1 || tr.album.toLowerCase().indexOf(query) != -1){
				return tr;
			}
		});
	}

  //بارگذاری لیست جدید نتیجه جست و جو
	renderTrackList(temporarySearchPlaylist);

}


/*-------------------
 	قابلیت های کمکی
--------------------*/

//شروع خودکار لسیت پخش  بعد از بارگذاری فایل
function startPlayerWhenReady(){


	var interval = setInterval(function () {
		if(playlist[0]){
			playTrack(0);
			$('#container').removeClass('disabled');
			clearInterval(interval);
		}
	},۲۰۰);
}


//ایجاد  اچ تی ام ال برای آهنگ موجود در لیست پخش
function returnTrackHTML(song, index){

	var html = '<li class="track';

	if(song.playing){
		html+= ' active'
	}

	html+='" data-index="'+ index +'">' +
	'<div>' +
	'<span class="overlay"><i class="fa fa-play"></i></span>' +
	'<img src="' + song.picture + '"/>' +
	'</div>' +
	'<div>'	+
	'<p class="title">' + song.title + '</p>' +
	'<p class="artist">' + song.artist + '</p>' +
	'<span title="حذف ترانه از لیست پخش" class="remove-track">×</span>' +
	'</div>' +
	'</li>';

	return html;
}


//نوشتن محتوای لیست پخش در داخل تب لیست پخش موجود در اچ تی ام ال
function renderTrackList(list){
	$('.track').remove();

	var html = list.map(function (tr,index) {
		return returnTrackHTML(tr,index);
	}).join('');

	$('#list').append($(html));
}


//نمایش زمان بصورت دقیقه:ثانیه
function formatTime(time){
	time = Math.round(time);

	var minutes = Math.floor(time / 60),
		seconds = time - minutes * 60;

	seconds = seconds < 10 ? '0' + seconds : seconds;

	return minutes + ":" + seconds;
}


//Wavesurfer پاسخ
$(window).on('resize', function(){
	if($('#wave').is(":visible")) {
		wavesurfer.drawer.containerWidth = wavesurfer.drawer.container.clientWidth;
		wavesurfer.drawBuffer();
	}
});

ما در اینجا سه کار اساسی را انجام دادیم که عبارتند از :

۱- تنظیمات مربوط به لیست پخش و عملکرد آن

۲- قابلیت جست و جو کردن در داخل لیست پخش

۳- قابلیت های کمکی  دیگر

چون این بخش جاوااسکریپت به طور کامل در داخل کدها توضیح داده شده است نیازی به توضیحات اضافی ندارد.

کد های CSS

ما در اینجا فقط بخش کوچکی از استایل مربوط به پخش کننده را برایتان می آوریم .

#cover-art{
	display: -webkit-flex;
	display: flex;
	-webkit-flex: 1 auto;
	flex: 1 auto;
	position: relative;
	overflow: hidden;
	pointer-events: none;
}

#cover-art-big{
	-webkit-flex: 1;
	flex: 1;
	background-color: #26292C;
	background-size: cover;
	-webkit-filter: blur(7px);
	margin: -12px ;
}

#cover-art-small{
	position: absolute;
	width: 500px;
	height: 500px;
	top: 50%;
	left: 50%;
	margin: -250px auto auto -250px;
	border-radius: 2px;
}
------------------------
#control-bar{
	display: -webkit-flex;
	display: flex;
	color: #3D464A;
	text-align: left;

	position: relative;
	z-index: 10;

}

#container.disabled #control-bar{
	pointer-events: none;
}

.player-control{
	-webkit-flex: 2;
	flex:2;
	display: -webkit-flex;
	display: flex;
}

.player-control div{
	-webkit-flex: 1;
	flex: 1;
	background-color: #fff;
	text-align: center;
	line-height: 60px;
	height: 100%;
	cursor: pointer;
}

#container.disabled .player-control div{
	color: #758389;
}

#shuffle-button,
#repeat-button{
	line-height: 60px;
	color: #758389;
	position: relative;
}

#shuffle-button.active,
#repeat-button.active{
	line-height: 60px;
	color: #000;
}

#repeat-button i span{
	display: none;
	position: absolute;
	font: bold 12px sans-serif;
	color: rgb(71, 91, 118);
	top: 6px;
	left: 13px;
}
--------------------
#list{
	position: absolute;
	left:0;
	top:55px;
	bottom:60px;
	list-style: none;
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}


#list li:nth-child(even){
	background-color: #F8F7F9;
}

.track{
	padding: 18px;
	cursor: pointer;
	overflow: hidden;
	color: #3D464A;
	position: relative;
}

.track.active{
	background-color: #DBE0E4!important;
}

.track p.title{
	font-size: 18px;
	margin-top: 14px;
	margin-bottom: 4px;
	font-weight:bold;
}

.track p.artist{
	font-weight: normal;
}

.track div:first-child{
	position: relative;
	width: 70px;
	height: 70px;
	margin-right: 25px;
	float: left;
}

.track .overlay{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.4s;
	opacity: 0;
	border-radius: 3px;
}

.track.active .overlay{
	opacity: 1;
}

.track div img{
	width: 100%;
	border-radius: 3px;
}

.track span i{
	color: #fff;
	font-size: 22px;
	line-height: 70px;
	left: 28px;
	position: absolute;
	transition: 0.4s;
	opacity: 0;
}

.track .remove-track{
	position: absolute;
	font-size: 22px;
	top: 12px;
	right: 18px;
	color: rgb(121, 121, 121);
	display: block;
}

.track.active span i{
	opacity: 1;
}

ما در ابتدا تنظیمات مربوط به استایل کاور آهنگ ها را انجام دادیم سپس استایل کنترلر ها رو نوشتیم و در آخر استایل مربوط به لیست پخش را برایتان آوردیم و چون کدهای بالا به دلیل سادگی نیازی به توضیح ندارند ما نیز از توضیح آنها صرف نظر می کنیم.

پایان

+2
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 − هشت =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>