Создание аудиоплеера при помощи HTML5. Часть 2: прототипирование

Существует два подхода для создания почти чего угодно. Первый – это взяться за дело с наскока, разрабатывая от целого к частному, набивая шишки о проблемы по мере их появления и надеясь, что вы во всём разберётесь. Второй – это создать ряд простых тестов: разрабатывая от частного к целому, проверяя каждый шаг, прежде чем использовать плоды своих трудов для создания окончательного, законченного произведения.

У каждого из этих двух методов есть свои преимущества, но второй, как правило, приводит к лучшему результату. Здесь я продемонстрирую второй подход, в разработке изначального прототипа веб-аудиоплеера, с которым я познакомил вас в первой части этого цикла статей.

Одно из преимуществ размещения своего контента на собственном сервере – это возможность настраивать всё, с ним связанное: вместо того, чтобы вынужденно обходиться UI для аудиофайлов из SoundCloud или встроенными элементами управления браузера, мы можем создать наш собственный плеер, используя специализированные HTML5-элементы, зная лишь немного JavaScript.

Исходные элементы

Первым делом давайте убедимся, что мы в принципе можем проиграть аудиофайл на странице. Здесь я использую Трек 24 из альбома Ghosts III группы NIN под лицензией Creative Commons:

Поскольку последние версии Firefox наряду с другими современными браузерами теперь поддерживают . mp 3 , здесь я использую только этот кодек. Я разместил элемент <audio> внутри <figure>, т.к. мы будем добавлять в него элементы управления вместе с текстовой расшифровкой.

Как только вы убедитесь, что аудио работает, следующей задачей будет создание собственного UI для плеера.

Работа над постепенным улучшением

Если у пользователя не запущен JavaScript, или скрипт, который мы собираемся добавить, не будет работать, то нам всё равно нужно, чтобы у пользователя был доступ к базовым элементам управления аудио. Поэтому мы удалим UI по умолчанию только в контексте нашего скрипта:

Добавленный внизу HTML-страницы, этот скрипт фактически сокращает наш аудиоплеер до простого элемента <button>. Прямо сейчас кнопка проигрывания не содержит никакого текста внутри себя. Но мы планируем часто менять текст в элементах «button», поэтому будет правильно поместить этот скрипт в функцию:

Теперь мы легко можем установить текст для любого HTML-элемента.

Далее нам нужно заставить кнопку реально что-то делать:

Заметьте, что мы не пытаемся сделать отдельные функции для «play» и «stop», а мыслим в категориях действия кнопки.

Создание кнопки «Mute»

Также нам необходимо создать элементы управления для громкости звука. Самое простое – это сделать кнопку «Mute», которая использует шаблон, очень похожий на шаблон кнопки Play/Pause:

Эта функция немного сырая: когда звук включен, она устанавливает уровень громкости для аудио в его абсолютный максимум (насколько позволяет система), но на данный момент это допустимо.

Создание регулятора громкости

Далее нам нужен более точный регулятор громкости. Очевидный кандидат для этого элемента управления UI – элемент « range ».

Элементу « range » через JavaScript нужно установить множество атрибутов, что мы могли бы сделать тем же способом, которым я только что установил тип для нового поля… то, что мы делаем прототип, еще не значит, что нам нужно идти длинным путем. В идеале, как минимум часть нашего кода будет перенесена в финальную версию медиаплеера, так что мы должны искать эффективные способы написания нашего кода прямо сейчас.

К сожалению, не существует метода setAttributes , который позволял бы устанавливать значения нескольких атрибутов одновременно. Тем не менее, для этого мы можем сделать довольно простую функцию:

Теперь можно устанавливать атрибуты для регулятора диапазона громкости при помощи одной строки кода:

Заметьте, что минимальное и максимальное значение регулятора соответствуют значениям функции muter () .

Далее мы добавим обработчик событий к полю регулятора, установив громкость аудиотрека в значение регулятора внутри анонимной функции:

Здесь мы сталкиваемся с первой серьёзной проблемой: с функциональной точки зрения, снижение громкости регулятора до 0 и нажатие на «Mute» – это одно и тоже, так что изменение состояния должно отображаться в кнопке. Как нам это сделать?

Синхронизация элементов управления

Моим решением будет абстрагироваться от кнопок и смотреть на любые изменения в громкости самого элемента <audio> :

Осталась ещё одна вещь, которую нужно исправить. Когда музыкальный трек заканчивается, музыка должна возвращаться к началу, а кнопка воспроизведения должна отображать «Play» вместо «Pause» или «Stop»:

Вот и всё! Весь код, с незначительным улучшением в функции muter () , представлен ниже; я также предоставил ссылку с более усовершенствованной версией плеера на Codepen. Я покажу как добиться улучшения в этой версии плеера в следующих двух статьях этого цикла.

Примечание

Этот код предполагает, что, как только скрипт загрузился, все условия окажутся идеальными: что браузер поддерживает HTML5 и все функции API, которые мы использовали, и что аудиотрек загрузился тотчас же.. Но это не всегда так: например, Android 2 и ниже не поддерживает event . ended для аудио. Существуют способы обойти это и множество фолбеков, которые мы могли бы добавить, но я не буду уделять им внимание сегодня.