Знаю, многие меня в этом желании не поддержат. И не без причины! Исторически сложилось так, что звуки в интернете использовались крайне неудачно и некрасиво:
- В ранние дни веба некоторые страницы проигрывали фоновую 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 <button onClick={play}>Boop!</button>; }; Использование этого хука добавляет примерно 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 ( <Checkbox name="demo-checkbox" checked={isChecked} size={24} label="I agree to self-isolate" onChange={() => 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 ( <Button onMouseEnter={() => { setIsHovering(true); play(); }} onMouseLeave={() => { setIsHovering(false); stop(); }} > <ButtonContents isHovering={isHovering}> Hover over me! </ButtonContents> </Button> ); }
▍Повышение высоты звука
А вот — пример одного интересного эффекта. Он заключается в том, что звук, воспроизводимый при очередном щелчке по кнопке 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 ( <Button onClick={handleClick}> <span role="img" aria-label="Heart"> </span> </Button> ); }
▍Кнопка запуска и приостановки воспроизведения
Вот код реализации кнопки для запуска и приостановки воспроизведения звука, которая поможет вам в разработке нового Spotify:
function Demo() { const soundUrl = '/sounds/guitar-loop.mp3'; const [play, { stop, isPlaying }] = useSound(soundUrl); return ( <PlayButton active={isPlaying} size={60} iconColor="var(--color-background)" idleBackgroundColor="var(--color-text)" activeBackgroundColor="var(--color-primary)" play={play} stop={stop} /> ); }
▍Звуковые «спрайт-листы»
Если вы планируете использовать в своём 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 ( <> <Button aria-label="kick" onMouseDown={() => play({ id: 'kick' })} > 1 </Button> <Button aria-label="hihat" onMouseDown={() => play({ id: 'hihat' })} > 2 </Button> <Button aria-label="snare" onMouseDown={() => play({ id: 'snare' })} > 3 </Button> <Button aria-label="cowbell" onMouseDown={() => play({ id: 'cowbell' })} > 4 </Button> </> ); } Подробности о применении звуковых «спрайт-листов» в пакете use-sound можно почитать здесь.
Итоги
В сфере использования звуков при разработке веб-сайтов меня больше всего будоражит то, что это — область, которая исследована очень слабо. Я уже довольно давно экспериментирую со звуками, но всё ещё чувствую, что нахожусь лишь в самом начале пути.
Итак, теперь в вашем распоряжении есть инструменты, используя которые вы можете приступить к собственным экспериментам со звуком. Предлагаю вам этим заняться и узнать о том, куда это вас приведёт.
Уважаемые читатели! Как вы относитесь к применению звуков на веб-страницах?
ссылка на оригинал статьи https://habr.com/ru/company/ruvds/blog/495896/
Добавить комментарий