Создание аудиоплеера при помощи 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 (инструмент, который я продемонстрирую в самое ближайшее время):

2015-02-15_0011

Расширение и доступность

Важно планировать поддержку, доступность и расширение для вашего кода. В связи с этим, я буду писать четко определенные JavaScript-функции и такой же HTML и CSS, вместе со вспомогательными возможностями. В идеале, содержание речи или тексты песен в аудио должны отображаться в виде текстовых надписей, хотя это войдёт в отдельный цикл статей.

P.S. Это тоже может быть интересно:

1 Комментарий

  1. Андрей

    Все ссылки битые. Можно как-то статью отредактировать?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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