Собираем небольшой плеер:
var lID='', lFile='', lTime='', repick=0;
mp3='';mp3.type='audio/mpeg';mp3.src='';
aPlayer = {
call:function(id,file){
if(lID!=''){aPlayer.pause('stop')}lID=id;lFile='"'+file+'"';
mp3=new Audio(file);mp3.src=file;mp3.play();
if(mp3.canPlayType('audio/mpeg;')){
$('#song'+id+' .aPlay').attr({onclick:'aPlayer.pause()',style:'background-position-y:-16px;'});
mp3.addEventListener('timeupdate',function(){
aDPr = mp3.currentTime/mp3.duration*100;
aLPr = mp3.buffered.end(0)/mp3.duration*100;
$('#song'+id+' .aLPr').attr({style:'width:'+aLPr+'%;'});
$('#song'+id+' .aDPr').attr({style:'width:'+aDPr+'%;'});
mc=Math.floor(mp3.currentTime/60)<10?'0'+Math.floor(mp3.currentTime/60):Math.floor(mp3.currentTime/60);
sc=Math.floor(mp3.currentTime-(mc*60))<10?'0'+Math.floor(mp3.currentTime-(mc*60)):Math.floor(mp3.currentTime-(mc*60));
md=Math.floor(mp3.duration/60)<10?'0'+Math.floor(mp3.duration/60):Math.floor(mp3.duration/60);
sd=Math.floor(mp3.duration-(md*60))<10?'0'+Math.floor(mp3.duration-(md*60)):Math.floor(mp3.duration-(md*60));
lTime=''+md+':'+sd+'';
$('#song'+id+' .aTime').html(''+mc+':'+sc+' - '+md+':'+sd+'');
if(mp3.currentTime==mp3.duration && repick==0){aPlayer.nextPlay()}
});
$('#song'+id+' .aEPr').mousedown(function(e){
offset = $(this).offset();
mp3.currentTime = ((e.pageX - offset.left)/$(this).width())*mp3.duration;
});
}else{alert('Ваш браузер не поддерживает mp3 :(');}
},
pause:function(type){
if(type=='stop'){$('#song'+lID+' .aPlay').attr({onclick:'aPlayer.call('+lID+','+lFile+')',style:''});$('#song'+lID+' .aLPr').attr({style:'width:0%;'});$('#song'+lID+' .aDPr').attr({style:'width:0%;'});$('#song'+lID+' .aTime').html(lTime);mp3.pause();}
else if(type=='play'){$('#song'+lID+' .aPlay').attr({onclick:'aPlayer.pause()',style:'background-position-y:-16px;'});mp3.play()}
else{$('#song'+lID+' .aPlay').attr({onclick:'aPlayer.pause("play")',style:''});mp3.pause();}
},
repick:function(){if(repick==0){repick=1;mp3.loop=true;}else{repick=0;mp3.loop=false;}},
mini:function(mId){
$('#song'+mId+' .aMin').attr({style:'-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);'});$('#song'+mId+' .aMinL').fadeIn();
$('#song'+mId+' .aMinL').hover(function(){$('#song'+mId+' .aMin').attr({style:'-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);'});$('#song'+mId+' .aMinL').fadeIn();},function(){$('#song'+mId+' .aMinL').fadeOut();$('#song'+mId+' .aMin').attr({style:''});});
},
nextPlay:function(){
var start=0, nIDS='';
$('div [id^=song]').each(function(){
if(start==1){nIDS = $(this).attr('id');start=0;}
if($(this).attr('id')=='song'+lID+''){start=1}
});
if(nIDS!=''){$('#'+nIDS+' .aPlay').click()}else{aPlayer.pause()}
На просторах нашли
JS Audio Visualizer Возможно ли как нибудь добавить его в плеер ?
