Пример использования
В разделе приведен пример создания плеера, состоящего из следующих элементов управления: кнопки «воспроизведение/пауза», прогресс-бара и шкалы регулирования громкости.
Для настройки графического интерфейса в первую очередь необходимо определить HTML-структуру, в которой будут размещаться кнопки управления плеером:
<div class="player">
<!-- Кнопка «воспроизведение/пауза». -->
<div class="controls">
<button class="controls_play">Play</button>
</div>
<!-- Прогресс-бар. -->
<div class="progress">
<!-- Шкала загрузки. -->
<div class="progress_loaded"></div>
<!-- Шкала текущей позиции воспроизведения. -->
<div class="progress_current"></div>
</div>
<!-- Шкала громкости. -->
<div class="volume">
<div class="volume_bar"></div>
</div>
<!-- HTML-элемент, в котором будет размещен Flash-апплет.
Если браузер заблокирует Flash-содержимое, в апплете будет
отображено уведомление о блокировке.
Для разблокировки достаточно произвести клик по апплету. -->
<div class="overlay"></div>
</div>
Затем инициализируем созданную HTML-структуру.
// Инициализируем HTML-структуру.
var dom = {
player: document.querySelector(".player"),
play: document.querySelector(".controls_play"),
progress: {
bar: document.querySelector(".progress"),
loaded: document.querySelector(".progress_loaded"),
current: document.querySelector(".progress_current")
},
volume: {
bar: document.querySelector(".volume"),
value: document.querySelector(".volume_bar"),
},
overlay: document.querySelector(".overlay")
};
Теперь создадим экземпляр плеера:
// Предоставим плееру самому решать, какой тип реализации использовать: HTML5 или Flash.
// В качестве второго аргумента конструктору передается оверлей, в котором
// будет размещен Flash-апплет.
var audioPlayer = new ya.music.AudioPlayer(null, dom.overlay);
// Проверка, был ли плеер успешно инициализирован.
audioPlayer.initPromise().then(function() {
// Если плеер был успешно инициализирован, скрываем Flash-апплет для того,
// чтобы кнопки управления стали доступными.
dom.overlay.classList.add("overlay_hidden");
},
function(err) {
// Показываем сообщение о блокировке.
dom.overlay.innerHTML = err.message;
dom.overlay.classList.add("overlay_error");
});
Отображение статуса плеера
Настроим отображение статуса плеера. Для этого подпишемся на событие изменения статуса плеера (подробнее см. События). Для простого плеера достаточно знать, запущено воспроизведение или нет.
// Подписка на изменение состояние плеера.
audioPlayer.on(ya.music.Audio.EVENT_STATE, function(state) {
if (state === ya.music.Audio.STATE_PLAYING) {
dom.player.classList.add("player_playing");
} else {
dom.player.classList.remove("player_playing");
}
});
Кнопка запуска проигрывания
Предположим, что имеется список из нескольких аудиофайлов для проигрывания. Настроим кнопку запуска так, чтобы при ее нажатии запускался первый из доступных файлов; как только файл полностью проиграет, будет автоматически запускаться следующий.
Для начала реализуем подписку на событие клика и настроим воспроизведение в зависимости от состояния плеера: если в момент нажатия кнопки плеер воспроизводит звук, ставим воспроизведение на паузу, в противном случае начинаем воспроизведение.
// Список аудиофайлов.
var trackUrls = [
"http://some.domain.and.zone/1.mp3",
"http://some.domain.and.zone/2.mp3",
"http://some.domain.and.zone/3.mp3"
];
var trackIndex = 0;
// Слушаем клик по кнопке запуска.
dom.play.addEventListener('click', function {
// Проверка текущего статуса плеера.
var state = audioPlayer.getState();
switch (state) {
case ya.music.Audio.STATE_PLAYING:
audioPlayer.pause();
break;
case ya.music.Audio.STATE_PAUSED:
audioPlayer.resume();
break;
default:
audioPlayer.play(URL);
break;
}
});
Для автоматического воспроизведения следующего файла подпишемся на событие окончания воспроизведения.
// Функция, запускающая воспроизведение.
var startPlay = function() {
var track = trackUrls[trackIndex];
audioPlayer.play(track);
};
// Как только воспроизведение файла закончилось,
// плеер начинает проигрывать следующий файл.
audioPlayer.on(ya.music.Audio.EVENT_ENDED, function() {
trackIndex++;
if (trackIndex < trackUrls.length) {
startPlay();
}
});
Для удобства пользователей добавим автозагрузку следующего аудиофайла после того, как текущий загрузился. Для этого потребуется немного изменить функцию startPlay()
и отслеживать момент загрузки файла:
// Изменим функцию startPlay().
var startPlay = function() {
var track = trackUrls[trackIndex];
// Если файл был предварительно загружен, то для запуска
// его воспроизведения нужно вызвать функцию playPreloaded.
// Подробнее см Предварительная загрузка аудиофайлов.
if (audioPlayer.isPreloaded(track)) {
audioPlayer.playPreloaded(track);
} else {
audioPlayer.play(track);
}
};
// Как только текущий файл полностью загрузился, начинаем загрузку следующего.
audioPlayer.on(ya.music.Audio.EVENT_LOADED, function() {
if (trackIndex + 1 < trackUrls.length) {
audioPlayer.preload(trackUrls[trackIndex + 1]);
}
});
Шкала громкости
Настроим шкалу громкости следующим образом: пусть первоначально в ней отображается текущая громкость плеера; при нажатии мышью на другую позицию шкалы высота столбика будет пересчитана в соответствии с новым значением громкости.
// Расчет высоты для отображения шкалы громкости.
var updateVolume = function(volume) {
dom.volume.value.style.height = (volume * 100).toFixed(2) + "%";};
// Отображаем шкалу с начальным значением громкости (при инициализации плеера).
audioPlayer.initPromise().then(function() {
updateVolume(audioPlayer.getVolume());
});
// Изменяем значение громкости при нажатии на шкалу левой кнопкой мыши.
dom.volume.bar.addEventListener("click", function(evt) {
var fullHeight = dom.volume.bar.offsetHeight;
var offset = offsetTop(dom.volume.bar);
// Тут мы делаем "1 -" т.к. громость принято отмерять снизу, а не сверху.
var volume = 1 - Math.max(0, Math.min(1, ((evt.pageY || evt.screenY) - offset) / fullHeight));
audioPlayer.setVolume(volume);
});
// Подписываемся на событие изменения значения громкости.
audioPlayer.on(ya.music.Audio.EVENT_VOLUME, updateVolume);
Прогресс-бар
В примере прогресс-бар будет содержать две шкалы: шкалу с текущей позицией воспроизведения и шкалу загрузки аудиофайла.
audioPlayer.on(ya.music.Audio.EVENT_PROGRESS, function(timings) {
dom.progress.loaded.style.width = (timings.loaded / timings.duration * 100).toFixed(2) + "%";
dom.progress.current.style.width = (timings.position / timings.duration * 100).toFixed(2) + "%";
});
Настроим возможность изменять позицию воспроизведения по клику на шкале:
// Настройка навигации по прогресс-бару.
var offsetLeft = function(node) {
var offset = node.offsetLeft;
if (node.offsetParent) {
offset += offsetLeft(node.offsetParent);
}
return offset;
};
var offsetTop = function(node) {
var offset = node.offsetTop;
if (node.offsetParent) {
offset += offsetTop(node.offsetParent);
}
return offset;
};
// Слушаем событие "клик" на прогресс-баре.
dom.progress.bar.addEventListener("click", function(evt) {
var fullWidth = dom.progress.bar.offsetWidth;
var offset = offsetLeft(dom.progress.bar);
var relativePosition = Math.max(0, Math.min(1, ((evt.pageX || evt.screenX) - offset) / fullWidth));
var duration = audioPlayer.getDuration();
// Изменяем позицию воспроизведения.
audioPlayer.setPosition(duration * relativePosition);
});
Результат
Посмотреть полный код примера можно на странице проекта GitHub.