Трэк: lolishit - Schoolgirl With Hair-Drills
Собственно основной целью было не написать что-то завершенное, а попробовать возможности html5.
В целом все достаточно просто, поэтому просто пиведу код.
$('#simplePlayer').each(function() {
// audio
var player = this;
// прогрессбар
var bar = $('.audio-bar');
// ширина прогрессбара
var barWidth = bar.parent().width();
// обновление прогрессбара
var barChange = false;
// "количество пикселей" в секунде
var perSecond = 0;
// "количество секунд" в пикселе
var perPixel = 0;
// обновление прогрессбара
function changeBar() {
bar.width(player.currentTime * perSecond);
}
// начало воспроизведения
player.addEventListener(
'playing',
function() {
// начинаем обновлять прогрессбар
barChange = setInterval(
changeBar,
500
);
}
);
// пауза
player.addEventListener(
'pause',
function() {
// перестаем обновлять прогрессбар :)
clearInterval(barChange);
barChange = false;
changeBar();
}
);
// конец воспроизведения
player.addEventListener(
'ended',
function() {
// так же перестаем обновлять прогрессбар
clearInterval(barChange);
barChange = false;
}
);
// получение метаданных
player.addEventListener(
'loadedmetadata',
function() {
// считаем коэффиценты
perSecond = barWidth / player.duration;
perPixel = player.duration / barWidth;
// биндим
// при клике на прогрессбар - перемотка
$('.audio-bg').click(function(e) {
var x = e.pageX - this.offsetLeft;
player.pause();
player.currentTime = x * perPixel;
player.play();
});
// кнопка play
$('#play').click(function() {
player.play();
});
// кнопка pause
$('#pause').click(function() {
player.pause();
});
// кнопка stop
$('#stop').click(function() {
player.pause();
player.currentTime = 0;
});
// увеличение громкасти
$('#volumep').click(function() {
var v = player.volume + 0.1;
player.volume = v >= 1 ? 1 : v;
});
// уменьшение громкости
$('#volumem').click(function() {
var v = player.volume - 0.1;
player.volume = v <= 0 ? 0 : v;
});
}
);
});