Ник Фразиер
Когда люди мой возраст слышат фразу «веб-аудио», они, вероятно, думают о сайтах Geocities 90-х годов с раздражающими звуковыми петлями, играющими на заднем плане.
Возможности затем были ограничены, и звук был быстро заброшен как компонент большинства веб-опыта. Кроме случайного «экспериментального» сайта или страницы полосы, звук в Интернете с тех пор было исключением, а не правилом.
Web Audio пришла долгий путь с тех пор. С этими достижениями у нас теперь есть возможность начать смотреть на звук в качестве реальной возможности для Интернета.
И не только для медиа-тяжелых сайтов. Дизайнеры видеоигр в течение многих лет понимают значение звукового дизайна даже в самых мирных меню и взаимодействиях пользовательского интерфейса. См. Например, богатый дизайн звука Меню персонажей судьбы Отказ
В то время как веб-взаимодействия не совсем одинаковы, с постоянным акцентом на пользовательский опыт существует все основания, чтобы рассмотреть вопрос о привлечении слухового ощущения как часть пакета.
Это не значит, что мы должны начать добавлять взрывы фейерверков и балансировать трубы на нашу посадочную страницу только потому, что мы можем. Неожиданный и нежелательный звук – это выключатель сделки Отказ
Итак, первый вопрос, чтобы спросить, вполне может быть, «мои пользователи ожидают звуки?» В случае игры, музыки или аналогичного сайта они, вероятно, делают. Если это так, добавление звука в ваш пользовательский интерфейс может быть приветственная область разработки. (Вы все еще, вероятно, хотите добавить кнопку Master Mute.)
Именно с этой струкцией ума, что я начал исследовать добавление тонкого звукового дизайна в некоторые из моих веб-интерфейсов веб-пользователей. У меня было несколько целей:
- Возможность воспроизведения звука на событии (например, Rollover, нажмите)
- Хорошая производительность, низкая задержка
- Хорошее покрытие браузера
- Немногие не отвлекающие побочные эффекты или раздражения (Во избежание синдрома геодонственности)
Далее следует обзор лучших практик, которые я сталкивался во время моих экспериментов, основываясь на текущем состоянии Интернета.
Имейте в виду, что аудио в Интернете по-прежнему является относительно неизведанным территорией, поэтому еще многое создавать и обнаружить в поле.
HTML-аудиоэлемент
До появления HTML5 аудио в сети было лучше всего описано как «примитив». Единственный способ включить звук на сайт был с модулем, как Flash.
HTML5 принес с собой
Результат:
Сам по себе полезность этого тега ограничена. Но HTML5 также представил API JavaScript, Htmlaudioelement , это дает возможность программно воспроизводить звуки.
Добавление звуков к событиям, использующим этот интерфейс, выглядит так:
function playSound () { document.getElementById("snare").play(); }Это позволяет вызвать звук с использованием JavaScript.
Вот пример этого использования:
Попробуйте щелкнуть дважды, хотя, и вы сразу же испытаете один из основных недостатков HTML AUDIO.
С HTML AUDIO, воспроизведение звука более чем раз сложно. Если вы использовали только Играть () Функция и один источник, браузер будет ждать, пока он не заканчивает воспроизведение звука, прежде чем он позволит вам вызвать другой звук. Фактически, даже с несколькими источниками HTML Audio имеет ограниченную способность играть несколько звуков одновременно.
Один трюк, который я нашел, чтобы включить более быстрый запуск (используя только один источник) – всегда остановить звук перед его его игрой. Примечание. API не включает в себя функцию «Стоп», но перезагрузка файла делает трюк:
function playSound () { document.getElementById("snare").load(); document.getElementById("snare").play();}Теперь мы должны быть в состоянии ударить эти быстрые пожарные ловушки, как следующее 9-го удивления:
Выбор наилучшего аудиоформата для использования в Интернете был когда-то сложная задача. Кросс-браузерная совместимость форматов было повсюду. Вам обычно приходилось иметь несколько версий одного и того же файлов, с разными расширениями, на готовом к готовке к любому браузеру ваш сайт может столкнуться.
Теперь проще: используйте MP3.
Кроме Internet Explorer 8 (что все, кроме Dead) и Opera Mini (который в любом случае не поддерживает аудио), файлы MP3 должны работать практически в любом месте.
Они также компактны. Если все, что у вас есть, являются файлы WAV или какой-либо другой формат, идите вперед и используйте утилиту преобразования (я использую MH Audio Converter ) и получите все стандартизированные в MP3.
Веб-аудио API: Гигантский прыжок
HTML AUDIO обеспечивает прошедшее решение для звука. В частности, я обнаружил, что используя его через библиотеку JavaScript под названием Buzz сделал его гибким и простым вариантом.
Но есть еще многочисленные недостатки:
- Воспроизведение нескольких звуков в быстрой последовательности является опыт подбора
- Возможность манипулировать звуком ограничена
- Синхронизация звуков – это боль
Введите Web Audio API. Веб-аудио является правильным преемником HTML AUDIO и решает некоторые проблемы последних, а также добавляют огромное количество гибкости.
С Web Audio разработчики теперь имеют надежный набор инструментов для создания звуковых двигателей на уровне платформерных игр и программных синтезов Pro.
Используя веб-аудио вместо HTML AUDIO, мы можем создать кнопку Click Sound, что слои на вершине себя, а не отсечения, так как эта визуализация демонстрирует:
Тем не менее, есть пара улова, одна из которых я немедленно побежал: Web Audio сложен. Если вы взломать один из множества отличных учебных пособий API в Интернете (я рекомендую книгу Boris Smus Web Audio API , весь текст которого доступен бесплатно на сайте O’Reilly), первое, что вы заметите Это просто играет один звук, может потребовать пару десятков строк кода.
Решение, которое я нашел для этого Soundjs. . SoundJS, частью SureJS Suite Of Tools, является мощной звуковой библиотекой с нежной кривой обучения. Часть его мощности находится в абстрагировании многих деталей аудио API в нижнем уровне, так что тот же код может быть запущен на HTML Audio, веб-аудио или даже Flash Audio, в зависимости от того, что поддерживает браузер пользователя.
Но я обнаружил, что там, где это действительно Excels находится в его обработке веб-аудио. Теперь вместо того, чтобы писать страницу кода для воспроизведения звука, вы можете написать это:
function loadSound () { createjs.Sound.registerSound("snare-2.mp3", soundID); } function playSound () { createjs.Sound.play(soundID); }Попробуйте это и послушать разницу (и улучшение звука):
Другим основным уловом является то, что веб-аудио стандарт все еще находится в потоке – в настоящее время работает работает работает, и в Internet Explorer нет поддержки.
У более тонкой зерна в настоящее время существуют некоторые дополнительные ограничения для аудио в целом, особенно на мобильных устройствах:
- С устройствами iOS звук изначально заблокирован и не будет воспроизводиться до тех пор, пока не произойдет событие инициированное пользователем. Это, по-видимому, мера для уменьшения пропускной способности.
- С помощью Android устройств нет контроля над громкостью звука, и вы можете воспроизводить только аудио как часть события инициированного пользователем.
Эти ограничения могут не иметь значения с событиями щелчков, как я продемонстрировал до сих пор, но они могут вступить в игру еще раз более сложный дизайн звука пользовательского интерфейса. Который приносит нас на наш последний шаг.
Идти дальше с веб-аудио
Когда я начал думать о «UI звуковой конструкции», моя первая мысль была кликов событий. Но как только это было решено, я задавался вопросом о других возможностях. Как насчет протолков событий? Или прокручивать события? Или что-то совершенно другое? С веб-аудио я обнаружил, что есть мир возможностей.
Веб-аудио позволяет добавлять несколько различных типов эффектов прогиба на вашу аудио цепь. Например:
- Biquadfilternodes Может использоваться как HighPass/NowPass/Notch Filters
- Конверфирует может быть использован для реверберации
- Задержка Может использоваться для задержки эффектов
- Стереофанненоды Разрешить панорамирование влево и вправо
- Аналисноды Включить анализ данных и визуализацию данных
Что если, я подумал, вы использовали биквадфильтерноду в сочетании с обработчиком событий, который отслеживает близость мыши к кнопке? Вы можете изменить звук на основе того, насколько рядом с кнопкой указатель мыши есть. Фильтр в стиле Moog Shows В вашем интерфейсе – как это круто?
Оказывается, Soundjs делает это тоже относительно простым (хотя настроен настроек веб-аудиоуэкстра библиотеки не также документирован как остальная часть API). Используя некоторые из более чем Продвинутый Части API, я обнаружил, что вы можете «вставить» фильтр в веб-аудио настроек Soundjs, и скрись к контенту вашего сердца. Отрегулируйте фильтр на основе движений мыши и VOILA, фильтр близости:
Если вы хотите экспериментировать сами, проверьте код SoundJS в над ручкой Отказ Алгоритм близости основан на Это Снаппет CSS-Tricks из Криса Койии.
Небо это предел
С Web Audio веб-разработчики, кажется, наконец-то имеют глубокий и мощный инструментарий для проектирования и манипулирования аудио. Он также созрел для разработки новых идей и техник, так как это действительно только начинает включаться в современный опыт веб-пользователей.
Мои собственные исследования поцарапают поверхность. Я продолжаю искать новые способы привлечь других к звучанию, и я с нетерпением жду встречи с тем, где все происходят следующие.
Дополнительные ресурсы
Soundjs визуализатор демонстрация : Исходный код для этой демонстрации является лучшим ресурсом, если вы хотите начать вытягивать раздел WewJS Web Audio Graph
Разработка звука : Звуковая конструкция вдохновения от мастеров.
Хром эксперименты : Еще одна удивительная коллекция дизайна (как визуального и слухового) вдохновения.
Версия этой истории была первоначально опубликована в fraziern.github.io 14 августа 2016 года.
Оригинал: “https://www.freecodecamp.org/news/web-audio-for-the-user-interface-1592687f898c/”