У меня была тонна веселья, создавая интерактивные музыкальные инструменты и ссылки на MUTED.IO Отказ Такие вещи, как Интерактивный круг 5-е годы , а Ссылка на все основные и незначительные весы и инструмент для Играть в аккорды в ключах Отказ
Под капотом эти инструменты питаются от библиотеки TONE.JS, которая является набором утилит, сбор которых сверху Web Audio API , что облегчает дело с аудио в браузере с точки зрения музыканта. Для вышеупомянутых инструментов пользовательские взаимодействия обрабатываются с использованием Alpine.js Отказ Я обнаружил, что комбинация Tone.js + Alpine.js действительно работает как очарование.
Этот короткий пост дает вам небольшой грунт о том, как вы пойдете о настройке вещей, чтобы играть в аудиофайлы в браузере таким образом.
Во-первых, сначала вы захотите иметь Tone.js и Alpine.js загружены на вашу страницу. Если вы посмотрите на Tone.js Документация Это скажет вам инструкцию по установке через NPM , но лично я наслаждался работающим с вызовом до мини-файла мини-сценария. Чтобы сделать это через CDN, вы можете добавить это на свою страницу голова раздел:
А потом так же для Установка Alpine.js :
Обратите внимание, что на сайте, как NUMED.IO, я решил загрузить Tone.js только тогда, когда пользователь прокручивается, передается соответствующую часть страницы. Я использую Alpine Пересекающийся плагин достичь этого. Это, конечно, необязательно, и я могу говорить о деталях этого в будущем посте.
С настройкой выхода на пути вы должны увидеть сообщение в вашей консоли браузера, которая говорит что-то вроде _ Tone.js v14.8.32 _ означает, что Tone.js был правильно загружен и готов к работе.
Tone.js Sampler
Sampler – это инструмент, который облегчает воспроизведение разных аудиофайлов. Tone.js предлагает свой Инструмент сэмплера :
const sampler = new Tone.Sampler({
urls: {
C3: 'C3.mp3',
'D#3': 'Ds3.mp3',
'F#3': 'Fs3.mp3',
A3: 'A3.mp3',
C4: 'C4.mp3',
'D#4': 'Ds4.mp3',
'F#4': 'Fs4.mp3',
A4: 'A4.mp3',
},
release: 0.5,
baseUrl: '/sounds/piano/',
}).toDestination();
В приведенном выше блоке кода я создал пробоотборник и прохождение в пути к аудиофайлам для разных музыкальных нот на фортепиано. В этом случае я использую образцы фортепиано из Саламандр Grand Piano V3 Проект, но вы можете использовать любой из ваших собственных образцов. В этом случае звуки находятся в каталоге моего проекта под /Звуки/Фортепиано/ . Вы также заметите, что не все заметки включены, это потому, что Tone.js достаточно умны, чтобы отталкивать образцы и составляют любые недостающие поля. Это действительно полезно для экономии времени загрузки для образцов.
Эта настройка работает великолепно в музыкальном контакте для воспроизведения звуков, которые фактически соответствуют музыкальным ударам, но вы, конечно, могут использовать пробоотборник, чтобы вызвать совершенно не связанные звуки. Вы могли, например, решить, что C4 запускает звук тукана в то время как A4 для коры абразивной собаки. 🐕
Играть на звуки
Теперь, когда у нас есть настройка нашего прибора Sampler, мы готовы начать прослушивание взаимодействий пользователей и вызвать звуки. Давайте сначала определим простую функцию, которая вызывает пропущенную записку:
function play(note = "C4") {
sampler.triggerAttackRelease(note, "8n");
}
С этим, призывая Играть () Запустит аудиофайл, связанный с приведенным к приведенным вопросам (или по умолчанию для C4 ) в вашем пробоотдачении в течение 8-го примечания. Значение BPM по умолчанию в Tone.js – 120 , что будет то, что контролирует, как долго 8th Примечание есть. Вы можете настроить значение BPM, как это:
Tone.Transport.bpm.value = 96; // 96 BPM instead of 120
Теперь, когда у нас есть наш Играть Функция на месте мы можем использовать Alpine для настройки ссылки на что-то вроде кнопки:
И сделано! Теперь вы должны услышать образец, который имеет ваш пробоотборник для A3 Отказ Примечание. Здесь, что щелчок кнопки важен, потому что современные браузеры требуют пользовательского взаимодействия, такую как кнопку, нажмите, чтобы начать воспроизведение звуков на странице.
Отделение атаки от выпуска
Ранее мы использовали TriggerAttackrelease На нашем пробоотдачении, который заботится о запуске образца, а также выпуску, который спускового крючка после обеспечения продолжительности (A 8th Примечание в нашем примере). Что, если вместо этого мы хотели воспроизвести звук до тех пор, пока пользователь в настоящее время нажал кнопку? Это часто полезно для длинных образцов, которые должны быть воспроизведены только во время активации примечания (например, кнопка нажата). Мы можем легко отделить операцию, используя TriggerAttack и TriggerRelease Вместо этого способа:
function startPlay(note) {
sampler.triggerAttack(note);
}
function stopPlay(note) {
sampler.triggerRelease(note);
}
Обратите внимание, что вы также можете пройти в массиве с несколькими заметками одновременно к любому из этих методов ( TriggerAttackrealEase , TriggerAttack , TrgerRelease ), позволяя вам вызвать такие вещи, как аккорды, если вы Запускание звуков в музыкальном контексте.
И теперь мы можем снова использовать возможности обработки событий Alpine для:
Здесь я использую Mousedown и мышцы События для развязки нажатия кнопки и кнопки отбережать. Вы также заметите, что я использую трогать и трогать , в котором исправляет вопрос о том, что устройства сенсорного экрана не имеют события Mousedown или MouseUp. Чтобы остановить распространение события, я использую Стоп модификатор На всех событиях и для предотвращения поведения по умолчанию я также использую предотвратить модификатор на сенсорных событиях. Это исправляет проблему, когда событие в противном случае будет длиться дважды на устройствах с помощью мыши.
Вот и все! Надеюсь, это короткое введение было достаточно, чтобы показать вам, насколько легко можно запускать звуки в браузере и начать веселиться с этим в своих собственных проектах! ✨ 🔊.
Ради краткости я держал часть с участием Alpine.js очень коротко и сладко в этом посте. В реальном сценарии вы, вероятно, захотите использовать x-data Делать такие вещи, как следить за примечаниями/звуками, которые играют:
...
Оригинал: “https://dev.to/sebseb/playing-sound-on-the-web-using-tonejs-and-alpinejs-17ad”