Доброго времени суток!
Я обратил внимание: вы используете Flash-проигрыватель для замечательной песни Woodkid в информационной панели. Хороший выбор! Однако меня смущает Flash как основа для проигрывателя. Возможно, вы знаете, что популярные браузеры выводят Flash из общественного пользования шаг за шагом: например, разработчики Firefox и Chrome в 2017-ом году установили поведение Flash-элементов на сайтах "по нажатию", не позволяя им запускаться самостоятельно. Причинами тому называются наличие дыр в системе безопасности Flash, а также то, что стандарт HTML5 способен справиться с многим, что под силу Flash, с большей производительностью. Поэтому - и из-за моей любви к коду - я написал проигрыватель аудио на HTML/CSS/JS.
Плеер поддерживается всеми популярными браузерами (лично удалось проверить на Chrome, Firefox и Opera, и я доверяю информации об остальных браузерах на caniuse.com). Он максимально точно повторяет функции и внешний вид оригинала, а кроме того, является абсолютно настраиваемым и расширяемым без применения дополнительных приложений. В данный момент плеер рассчитан на одну песню (Iron уже встроена в код в меняется в HTML плеера); если ваш специалист по коду разбирается в представленном ниже JS, ему/ей не составит труда расширить функционал на целый плейлист.
JS (с комментариями)
Код://
// ironPlayer / переменные
//
var ironMusic = document.getElementById("iron-music"), // плеер
ironPlaybutton = document.getElementById("iron-playbutton"), // кнопка проигрывания/паузы
ironTimeline = document.getElementById("iron-timeline"), // полоса проигрывания (серая)
ironLoadline = document.getElementById("iron-loadline"), // полоса загрузки файла (золотая)
ironPlayhead = document.getElementById("iron-playhead"), // ручка регулирования проигрывания
ironTimelineWidth = ironTimeline.offsetWidth, // длина полосы проигрывания
ironDuration, // длительность песни (рассчитывается во время начала загрузки)
ironLoadingProgress, // прогресс загрузки
ironHideLoadingBarOnComplete = false, // скрывать ли полосу загрузки при полной загрузке песни (по умолчанию: нет)
onPlayhead = false; // была ли кликнута ручка проигрывателя
//
// ironPlayer / прослушиватели событий
//
ironMusic.addEventListener("progress", ironLoadedUpdate); // срабатывает при прогрессе в загрузке файла
ironMusic.addEventListener("timeupdate", ironTimeUpdate, false); // срабатывает при изменении момента проигрывания песни
ironMusic.addEventListener("canplaythrough", getDuration, false); // срабатывает при получении метаданных о песне (для получения длины песни)
ironPlayhead.addEventListener('mousedown', mouseDown, false); // при клике на ручке проигрывателя
window.addEventListener('mouseup', mouseUp, false); // при отжатии клика
//
// ironPlayer / основные функции
//
// обновление позиции ручки проигрывателя при изменении момента проигрывания
function ironTimeUpdate () {
// перемещает ручку проигрывателя по линии, исходя из момента проигрывания
ironPlayhead.style.marginLeft = 100 * (ironMusic.currentTime / ironDuration) + "%";
// изменяет кнопку проигрывателя на "проигрывать", если песня закончилась
ironMusic.currentTime === ironDuration && (ironPlaybutton.className = "play");
};
// обновление прогресса загрузки
function ironLoadedUpdate () {
// считывает, есть ли информация о загруженных данных и рассчитывает прогресс, исходя из длины файла в буфере загрузки
ironMusic.buffered.length && (ironLoadingProgress = ironMusic.buffered.end(ironMusic.buffered.length - 1));
// изменяет ширину полосы загрузки, исходя из прогресса оного
ironLoadline.style.width = parseFloat(100 * (ironLoadingProgress / ironDuration), 2) + "%";
// если разрешено (см. выше) и если прогресс загрузки равен 100%, скрыть полосу загрузки
(ironHideLoadingBarOnComplete && ironLoadingProgress === ironDuration && ironDuration > 0) && ironLoadline.classList.add("hidden");
};
// проигрывание песни или постановка на паузу, в зависимости от текущего состояния
function ironPlay () {
// если на паузе - играть; иначе - поставить на паузу
ironMusic.paused ? (ironMusic.play(), ironPlaybutton.className = "pause") : (ironMusic.pause(), ironPlaybutton.className = "play");
};
// установка позиции ручки проигрывателя на линии
function ironMovePlayhead (event) {
// количество сдвига по линии в пикселях
var shift = event.clientX - getPosition(ironTimeline);
// если сдвиг - в рамках линии - применить его к ручке;
// иначе - поставить ручку на начало или конец линии, соответственно
(shift >= 0 && shift <= ironTimelineWidth) && (ironPlayhead.style.marginLeft = shift + "px");
shift < 0 && (ironPlayhead.style.marginLeft = "0px");
shift > ironTimelineWidth && (ironPlayhead.style.marginLeft = ironTimelineWidth + "px");
};
//
// ironPlayer / события мыши
//
// при клике
function mouseDown () {
// указать, что клик был по ручке
onPlayhead = true;
window.addEventListener('mousemove', ironMovePlayhead, true); // при движении мыши - двигать ручку проигрывателя за ней
ironMusic.removeEventListener('timeupdate', ironTimeUpdate, false); // отменить отслеживание времени в процессе движения (против эффекта радио)
};
// при отжании клика
function mouseUp (event) {
// если клик был сделан по ручке, то:
onPlayhead && (
ironMovePlayhead(event), // сдвинуть/оставить ручку по координатам
window.removeEventListener('mousemove', ironMovePlayhead, true), // прекратить двигать ручку за мышкой
ironMusic.currentTime = ironDuration * clickPercent(event), // применить момент проигрывания по позиции ручки
ironMusic.addEventListener('timeupdate', ironTimeUpdate, false) // вновь следить за проигрыванием песни
);
// позволить следить за ручкой при клика на ней в будущем
onPlayhead = false;
};
//
// ironPlayer / дополнительные функции
//
// нахождение процента от ширины линии проигрывания
function clickPercent (event) { return (event.clientX - getPosition(ironTimeline)) / ironTimelineWidth; };
// нахождение позиции элемента (используется для линии проигрывания)
function getPosition (el) { return el.getBoundingClientRect().left };
// расчёт длительности песни
function getDuration () { ironDuration = ironMusic.duration };
Я буду просматривать гостевую книгу ближайшие пару дней. Если что-то не работает - дайте мне знать. Рекомендую сохранить копию кода и сжать его, чтобы он не занимал много места в колонке для кода в панели администрирования.
Известные баги (из собственного тестирования):
- в Firefox во время прокрутки проигрывателя может возникать "остаточный эффект": ручка проигрывателя оставляет "призраки" себя после прокрутки - понятия не имею, что это и что с этим можно поделать;
- в Firefox же может случиться так, что сервер не успеет откликнуться и передать данные песни, и тогда Firefox посчитает, что проигрывать нечего ("нет подходящих медиафайлов"); перезагрузка страницы решила проблему.
