Пример использования

В разделе приведен пример создания плеера, состоящего из следующих элементов управления: кнопки «воспроизведение/пауза», прогресс-бара и шкалы регулирования громкости.

Как это будет выглядеть

Для настройки графического интерфейса в первую очередь необходимо определить 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.