Если вы были в Интернете с середины 1990-х годов, вы, вероятно, помните надоедливые песни и звуки, которые вырывались из ваших динамиков всякий раз, когда вы загружали новую страницу. К счастью, по умолчанию для большинства браузеров эта функция автоматического воспроизведения отключена, но аудио и, в частности, музыка по-прежнему составляют огромную часть современного Интернета.
Сегодня мы собираемся более подробно изучить Audio Web API, аудиотег HTML5 и, наконец, то, как использовать эти два элемента для создания собственных визуально настраиваемых аудиоплееров.
Аудио API
JavaScript предлагает ряд кросс-браузерных веб-API, позволяющих нам взаимодействовать с концепциями кодирования высокого уровня. Популярным API для веб-сайтов, предлагающих музыкальные услуги, является Audio API. Этот конструктор объектов принимает необязательный URL-адрес аудиофайла и возвращает новый HTMLAudioElement, который можно использовать для проверки продолжительности дорожки, currentTime, громкости, предлагает функции паузы и воспроизведения и проверяет различные состояния, такие как окончание и пауза.
Эта информация полезна, если вы хотите манипулировать своими страницами или обновлять их в зависимости от состояния вашего аудиофайла. Что нам делать, если мы хотим использовать этот API на наших веб-страницах?
Элемент аудио HTML
Выпуск HTML5 добавил в наш арсенал ряд семантических тегов, которые придают значение структуре нашего веб-документа. Он также добавил ряд функциональных тегов для оживления наших страниц. Чтобы избежать прикрепления отдельного скрипта к вашей странице, HTML5 предлагает новый тег ‹audio›, который принимает атрибут источника для вашего аудиофайла и возвращает новый экземпляр объекта HTMLAudioElement.
По умолчанию тег аудио не отображается на экране. Однако тег audio имеет популярный атрибут «элементы управления», который будет отображать кнопку паузы/воспроизведения, индикатор выполнения и регуляторы громкости:
Хотя это отлично подходит для быстрого и грязного MVP, визуальные эффекты элементов управления по умолчанию не очень хороши. Еще большей проблемой является то, что отображение неодинаково в разных браузерах, и очень мало CSS, который может настроить и изменить характеристики отображения этого проигрывателя.
Если вам нужно что-то, что работает, но вам все равно, как это выглядит, отлично подойдет тег «аудио» с атрибутом «controls». Если вам небезразличен внешний вид вашего пользовательского интерфейса, давайте посмотрим, как создать собственный аудиоплеер!
Создание нашего аудиоплеера
Как упоминалось ранее, аудио пользовательский интерфейс по умолчанию, предлагаемый тегом ‹audio›, функционален, но не всегда визуально привлекателен. Мы можем изменить это, подключившись к нашему экземпляру HTMLAudioElement. Для этого урока я хотел бы использовать ванильный JavaScript с HTML и CSS. Прелесть веб-разработки в том, что существует так много разных способов создания этого аудиоплеера. Другим решением (ссылка в примечаниях) является использование React и привязка к проигрывателю с помощью React Hooks, и еще одно решение, которое я реализовал, включало использование NextJS и Typescript для создания гидратированного проигрывателя (хотя вы должны быть осторожны, поскольку веб-API недоступны). в узле).
Существует два основных подхода к созданию пользовательского аудиоплеера с пользовательским интерфейсом с помощью ванильного JavaScript. Первый заключается в создании аудиообъекта с использованием тега audio и доступе к нему в вашем JS-файле путем подключения к его классу или идентификатору. Второй — создать экземпляр объекта Audio в JavaScript, а затем манипулировать HTML-тегами из файла сценария.
Для нашего решения мы добавим тег аудио в наш index.html, а затем получим к нему доступ через наш файл script.js. Для начала клонируйте репозиторий моего проекта (https://github.com/dpericich/SoundCloud-Audio-Player). Перейдите в каталог start_files и откройте файл HTML. Текущий файл должен иметь тело, содержащее только пустой тег ‹audio›. Файл mp3 для нашей песни хранится в каталоге assets. Мы установим для атрибута src нашего аудиотега значение /final_files/assets/indie_song.mp3, что создаст экземпляр нового объекта Audio с нашей песней.
Последние изменения, которые мы внесем в этот файл HTML, заключаются в добавлении элементов контейнера и структуры для нашего аудиоплеера. Поскольку мы не используем пользовательский интерфейс аудио по умолчанию, включая «элементы управления», нам нужно будет создать собственный пользовательский интерфейс. Вот как на этом этапе должно выглядеть тело нашего HTML-файла:
В нашем стиле для этого аудиоплеера нет ничего особенного, поэтому для краткости я не буду углубляться в этот файл. Просто знайте, что я не тратил время на то, чтобы сделать это адаптивным, поэтому, если вы хотите улучшить приложение, не стесняйтесь добавлять минимальную и максимальную ширину к компонентам и, возможно, изменить направление сгибания, чтобы сложить элементы управления проигрывателя для мобильные устройства. Сейчас наш текущий плеер выглядит так:
Теперь у нас есть структура HTML, стили CSS и экземпляр HTMLAudioElement, содержащий mp3-файл нашей инди-песни. Теперь нам нужно добавить некоторые функции в наш файл. Для начала давайте подключимся к различным классам элементов и сохраним эти ссылки как переменные. Я назначил кнопку воспроизведения/паузы, регуляторы громкости и, наконец, индикатор прогресса трека. В верхней части нашего файла script.js мы используем document.querySelector() для получения каждого из этих значений, включая доступ к нашему экземпляру объекта Audio.
Теперь мы можем взаимодействовать и изменять эти элементы, поэтому давайте настроим некоторые обработчики событий для отслеживания кликов. Самый простой функционал для добавления — это регуляторы громкости. С нашими двумя отдельными кнопками мы добавим обработчики событий, которые увеличивают и уменьшают громкость нашего объекта Audio до определенной точки:
Следующая функция, которую мы хотели бы добавить, — это воспроизведение и приостановка трека. Объект Audio имеет встроенные методы play() и pause(), и мы можем получить доступ к этому объекту из нашей переменной audioEl, которую мы объявили в верхней части нашего файла. Давайте добавим прослушиватель событий в playButton, который будет обрабатывать запуск и остановку музыки:
Для элемента Audio установлено несколько логических флагов, поэтому нам не нужно создавать собственные флаги для состояния объекта. Наряду с флагом «пауза» мы можем использовать общие теги, такие как завершение. При этом все, что мы делаем, это проверяем, приостановлен ли звук, и вызываем audioEl.play(), если это так, в противном случае мы приостанавливаем его. Я использую веб-юникоды для значков воспроизведения/паузы, поэтому мне нужно настроить размер шрифта, но вы можете получить те же эффекты, используя шрифт Awesome Font или SVG.
С нашими регуляторами громкости и набором воспроизведения / паузы нам нужно иметь визуальную подсказку для пользователя для отслеживания прогресса. Конечно, мы могли бы получить доступ к audioEl.duration и использовать setInterval() для получения и отображения audioEl.currentTime каждые 1000 мс, но это не очень красиво. Вместо этого давайте будем менять положение шарика на трекбаре каждую секунду воспроизведения песни. Для этого нам нужно будет получать время, прошедшее каждую секунду, и использовать его с продолжительностью нашего трека, чтобы создать процент пройденных пикселей для нашего индикатора прогресса. Это будет выглядеть так:
Здесь мы устанавливаем интервал на нашей странице, чтобы получить процент воспроизведения или процент от истекшего времени по отношению к продолжительности песни. Затем мы можем установить смещение влево для нашего элемента progress относительно его контейнера, который будет отображать пользователю, как далеко он продвинулся в песне.
Чтобы сделать это лучше, мы могли бы иметь переменную состояния для хранения идентификатора интервала, возвращаемого при запуске интервала, а затем вызывать clearInterval(audioIntervalId) каждый раз, когда мы вызываем audioEl.play(), но я оставлю это вам. И с этим у нас есть функциональный аудиоплеер с индивидуальным стилем!
Заключение
Теперь у вас есть общее представление об Audio Web API, HTML5-теге ‹audio› и простом подходе к созданию пользовательского аудиоплеера и пользовательского интерфейса. Если вы хотите продолжить обучение, вы можете попробовать добавить Drag and Drop API, чтобы разрешить очистку звука (начните с добавления 'draggable=true' в div с классом 'progress'), добавьте классные визуальные эффекты на задний план аудиоплеер или даже выполнить визуализацию, углубившись в API веб-аудио. Дайте мне знать в комментариях, как вы планируете развивать наш базовый плеер!
Примечания
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
https://en.wikipedia.org/wiki/HTML5
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
https://stackoverflow.com/questions/4126708/is-it-possible-to-style-html5-audio-tag
https://letsbuildui.dev/articles/building-an-audio-player-with-react-hooks
https://betterprogramming.pub/all-you-need-to-know-about-the-web-audio-api-3df170559378
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
