[Перевод] Пакет use-sound: звуковые эффекты в React-приложениях
Может, дело в том, что я профессионально занимался звуком, но мне хочется, чтобы веб был бы громче.
Знаю, многие меня в этом желании не поддержат. И не без причины! Исторически сложилось так, что звуки в интернете использовались крайне неудачно и некрасиво:
- В ранние дни веба некоторые страницы проигрывали фоновую MIDI-музыку.
- Всплывающие мошеннические окна используют звуки для достижения своих нехороших целей. Они, с помощью звуков, стремятся привлечь внимание пользователей и сделать обман более правдоподобным.
- Звук присутствует и в автоматически запускающихся видео (ну это совсем кошмар).
Правда, я уверен в том, что совсем отказываясь от звука — это как если вместе с водой выплеснуть и ребёнка. Звуки могут делать акценты на действиях пользователя, они способны усиливать обратную связь. Звук может немного скрасить выполнение неких скучных действий. Если звуки на веб-страницах применяют со вкусом, они способны улучшить впечатления пользователя от проекта, сделав его более «осязаемым» и реальным.
Эта идея не нова: в играх и в мобильных приложениях звуки используются постоянно. На самом деле, веб — это странное исключение из общей тенденции. Большая часть цифровых продуктов, мысли о которых приходят мне в голову, использует звуки. Я уже не говорю о тактильном отклике, который используется в мобильных приложениях для того чтобы приблизить их к реальности.
Мне, в ходе работы над моим блогом, захотелось поэкспериментировать со звуком. Многие элементы интерфейса моего блога, с которыми взаимодействуют пользователи, воспроизводят тихие короткие звуки. Например, в правой верхней части домашней страницы блога имеется пара кнопок для переключения темы и для включения и выключения звука.
Так как звуки в веб используются крайне редко, их применение может оказать большое влияние на восприятие сайта пользователями. Это — нечто вроде секретного оружия разработчика, применение которого способно привести к удивительно большому позитивному влиянию на определённые проекты.
Для того чтобы упростить использование звуков, я оформил применяемый мной для работы со звуками хук в виде самостоятельного npm-пакета use-sound и опубликовал его. Здесь я расскажу о возможностях этого хука и поделюсь советами по использованию звука в веб.
Если вам не терпится увидеть код и приступить к использованию этого хука — вот его GitHub-репозиторий.
Обзор
Пакет use-sound представляет собой React-хук, который помогает разработчикам пользоваться звуковыми эффектами. Вот пример:
import useSound from 'use-sound';
import boopSfx from '../../sounds/boop.mp3';
const BoopButton = () => {
const [play] = useSound(boopSfx);
return ;
};
Использование этого хука добавляет примерно 1 Кб к сборке проекта. Правда, он, в асинхронном режиме загружает стороннюю зависимость Howler, размер которой составляет 10 Кб.
Хук даёт разработчику множество приятных возможностей. Среди них хочу отметить следующие:
- Досрочная остановка проигрывания, а также — приостановка и продолжение воспроизведения.
- Загрузка чего-то вроде звукового «спрайт-листа» и разделение его на отдельные звуки.
- Настройка скорости воспроизведения с возможностью ускорять и замедлять воспроизведение звуков.
- Множество прослушивателей событий.
- Много дополнительных продвинутых возможностей, доступных благодаря Howler.
Вот документация по хуку, в которой можно найти подробное руководство по его использованию и справочник по API.
Основы работы с use-sound
▍Установка
Сначала надо установить пакет, пользуясь yarn или npm:
# Используем yarn
yarn add use-sound
# или NPM
npm install use-sound
▍Импорт
Пакет use-sound экспортирует единственное значение по умолчанию — это хук useSound. Импортировать его можно так:
import useSound from 'use-sound';
Кроме того, нужно будет импортировать аудиофайлы, которые планируется использовать.
Если вы, при работе над React-проектами, пользуетесь чем-то вроде create-react-app или Gatsby — то у вас должна быть возможность импортировать MP3-файлы так же, как вы импортируете другие ресурсы — вроде изображений:
import boopSfx from '../../sounds/boop.mp3';
Если вы пользуетесь самописной Webpack-конфигурацией, то вам, для обработки .mp3-файлов, понадобится воспользоваться загрузчиком file-loader.
Кроме того, можно работать и со звуковыми файлами, помещёнными в папки public или static. Например, демонстрационные примеры, приведённые в этом материале, используют статические файлы, размещённые в общедоступной папке.
Поиск и подготовка звуков
Установка зависимостей и написание кода — это лишь полдела. Для озвучивания страниц нам понадобится подобрать подходящие звуки.
Мой любимый ресурс, на котором можно искать звуки — это freesound.org. Почти все звуки, используемые в моём блоге, я нашёл именно там. Там имеется множество звуков с лицензией Creative Commons Zero. Для загрузки файлов нужно зарегистрироваться на ресурсе. Пользоваться звуками можно бесплатно.
Будьте готовы к тому, что для подбора подходящего звука вам придётся серьёзно порыться в содержимом freesound.org. Дело тут в том, например, что многие звуки отличаются низким качеством. Процесс поиска подходящего звука можно сравнить с процессом поиска иголки в стоге сена. А подготовка найденного звука к реальному использованию напоминает огранку неогранённого алмаза.
▍Подготовка звуков
Многие звуки, взятые с freesound.org, нуждаются в некоторых улучшениях:
- Звуки, как и строки, могут быть обрамлены пустым пространством. Фрагменты тишины обычно вырезают, в результате соответствующий звуковой эффект воспроизводится сразу после возникновения озвучиваемого события.
- При подготовке звуков может понадобиться настроить их громкость, сделав её такой, чтобы все звуки, используемые в одном проекте, имели бы одинаковую громкость.
- На freesound.org имеются звуки, хранящиеся в различных аудиоформатах. Вам, вполне возможно, понадобится преобразовать понравившиеся вам звуки в MP3.
Для выполнения всех этих правок можно воспользоваться Audacity. Это — бесплатный опенсорсный кросс-платформенный аудиоредактор. Здесь я не буду рассказывать о том, как пользоваться этим редактором, но существует множество замечательных руководств по нему.
Почему я говорю о преобразовании звуков в формат MP3? Дело в том, что раньше не существовало аудио-формата, поддерживаемого всеми браузерами. Поэтому обычным делом было включение в состав проектов MP3, AIFF и WAV-файлов и использование их в окружениях, которые их поддерживают.
В современных же условиях, к счастью для нас, формат MP3 поддерживается всеми основными браузерами, включая IE 9. Звук, хранящийся в формате MP3, кроме того, очень хорошо сжат. А это позволяет выходить на файлы гораздо меньших размеров, чем при использовании альтернативных форматов, кодирующих звук без потери качества.
Звук и доступность
Несмотря на то, что я выступаю за использование звуков в вебе, я признаю, что не всем пользователям это понравится. И речь тут идёт о соображениях, выходящих за рамки субъективного стремления к тишине.
Люди, которые имеют проблемы со зрением, используют для работы с веб-страницами средства для чтения с экрана. Причём, речь идёт не только о тех, кто не видит страниц. Средствами для чтения с экрана, например, пользуются люди с дислексией, которым тяжело воспринимать текст, и люди с другими подобными проблемами. Средства для чтения с экрана — это программы, которые разбирают документы и озвучивают тексты. Если некий сайт содержит массу звуковых эффектов, они могут помешать нормальной работе программ, читающих текст с экрана. А это, в свою очередь, помешает работать с сайтом людям, полагающимся на такие программы.
По этой причине важно, чтобы в состав страниц сайта была бы включена кнопка для включения и выключения звука. При этом такая кнопка должна быть доступна для клавиатурной навигации (с использованием клавиши Tab). В идеале, до того момента, когда пользователь доберётся до такой кнопки с использованием клавиши Tab, не должно воспроизводиться никаких звуков. Кроме того, надо, чтобы веб-проект запоминал бы состояние этой кнопки — так пользователю не придётся постоянно прибегать к ней для отключения звука.
С другой стороны, слабослышащие пользователи не будут и знать о том, что некие взаимодействия со страницами сопровождаются звуком. То же относится и к людям, которые работают в интернете с выключенным звуком. По этой причине важно не полагаться исключительно на звук при выполнении неких важных действий. Если звук используется в качестве подтверждения какого-то действия пользователя — сделайте так, чтобы на странице выводилось бы и визуальное подтверждение этого действия. Сайты должны оставаться полностью работоспособными и без звуков.
Рецепты
Взглянем на несколько примеров (в соответствующем разделе оригинала этой статьи с ними можно поэкспериментировать в интерактивном режиме и послушать звуки, издаваемые разными элементами управления).
▍Флажок
Мне страшно нравится этот флажок. Если вы пользуетесь мышью, попробуйте сначала щёлкнуть по нему очень быстро, а потом — так, чтобы между моментами нажатия и отпускания кнопки мыши была бы небольшая пауза.
function Demo() {
const [isChecked, setIsChecked] = React.useState(
false
);
const [playActive] = useSound(
'/sounds/pop-down.mp3',
{ volume: 0.25 }
);
const [playOn] = useSound(
'/sounds/pop-up-on.mp3',
{ volume: 0.25 }
);
const [playOff] = useSound(
'/sounds/pop-up-off.mp3',
{ volume: 0.25 }
);
return (
setIsChecked(!isChecked)}
onMouseDown={playActive}
onMouseUp={() => {
isChecked ? playOff() : playOn();
}}
/>
);
}
▍Досрочное прерывание воспроизведения звука
Иногда нужно, чтобы звук играл бы только тогда, когда пользователь взаимодействует с неким элементом управления. Обратите внимание на то, как в следующем примере сделано так, чтобы звук воспроизводился лишь тогда, когда указатель находится над элементом управления.
function Demo() {
// Попробуйте, ради интереса, поменять 'rising-pops' на:
// - fanfare
// - dun-dun-dun
// - guitar-loop
const soundUrl = '/sounds/rising-pops.mp3';
const [play, { stop }] = useSound(
soundUrl,
{ volume: 0.5 }
);
const [isHovering, setIsHovering] = React.useState(
false
);
return (
);
}
▍Повышение высоты звука
А вот — пример одного интересного эффекта. Он заключается в том, что звук, воспроизводимый при очередном щелчке по кнопке Like, выше звука, воспроизводимого при предыдущем щелчке по ней:
function Demo() {
const soundUrl = '/sounds/glug-a.mp3';
const [playbackRate, setPlaybackRate] = React.useState(0.75);
const [play] = useSound(soundUrl, {
playbackRate,
volume: 0.5,
});
const handleClick = () => {
setPlaybackRate(playbackRate + 0.1);
play();
};
return (
);
}▍Кнопка запуска и приостановки воспроизведения
Вот код реализации кнопки для запуска и приостановки воспроизведения звука, которая поможет вам в разработке нового Spotify:
function Demo() {
const soundUrl = '/sounds/guitar-loop.mp3';
const [play, { stop, isPlaying }] = useSound(soundUrl);
return (
▍Звуковые «спрайт-листы»
Если вы планируете использовать в своём React-компоненте очень много звуков, то может иметь смысл использование звуковых «спрайт-листов». Звуковой «спрайт-лист» — это файл, в котором содержится множество различных звуков. Упаковывая их в один файл, мы повышаем удобство работы с ними и избегаем выполнения множества параллельных HTTP-запросов для загрузки отдельных файлов (хочется надеяться, что когда-нибудь мы сможем пользоваться HTTP/2-мультиплексированием).
Тут мы используем звуковой «спрайт-лист» для создания драм-машины. Поиграть на виртуальных барабанах можно либо с помощью мыши, либо — с помощью клавиш 1–4 на клавиатуре.
function Demo() {
const soundUrl = '/sounds/909-drums.mp3';
const [play] = useSound(soundUrl, {
sprite: {
kick: [0, 350],
hihat: [374, 160],
snare: [666, 290],
cowbell: [968, 200],
}
});
// Пользовательский хук, прослушивающий событие 'keydown',
// и вызывающий подходящий обработчик.
useKeyboardBindings({
1: () => play({ id: 'kick' }),
2: () => play({ id: 'hihat' }),
3: () => play({ id: 'snare' }),
4: () => play({ id: 'cowbell' }),
})
return (
<>
);
}
Подробности о применении звуковых «спрайт-листов» в пакете use-sound можно почитать здесь.
Итоги
В сфере использования звуков при разработке веб-сайтов меня больше всего будоражит то, что это — область, которая исследована очень слабо. Я уже довольно давно экспериментирую со звуками, но всё ещё чувствую, что нахожусь лишь в самом начале пути.
Итак, теперь в вашем распоряжении есть инструменты, используя которые вы можете приступить к собственным экспериментам со звуком. Предлагаю вам этим заняться и узнать о том, куда это вас приведёт.
Уважаемые читатели! Как вы относитесь к применению звуков на веб-страницах?
