Аудиоплеер

Создание плеера

Аудиоплеер реализуется классом ya.music.Audio. Для добавления плеера на страницу достаточно создать экземпляр данного класса. В качестве аргументов ему можно передать следующие параметры:

  • preferredPlayerType — предпочитаемый тип аудиоплеера. Может принимать значения: "html5", "flash" или любое ложное значение (false, null, undefined, 0, ""). Если выбранный тип плеера окажется недоступен, будет запущен оставшийся тип. Если указано ложное значение либо параметр не передан, то API автоматически выберет поддерживаемый тип плеера.

    Примечание. Если браузер поддерживает обе технологии (HTML5 Audio и Flash), то по умолчанию YandexAudio создает аудиоплеер на основе HTML5.
  • container — ссылка на HTML-контейнер, в котором будет размещен Flash-апплет. Рекомендуется указывать данный параметр, так как это позволит отображать уведомление о блокировке Flash-содержимого. Подробнее см. в разделе Особенности работы с Flash.

// Ссылка на HTML-элемент, в котором будет размещен Flash-апплет.
// Эта ссылка будет передана конструктору аудиоплеера.
var appletContainer = document.querySelector("#div_id");

// Создание экземпляра плеера. Пусть тип плеера будет выбран автоматически.
var audioPlayer = new ya.music.Audio(null, appletContainer);

В результате выполнения данного кода API попытается создать аудиоплеер на основе HTML5. Если данная технология поддерживается браузером, создается HTML-элемент <audio> и сохраняется в памяти браузера. При этом в структуру DOM-дерева этот элемент не добавляется (это сделано для того, чтобы скрыть стандартный графический интерфейс HTML5-плеера).

Если HTML5 не поддерживается, то будет создан аудиоплеер на основе Flash. В этом случае в DOM-дерево документа добавляется элемент <embed>, в который будет встроен Flash-апплет. В примере выше конструктору плеера был передан параметр container, поэтому элемент <embed> будет размещен в контейнере с идентификатором 'div_id'. Если параметр container не передан, элемент <embed> будет скрыт — API добавит его в конец DOM-дерева и установит его абсолютное позиционирование за пределами видимой части страницы. Объяснение такого поведения приведено в разделе Особенности работы с Flash.

Так как API скрывает стандартный интерфейс технологий HTML5 Audio и Flash, для настройки собственного интерфейса аудиоплеера разработчику необходимо самостоятельно продумать его HTML-структуру и настроить оформление с помощью CSS-стилей. Подробный пример настройки интерфейса приведен в разделе Пример использования.

Настройка конфигурации аудиоплеера

API предоставляет возможность изменять конфигурацию аудиоплеера. Например, можно изменить путь к swf-файлу или указать минимальную допустимую версию Flash-плеера.

Конфигурация аудиоплеера задается в объекте ya.music.Audio.config. Данный объект содержит следующие поля: audio, flash и html. В поле audio задаются общие настройки библиотеки, в полях flash и html — настройки для Flash- и HTML5-плеера соответственно.

Управление воспроизведением

Проверка готовности аудиоплеера

Для проверки готовности аудиоплеера можно воспользоваться функцией initPromise(). Эта функция работает в асинхронном режиме и возвращает объект-обещание, который разрешается при успешной инициализации плеера и отклоняется при возникновении ошибки.

// Проверка на готовность плеера.
audioPlayer.initPromise().then(function() {
    console.log("Аудиоплеер готов к работе.");
}, function() {
    console.error("Не удалось инициализировать аудиоплеер.");
});

Запуск воспроизведения

После создания плеера можно запустить воспроизведение какого-нибудь аудиофайла. Для этого нужно вызвать функцию play(), указав URL файла:

// Запуск воспроизведения.
audioPlayer.play('http://my-host.ru/track.mp3').then(function() {
    console.log("Аудиоплеер начал воспроизведение.");
}, function (err) {
    console.log("При воспроизведении возникла ошибка.");
});

Пауза

Поставить воспроизведение на паузу можно с помощью pause():

// Пауза.
audioPlayer.pause().then(function () {
    console.log("Воспроизведение поставлено на паузу.");
}, function (err) {
    console.log("Ошибка при попытке поставить плеер на паузу.");
});

Снять с паузы

Для снятия плеера с паузы предназначена функция resume():

// Снятие плеера с паузы.
audioPlayer.resume().then(function () {
    console.log("Возобновление воспроизведения.");
}, function (err) {
    console.log("Ошибка при обновлении воспроизведения.");
}); 

Остановка воспроизведения

Чтобы остановить воспроизведение и прекратить загрузку аудиофайла, следует вызвать функцию stop():

// Остановка воспроизведения и прерывание загрузки аудиофайла.   
audioPlayer.stop().then(function () {
    console.log("Воспроизведение и загрузка файла остановлены.");
}, function (err) {
    console.log("Ошибка при остановке загрузки файла.");
});

Повторно воспроизвести файл

Функция restart() позволяет повторно воспроизвести файл с начала, не загружая его заново:

// Повторное воспроизведение аудиофайла.
audioPlayer.restart.then(function () {
    console.log("Началось воспроизведение.");
}, function (err) {
    console.log("Ошибка воспроизведения.");
}); 

Установить позицию воспроизведения

Задать новую позицию воспроизведения можно с помощью функции setPosition():

// Установить новую позицию воспроизведения.
audioPlayer.setPosition(position);  
Примечание. Для Flash-реализации имеется ограничение: нельзя ставить позицию воспроизведения дальше загруженной части аудиофайла.

Получение информации о воспроизведении

Для получения информации о воспроизведении API предоставляет следующие методы:

console.log("Ссылка на текущий аудиофайл: ", audioPlayer.getSrc());    
console.log("Длительность файла: ", audioPlayer.getDuration());    
console.log("Текущая позиция воспроизведения: ", audioPlayer.getPosition());
console.log("Длительность загруженной части: ", audioPlayer.getLoaded());    
console.log("Общее время воспроизведения аудиофайла: ", audioPlayer.getPlayed());
console.log("Статус воспроизведения: ", audioPlayer.getState());
console.log("Текущее значение громкости: ", audioPlayer.getVolume());

Полный список методов для работы с аудиоплеером приведен в справочнике.