Всегда есть чему поучиться. Это благословение и проклятие; в то время как ваше любопытство и усилия в понимании новых инструментов и парадигм, как правило, будут вознаграждены, есть риск попасть в кроличью нору, если вы точно не знаете, что ищете. Если вам нужен очень краткий и функциональный обзор API веб-аудио, этого руководства должно быть достаточно для начала работы.
В самой простой реализации этот API поможет вам отображать тона. Хотя он также может включать аудиопотоки и изменять записи из звуковых и видеофайлов, я расскажу о реализации чистой генерации тона. Не стесняйтесь кодировать в своей консоли!
Первым шагом является объявление контекста веб-аудио. Контекст — это «пространство», в котором звучит музыка; он содержит методы, которые создают инструменты, с помощью которых мы будем строить.
Настройка аудиоконтекста так же проста, как:
var AudioContext = window.AudioContext ||window.webkitAudioContext; var audioCtx = new AudioContext()
В приведенных выше строках кода мы объявили и присвоили AudioContext и разрешили его создание либо в окне, либо в window.webkit (мы предоставляем оба варианта, чтобы обеспечить необходимую гибкость браузера). Затем мы объявляем и назначаем переменную для вызова нового метода AudioContext, что дает нам прямой доступ к методам, содержащимся в AudioContext.
var oscillator = audioCtx.createOscillator()
Самый полезный и интересный метод — это .createOscillator. Удачно названный, этот метод позволяет нам создавать осцилляторы. Эта способность хороша, но, если мы не понимаем, что такое осциллятор, она может показаться пропорционально менее полезной и интересной. Короче говоря, все звуки — это вибрации (или колебания). И если они вибрируют в определенном диапазоне (обычно от 20 до 20 000 герц), они будут воспроизводить звуки, слышимые человеком. Осцилляторы — это простые программы, которые отображают сигналы заданной формы и частоты.
oscillator.type = “sine”
Эта строка задает «форму» генерации генератора. Что касается чистых тонов, API веб-аудио работает с четырьмя основными формами: синусоидой, квадратом, треугольником и пилообразной формой. С точки зрения качества звука синусоида самая нежная, плавно перемещающаяся между высокими и низкими частотами. Треугольники звучат тоньше, им не хватает равномерного прохождения синуса. Квадратные и пилообразные волны звучат «шумнее», чем две другие, поскольку они перемещаются непосредственно между максимумами и минимумами. Играть с различными формами волны в этом случае так же просто, как изменить «синусоиду» на «треугольник», «квадрат» или «пилу».
oscillator.frequency.value = 440
Приведенный выше код устанавливает частоту генератора и, в свою очередь, высоту тона, генерируемого генератором. Я ссылался на эту диаграмму для частот, которые соответствовали установленным, устойчивым тонам.
oscillator.start() oscillator.stop(.8)
Две строки выше содержат команды запуска и остановки созданного генератора. Осциллятор нельзя использовать повторно — он будет создан, сгенерирует форму волны и частоту, а затем завершится. Новые генераторы должны быть созданы для генерации дополнительных звуков.
oscillator.connect(audioCtx.destination)
Этот последний фрагмент кода соединяет осциллятор с методом назначения. Как правило, сам пункт назначения — это любое оборудование, через которое компьютер в конечном итоге воспроизводит звуки, например. динамики или наушники, а метод назначения AudioContext отправляет созданный нами сигнал в место назначения. Не слишком потрепанный!
В совокупности эти шаги образуют краткий вводный тур по реализации API веб-аудио в вашем веб-приложении!
var AudioContext = window.AudioContext ||window.webkitAudioContext; var audioCtx = new AudioContext() var oscillator = audioCtx.createOscillator() oscillator.type = “sine” oscillator.frequency.value = 440 oscillator.start() oscillator.stop(.8) oscillator.connect(audioCtx.destination)
