Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по Flash / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Музыкальный плеер на подобии плеера вконтакте

Здравствуйте уважаемые читатели сайта ajaxs.ru.  Многие из веб разработчиков наверно пытались вставлять на свой сайт аудиоплеер. В сети интернет таких флеш проигрывателей довольно большое количество, но у всех них, как правило, есть один недостаток - это дизайн. И что же делать, если понравившийся вам плеер ну никак не вписывается в дизайн вашего сайта? Подстраиваться под него, думаю не самый лучший вариант. Пошарив немного в интернете, я нашел такую интересную штуку как soundmanager. Как и все аудио плееры для сайта он работает при помощи флеш, но его отличительной особенностью является то, что он невидим, а элементы управления это обычные html элементы, дизайн которых зависит полностью от фантазии разработчика (ссылки, картинки и т.д.). Данный плеер имеет довольно много возможностей, о которых можно почитать на официальном сайте. Я бы хотел вам показать, как с помощью него можно реализовать плеер на подобие плеера в контакте. Конечно, он будет отличаться от последнего, в нашем случае в нем нельзя будет регулировать громкость и в нем не будет прогрессбара. Ладно, хватит болтовни преступим к практике.

I?eia?

Для начала нам понадобится сам плеер и javascript файл для управления плеером. Качаем их и кидаем в любую папку на сайте например soundmanager. Теперь нужны сами музыкальные файлы. Берем несколько понравившихся и копируем в папку mus. Так же для удобства нам еще пригодится jquery. Теперь подключим на страницу все необходимое:

<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script
type="text/javascript" src="soundmanager/soundmanager2-jsmin.js"></script>
<script
type="text/javascript">
soundManager.url = 'soundmanager/soundmanager2.swf';
soundManager.debugMode = false;
soundManager.consoleOnly = false;
</script>

Далее создадим на странице блок в котором и будет располагаться весь плеер:

<div id="ajaxsPlayer"></div>

Вот код для одной песни. Он будет содержать название песни и две кнопки воспроизвести и пауза, которые мы будем поочередно сменять при помощи jquery:

<div class="track">
   <div
class="button">
      <div
class="play" id="1" file="Файл песни"></div>
      <div
class="pause"></div>                       
   </div>
<div
class="nameTrack">Название песни</div><div class="clear"></div>
</div>

Чтобы для каждой песни не писать этот код заново, мы сделаем так, чтобы песни у нас автоматически сканировались из нашей папки и подставлялись на страницу.

<?php
$dir = "mus";
$files = scandir($dir);
$id = 1;
for($i=2; $i<count($files); $i++){
print <<<HERE
<div class="track">
   <div class="button">
   <div class="play" id="$id" file="$files[$i]"></div>
   <div class="pause"></div>                       
</div>
<div class="nameTrack">$files[$i]</div><div class="clear"></div>
</div>
HERE
;
$id++;
}
?>

$dir – это папка, в которой лежит наша музыка. $id – это просто порядковый номер песен, в дальнейшем он нам еще пригодится. С помощью цикла мы выводим на страницу названия всех песен и у каждой из них должны быть элементы управления. Теперь, чтобы все это приняло божеский вид, добавим немного стилей:

#ajaxsPlayer{
width:600px;
margin:auto;
}
.button{
float:left;
}
.play{
width:40px;
height:40px;
background-image:url(images/play.png);
display:block;
cursor:pointer;
}
.pause{
width:40px;
height:40px;
background-image:url(images/pause.png);
display:block;
cursor:pointer;
display:none;
}
.nameTrack{
font: 15px/170% Helvetica, Verdana, sans-serif;
color: #666666;
padding:5px 45px;
}
.clear{
clear:both;        
}

Все что нам осталось это написать немного javascript кода для того чтобы можно было управлять воспроизведением песен:

var file,id,oldId,oldFile,player=false;
$(function(){
  $('.play').click(function(){
     id = $(this).attr('id');
     file = $(this).attr('file');                
     if(player == true && id != oldId){
         stop(oldFile);
         $('#'+oldId).next().fadeOut(10);
         $('#'+oldId).delay(10).fadeIn(10);
     }
     player = true;
     oldId = id;                          
     oldFile = file;                    
     play(file,id);
     $(this).fadeOut(200);
     $(this).next().delay(200).fadeIn(300);
  });
});
$(function(){
  $('.pause').click(function(){
     file = $(this).prev().attr('file');
     pause(file);
     $(this).fadeOut(200);
     $(this).prev().delay(200).fadeIn(300);
  });
});

function play(file,id){
soundManager.createSound(file,'mus/'+file);
soundManager.setVolume(file, 50);
soundManager.play(file,{onfinish: function() {
  id = parseFloat(id);
  newId = id + 1;
  newFile = $('#'+newId).attr('file');
  if(newFile != undefined){
     play(newFile,newId);
     $('#'+id).next().fadeOut(10);
     $('#'+id).delay(10).fadeIn(10);
     $('#'+newId).fadeOut(10);
     $('#'+newId).next().delay(10).fadeIn(10);
  }else{
     $('#'+id).next().fadeOut(10);
     $('#'+id).delay(10).fadeIn(10);
  }                
}
});
}
function pause(file){
soundManager.pause(file);
}
function stop(oldId){
soundManager.stop(oldId);
}

В коде у нас два события: нажатие на кнопку воспроизвести и нажатие на кнопку паузы. Так же есть три функции: воспроизвести, пауза и остановить. При нажатии по кнопке воспроизвести мы определяем название файла и его id. Далее мы проверяем, был ли уже запущен какой-нибудь трек. Если да то останавливаем его, если же нет, то просто начинаем воспроизводить тот, который мы выбрали. При этом мы запомнили эти данные и перевели переменную player в значение true, что означает то, что плеер мы запустили. Так же для красоты мы применили небольшие анимационные эффекты при помощи jquery. При нажатии на паузу мы просто получаем название трека и просто приостанавливаем его. Теперь более подробно рассмотрим функцию play, поскольку на функции pause и stop нет смысла останавливаться. Функции play мы передаем два параметра это имя трека и его id. Далее мы указываем плееру, какую песню нужно воспроизводить и указываем громкость. Воспроизводим данную песню. Определяем название файла следующего трека, который будет проигрываться после окончания. Далее с помощью простого условия мы выясняем, существует ли следующий трек если да то запускаем его, если же такого нет (undefined), то просто останавливаем воспроизведение. Ну вот в общем то и все. Из недостатков хотелось бы отметить то, что имена файлов песен не могут быть русскими, а так же замечены проблемы при воспроизведении песен, имена которых содержат верхний апостроф (Afrojack feat. Global Deejays - Freakin' Out ( bootleg Dj WalkmaN ).mp3).

Автор: Евгений Бочкарев Урок добавлен: 19 Октября 2011 в 13:10 Просмотров: 24772

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (69)

#70 Евгений 13-03-2014 в 19:20
Да можно, я занимался этим одно время, но не доделал еще до конца
#71 Роман 14-03-2014 в 13:42
Ну тогда у меня возможно не совсем правильный вопрос а можно будет сделать трек бар с помощью тега range просто я пробовал но так и не смог сделать что бы он реагировал на изменения ползунка.
#72 Евгений 15-03-2014 в 17:03
Думаю можно. Я правда делал не через него. Вот что у меня получилось http://m.ajaxs.ru/
#73 Олег 19-03-2014 в 19:25
скинь исходники плиз
http://m.ajaxs.ru/
#74 Александр 27-03-2014 в 14:11
Скинь исходник плизз
http://m.ajaxs.ru/
#75 winultra 27-03-2014 в 14:25
можешь кинуть исходники на почту
http://m.ajaxs.ru/
#76 reznikoff161 29-04-2014 в 23:07
Скинь исходник пожалуйста http://m.ajaxs.ru/
#77 Red 22-08-2014 в 10:32
Скиньте исходник на почту(Pro100belkov@mail.u)
http://m.ajaxs.ru/
#78 Artem 04-01-2015 в 10:29
Скинь исходник m.ajaxs.ru пожалуйста. kyput_tpaby@spaces.ru
#79 tomalko 11-01-2015 в 22:23


;(function($) {
$.fn.audioPlayer = function(playlist, testPlaer){
var timeTrack; // время песни
var width = 400; // ширина прогресса
var progres = $('#progres');
var per = (width/timeTrack*(1000/1000)); // ширина временного интервала
var objpl, progress, curtime, position, coords, startwidth = 0, tr, i = 0, res, tt, statusplayer = false;
var treckCurent = 0; // Текущий трек

function roundtime(second){
return (Math.floor((second%3600)/60)+':'+((((second%3600)%60).toString().length == 1)?'0'+((second%3600)%60):((second%3600)%60)));
}
// Обновление времени
function timestart(){
curtime++;
curtimes = roundtime(curtime);
$('.timeStart').text(curtimes);
}
// Остановка времени
function timestop(){
clearInterval(progress);
}
// Функция запуска плеера treckCurent - текущий трек, res - флаг сброса
function startplayer(curent, res){
if (typeof(curent) != "undefined" && typeof(res) != "undefined") {
// обнуляем прогресс при переключении трека
if((res == 1) && (statusplayer == true)){
i = 0;
startwidth = 0;
progres.css('width', '0px');
clearInterval(tr);
timestop();
objpl.stop();
}
treckCurent = (curent);
statusplayer = true;
tr = setInterval(function() { // Прогресбар
startwidth += (width/playlist[curent][2]*(100/1000)); // ширина временного интервала
if(startwidth <= width){
if (testPlaer == true) {
$('#TestAjaxsPlayer').html('<pre>Debugging: <tt style="color:#00CC00;">On</tt><br>Track: <tt>'+(treckCurent+1)+'</tt> SizeProgress: <tt>'+startwidth.toFixed(3)+'</tt> / Time: <tt>'+(objpl.position/1000).toFixed(3)+'</tt></pre>');
}
progres.css('width', ((objpl.position/1000)*(width/playlist[curent][2]*(1000/1000)))).toFixed(3);
} else {
clearInterval(tr);
}
return startwidth;
}, 100);
$('#pult').removeClass().addClass('pause');
objpl = soundManager.createSound({
id: playlist[curent][1],
url:playlist[curent][1],
volume: 100
}).play({
onfinish: function() {
curent++;
startplayer(curent, 1);
}
});
curtime = Math.round(objpl.position/1000);
progress = setInterval(timestart, 1000);
$('.track').removeClass('active');
$('#id_'+curent).addClass('active');
$('#trackCurent').text('Track: ' + (parseInt(curent)+1) + ' Name: ' + playlist[curent][0]);
$('.timeEnd').text(roundtime(playlist[curent][2]));
}
}

$("#progresbar").mousemove(function(e){
var offset = $("#progresbar").offset();
coords = (e.clientX - offset.left); // текушая координата
}).live("click", function(){
position = (coords/(width/playlist[treckCurent][2]));
curtime = Math.round(position);
progres.animate({width: coords}, 300);
objpl.setPosition(position*1000);
startwidth = coords;
});

if (typeof(treckCurent) != "undefined") {
$('.play').live("click", function(){
startplayer(treckCurent, 0);
});

$('.pause').live("click", function(){
clearInterval(tr);
timestop();
$('#pult').removeClass().addClass('play');
statusplayer == false;
objpl.pause();
});

$('div.track').live('click', function() {
startplayer(parseInt($(this).attr('rel')), 1);
return false;
});

$('#back').live('click', function() {
if(treckCurent > 0) {
startplayer(treckCurent-1, 1);
}
return false;
});

$('#next').live('click', function() {
if (treckCurent < (playlist.length)-1) {
startplayer(treckCurent+1, 1);
}
return false;
});
}
$('#trackCurent').text(playlist[0][0]);
$('.timeEnd').text(roundtime(playlist[0][2]));
};
})(jQuery);
//************* ------------------- ***************
$(document).ready(function() {
$(function(){
soundManager.url = ('swf/soundmanager2.swf');
soundManager.debugMode = false;
soundManager.consoleOnly = false;
var file, id, oldId, oldFile, player = true;
var playlist = new Array();
var $tracks = '';
function strPad(i,l,s){var o=i.toString();if(!s){s='0';}while(o.length<l){o=s+o;}return o;};
$.ajax({type:"POST",url:"ajax.php",data:"treck=audio",dataType:"json",success:function(playlist){
jQuery.each(playlist, function(i) {
if (playlist[i][2]>0) {
$tracks += ('<div class="track" rel="'+(i)+'" id="id_'+(i)+'"><span id="soundaid">'+strPad((i+1),parseInt(playlist.length).toString().length)+' </span>'+(playlist[i][0])+'<span class="duration">'+(Math.floor(playlist[i][2]/60)+":"+(((playlist[i][2]%60) < 10) ? '0'+playlist[i][2]%60 : playlist[i][2]%60))+'</span></div>');
} else {
$tracks += ('<div class="track"><span style="color:red;">Error loading!</span></div>');
}
});
$('#trackList').replaceWith($tracks);
$('#ajaxsPlayer').audioPlayer(playlist, true); //Debugging: default false
return false;
}});
});
});

/******************************************************************************************* php
$array = array(
array("Ты меня не покидай!", "http://127.0.0.1/audio/128.mp3", "228"),
array("Ты меня не покидай!", "http://127.0.0.1/audio/124.mp3", "224")
);
$js_json = json_encode($array);
print ($js_json);

$.ajax({type:"POST",url:"ajax.php",dataType:"json",cache:false,success:function(playlist){
Query.each(playlist, function(i) {
$tracks += ('<div class="track" rel="'+(i)+'" id="id_'+(i)+'"><span id="aid">'+strPad((i+1),parseInt(playlist.length).toString().length)+' </span>'+(playlist[i][0])+'<span class="duration">'+(Math.floor(playlist[i][2]/60)+":"+(((playlist[i][2]%60) < 10) ? '0'+playlist[i][2]%60 : playlist[i][2]%60))+'</span></div>');
});
$('#trackList').replaceWith($tracks);
$('#ajaxsPlayer').audioPlayer(playlist, true); //Debugging: default false
}});

********************************************************************************************/

/******************************************************************************************* js
var playlist = [
["Ты меня не покидай!", "http://127.0.0.1/audio/123.mp3", "224"],
["Ты меня не покидай!", "http://127.0.0.1/audio/124.mp3", "225"]
];

jQuery.each(playlist, function(i) {
var sec = (Math.floor(playlist[1][2]/60)+":"+(((playlist[1][2]%60) < 10) ? '0'+playlist[1][2]%60 : playlist[1][2]%60))
$tracks += ('<div class="track" rel="'+(i)+'" id="id_'+(i)+'"><span id="aid">'+strPad((i+1), parseInt(playlist.length).toString().length)+' </span>'+(playlist[i][0])+'<span class="duration">'+(sec)+'</span></div>');
});
$('#trackList').replaceWith($tracks);
$('#ajaxsPlayer').audioPlayer(playlist, true); //Debugging: default false
************************************************************************************************/

/******************************************************************************************* html
<div id="ajaxsPlayer">
<div id="playTrack">
<div id="TestAjaxsPlayer"></div>
<center id="trackCurent"></center>
<div id="progresbar"><div id="progres"><div id="marker"></div></div></div>
<div id="timeline"><span class="timeStart">0:00</span><span class="timeEnd">0:00</span></div>
<ul class="panelpult"><li id="back"></li><li id="pult" class="play"></li><li id="next"></li></ul>
</div>
<div id="trackList"></div>
<div id="footer"></div>
</div>
************************************************************************************************/

/******************************************************************************************* css
*{
padding: 0;
margin: 0;
border: 0;
}

body{
width: 100%;
height: 100%;
font-family: Tahoma, Helvetica, sans-serif;
font-size: 11px;
}

#ajaxsPlayer{
position: relative;
color: #AAAAAA;
width: 460px;
margin: 10px auto;
border: 1px solid #AAA;
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background: #222222;
}

#playTrack{
height: 95px;
padding: 5px 0;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAABpCAMAAAH3pNPLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REJCMkI5NzI5OEU1MTFFNEJCQkJBNDc3ODkzOEQxMjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REJCMkI5NzM5OEU1MTFFNEJCQkJBNDc3ODkzOEQxMjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQkIyQjk3MDk4RTUxMUU0QkJCQkE0Nzc4OTM4RDEyMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQkIyQjk3MTk4RTUxMUU0QkJCQkE0Nzc4OTM4RDEyMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PldkYUIAAAKmUExURQMEBAQEBAQF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");
cursor: default;
}

#trackCurent{
padding: 3px 20px 0px 20px;
color: #CCCCCC;
font-size: 13px;
}

#timeline{
width: 426px;
margin: 4px auto;
}

.timeEnd{
float: right;
}

#progresbar{
width: 400px;
background-color: #666666;
border: 1px solid #aaa;
height: 4px;
margin: 10px 30px;
cursor: pointer;
border-radius: 3px;
}

#progres{
width: 0px;
background-color: #AAAAAA;
height: 4px;
}

#marker{
height: 10px;
width: 10px;
background-color: #888888;
float: right;
position: relative;
top: -3px;
right: -5px;
border-radius: 5px;
}

#ajaxsPlayer .track {
padding: 6px 17px;
border-top: 1px solid #666666;
background-color: #191A19;
}

.track .duration{
float:right;
}

.track {
font-size:11px;
cursor: pointer;
}

.track.active{
font-weight:700;
color: #CCCCCC;
}

.panelpult{
width: 108px;
list-style: none;
margin: -10px auto 3px auto;
}

.panelpult li{
margin: 0px 6px;
padding: 0px;
}

.play{
background: url('../img/pult.png') 2px -2px;

}

.pause{
background: url('../img/pult.png') 28px -2px;

}

#soundaid {
margin: 0px 10px 0 0;
}

#pult, #back, #next {
display: inline-block;
cursor: pointer;
height: 22px;
}

#pult{
width: 22px;
}

#back{
width: 18px;
background: url('../img/pult.png') 185px -1px;
margin-right: 10px;
}

#next{
width: 18px;
background: url('../img/pult.png') 210px -1px;
margin-left: 10px;
}

#footer {
width: 100%;
height: 6px;
background: #303030;
border-top: 1px solid #666666;
}

#TestAjaxsPlayer {
top: 80px;
left: 4px;
position: absolute;
font-size: 10px;
}

#TestAjaxsPlayer tt {
color: #CC0000;
font-size: 10px;
}
********************************************************************************************/


Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки