Всем привет. Делаю плеер на сайте, используя html5, тег <audio>. Все бы замечательно, но стандартный плеер приходится менять.
На странице выводится несколько аудиозаписей, поэтому нужно каждый отслеживать по id. Какие шаги я сделал:
Выводится тег <audio src='/puth/audio.mp3' id='audio_ID'></audio> Таким образом, стандартный плеер не видно и теперь можно работать с javascript.
Написал несколько функций:
var Audio = {
play: function(id)
{
obj = ge(id);
if(!obj){
return false;
}
obj.play();
return;
}
,stop: function(id)
{
obj = ge(id);
if(!obj){
return false;
}
obj.pause();
return;
}
,stopAll: function()
{
obj = $('audio');
if(!obj){
return false;
}
obj.pause();
return;
}
,PlayPause: function(id)
{
obj = ge(id);
if(obj.paused){
this.play(id);
$('#icon_play_'+id).removeClass('icon-play').addClass('icon-pause');
}else{
this.stop(id);
$('#icon_play_'+id).removeClass('icon-pause').addClass('icon-play');
}
}
}
Написан стандартный функционал (Играть, остановить, переключатель).
Что собственно хочу сделать, - создать ползунок временного проигрывания: Отображение текущей позиции проигрывания, изменение позиции проигрывание, показ буферизации, изменение громкости с помощью ползунка.
Принцип ползунка такой:
<div class="currentTime"><div class="buffer" style="width: 50%;"><div class="pointTime" style="width: 10%;"></div></div></div>
Нужно создать событие для отображения изменений. Но представления не имею по реализации. Так же хотелось бы получить советы в направление работы над изменением ползунка (движении и изменение текущего времени воспроизведения).
Любые советы, наброски, статьи будут к стати.