Создание аудиоплеера при помощи HTML5. Часть 1: функции и дизайн
Перевод статьи Making An Audio Player With HTML5, Part 1: Features and Design с сайта demosthenes.info, c разрешения автора — Дадли Стори.
Возможно, вы не настолько стары, чтобы помнить дни WinAmp-а, который был (в своём первноначальном воплощении) основной программой для проигрывания MP3 с "киллер-фичей" в виде настраиваемых тем. Сегодня у вас есть возможность создать свой собственный плеер, используя HTML5 и JavaScript, и настроить его внешний вид при помощи CSS. Планирование и разработка этого плеера позволит разработчикам познакомиться с HTML5-мультимедиа, JavaScript DataViews и WebAudio API.
В этой статье я рассмотрю планирование и разработку интерфейса плеера; в остальных статьях этого цикла будем выстраивать код.
Базовый плеер
Первым делом давайте составим разумный список функций нашего плеера:
- Очевидно, что код должен проигрывать MP3-файлы: это легко выполнить, т.к. теперь Firefox поддерживает соответствующий кодек. Чтобы не усложнять, у плеера будет только один заранее заготовленный трек для начала.
- Нам нужны основные элементы управления аудио: play, pause, volume и mute.
- Индикатор должен показывать, сколько времени музыка уже проигрывается и сколько времени осталось.
- Таймер должен показывать, сколько времени осталось до конца трека.
- Ещё одна кнопка должна включать бесконечное повторение музыкального трека.
- Должно быть отображено название трека, исполнителя и информация об альбоме. (В начальной версии плеера эта информация будет уже известна.)
Продвинутый плеер
Важно наметить направления дальнейших улучшений аудиоплеера. Это могут быть:
- Клики на индикаторе должны переключать и «перематывать» аудиотрек.
- Возможность загрузки музыкальных треков и треков для формирования плейлиста. Чтобы это осуществить, нам нужна кнопка «Load».
- Любая информация из метаданных ID3 в этих треках – название, год, исполнитель и альбом, будут читаться и отображаться.
- Шкала должна показывать уровни в левом и правом аудиоканалах.
Функциональность и тестирование
Из-за того, что у нас есть растущий список функций, взаимодействие должно быть тщательно продуманно, даже в простом плеере.
- Интерфейс должен быть простым: кнопка «Play» по клику должна переключаться в состояние паузы, вместо того, чтобы предоставлять пользователю отдельные кнопки для каждого действия.
- Клик на «Mute» должен устанавливать регулятор громкости на 0 и приостанавливать воспроизведение. Повторный клик на эту же кнопку должен возобновлять воспроизведение с прежней громкостью.
- Когда трек заканчивает проигрывание, он должен переходить в начало и ставиться на паузу, если не включена кнопка «Loop».
Дополнительные функции также должны быть протестированы, чтобы знать, что они реализуемы.
Ресурсы
Прежде чем начать проект, важно знать, какие ресурсы и материалы должны быть у вас под рукой. В нашем случае у меня есть следующее:
- Музыкальный трек группы «Nine Inch Nails», под лицензией Creative Commons.
- HTML5-элементы
<
audio
>
и<
progress
>
с «подпорками» на JavaScript. - PNG-файлы для кнопок и фона плеера, основанные на первоначальных набросках.
Первоначальный дизайн
Изначально я всегда предпочитаю работать с ручкой и бумагой, чтобы сделать примерный набросок дизайна. Вот первоначальный набросок, нарисованный на странице GridBooks (инструмент, который я продемонстрирую в самое ближайшее время):
Расширение и доступность
Важно планировать поддержку, доступность и расширение для вашего кода. В связи с этим, я буду писать четко определенные JavaScript-функции и такой же HTML и CSS, вместе со вспомогательными возможностями. В идеале, содержание речи или тексты песен в аудио должны отображаться в виде текстовых надписей, хотя это войдёт в отдельный цикл статей.
P.S. Это тоже может быть интересно:
Все ссылки битые. Можно как-то статью отредактировать?