Быстрый старт

1. Подключение API

Прежде чем использовать функции API, необходимо загрузить в браузер JavaScript-файлы, в которых эти функции определены. Для этого добавим в заголовок HEAD-заголовок HTML-страницы строку следующего вида:

<script src="https://music.yandex.ru/api/audio/dist/index.min.js" type="text/javascript">
</script>

2. Создание HTML-структуры плеера

Определим HTML-каркас плеера. Создадим два div-контейнера: в первом будет размещаться кнопка «воспроизведение/пауза», а второй будет использоваться для инициализации Flash-апплета, в том случае если HTML5 не поддерживается браузером. В этом контейнере будет отображаться сообщение об ошибке в случае блокировки Flash-содержимого. Если Flash-апплет будет успешно инициализирован, то этот контейнер будет скрыт (см. пункт 4).

<div class="player">
    <!-- Кнопка «воспроизведение/пауза». -->
    <div class="controls">
        <button class="controls_play">Play</button>
    </div>
    <!-- HTML-элемент, в котором будет размещен Flash-апплет.
         Если браузер заблокирует Flash-содержимое, в апплете будет
         отображено уведомление о блокировке.
         Для разблокировки плеера пользователю достаточно будет
         произвести клик по Flash-апплету. -->
    <div class="overlay"></div>
</div>

Посмотреть CSS-стили

/* Кнопка «воспроизведение/пауза». */
.controls_play {
    padding: 5px 10px;
    background: #fff;
    border: 1px #aaa solid;
    cursor: pointer;
}
.controls_play:hover {
    border-color: #666;
}
/* Настройка контейнера с Flash-апплетом. */
.overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
/* Класс .overlay_hidden необходим для того, чтобы
   скрыть div-контейнер с Flash-апплетом. */
.overlay_hidden {
    display: none;
}
/* Класс для отображения ошибки при блокировке Flash-апплета. */
.overlay_error {
    background: #ffcccc;
    color: #ff0000;
}

Чтобы упростить обращение к DOM-элементам в дальнейшем, в JavaScript-коде инициализируем созданную HTML-структуру:

// Инициализируем HTML-структуру плеера.
var dom = {
    play: document.querySelector(".controls_play"),
    overlay: document.querySelector(".overlay")
};

3. Создание экземпляра плеера

Плеер реализуется классом ya.music.Audio. Для добавления плеера на страницу достаточно создать экземпляр данного класса. Пусть мы хотим, чтобы тип плеера был выбран автоматически (HTML5 Audio или Flash). Для этого конструктору плеера первым аргументом передадим null. В качестве второго аргумента передадим ссылку на HTML-элемент, в котором будет размещен Flash-апплет (данный HTML-элемент будет использоваться в том случае, если HTML5 не поддерживается браузером).

// Создание экземпляра плеера. API автоматически выберет поддерживаемый
// тип плеера: HTML5 Audio или Flash.
// dom.overlay - ссылка на div-контейнер с классом 'overlay'.
var audioPlayer = new ya.music.Audio(null, dom.overlay);

4. Настройка отображения Flash-апплета

Так как в конструкторе плеера мы не указали, какой тип плеера использовать, по умолчанию API попытается создать HTML5-плеер. Если HTML5 не поддерживается браузером, то будет создан плеер на основе Flash.

Следует учитывать, что браузер может заблокировать Flash-содержимое на странице. Как правило, для разблокировки содержимого пользователю достаточно кликнуть по Flash-апплету, поэтому рекомендуется размещать Flash-апплет в видимой части страницы. В данном примере апплет будет встроен в div-контейнер с классом overlay (см. предыдущий пункт).

Настроим контейнер 'overlay' таким образом, чтобы в случае блокировки Flash-апплета в этом контейнере отображалось сообщение об ошибке, а в случае успешной инициализации апплета контейнер скрывался.

// Проверка, был ли плеер успешно инициализирован.
audioPlayer.initPromise().then(function() {
    // Если плеер был успешно инициализирован, скрываем Flash-апплет для того,
    // чтобы кнопки управления стали доступными.
    dom.overlay.classList.add("overlay_hidden");
},
 function(err) {
    // Показываем уведомление о блокировке Flash-содержимого.
    dom.overlay.innerHTML = err.message;
    dom.overlay.classList.add("overlay_error");
});

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

Настроим кнопку «воспроизведение/пауза» следующим образом: если в момент нажатия кнопки плеер воспроизводит звук, ставим воспроизведение на паузу, в противном случае начинаем воспроизведение.

// Слушаем клик по кнопке запуска.
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;
    }
});

Результат

Посмотреть пример в новом окне