WebAudio

Фантастический WebAudio и где его искать юзать

Максим Сырых для #uraljs №3

bit.ly/uraljs-webaudio

Элемент <audio>

			<audio src="src.wav">
			    Ваш браузер не поддерживает элемент audio
			</audio>
		

Поддерживаемые форматы

Элемент <source>

			<audio>
			    <source src="example.webm" type="audio/webm">
			    <source src="example.mp4" type="audio/mp4">
			</audio>
		

DEMO: <audio>

			let audio = document.createElement('audio')
		  audio.src = 'sounds/tag-audio-demo.mp3'
			 
			let btnMute = document.getElementById('tag-audio-demo--mute')
			let playMute = document.getElementById('tag-audio-demo--play')
			let pauseMute = document.getElementById('tag-audio-demo--pause')
		

DEMO: <audio>

			btnMute.onClick = e => {
				audio.muted = !audio.muted
			}
			 
			playMute.onClick = () => { audio.play() }
			pauseMute.onClick = () => { audio.pause() }
		

DEMO: <audio>

DEMO

1. DEMO 1
2. DEMO 2
3. DEMO 3

node.connect(node)

			const myAudio = document.querySelector('audio')
			const context = new AudioContext()
			 
			const source = context.createMediaElementSource(myAudio)
			const gainNode = context.createGain()
			const delayNode = context.createDelay(5.0)
		

node.connect(node)

			...
			source.connect(delayNode)
			delayNode.connect(gainNode)
			gainNode.connect(context.destination)
		

Типы узлов

1. Источники и выходы звука
2. Фильтры
3. Анализаторы
4. ...

Источники звука

1. MediaElementAudioSourceNode
2. MediaStreamAudioSourceNode

MediaStreamAudioSourceNode

			const context = new AudioContext()
			navigator.getUserMedia(
				{ audio: true, video: false },
				stream => {
					const source = context.createMediaStreamSource(stream)
				}
			)
		

Источники звука

1. MediaElementAudioSourceNode
2. MediaStreamAudioSourceNode
3. AudioBufferSourceNode
4. OscillatorNode

Demo: Synth

Gain \ усилитель

			const context = new AudioContext()
			const gainNode = context.createGain()
			 
			gainNode.gain.value = 0 // muted
			gainNode.gain.value = 1 // 100% volume
			gainNode.gain.value = 3 // 300% volume
		

Delay \ задержка

			const context = new AudioContext()
			const delayNode = context.createDelay(1.0)
		

BiquadFilterNode

			const context = new AudioContext()
			const biquadFilter = context.createBiquadFilter()
			biquadFilter.type = "bandpass"
			biquadFilter.frequency.value = 1000
			biquadFilter.Q.value = 100
			biquadFilter.gain.value = 25
		

BiquadFilterNode \ Типы

Возможности

1. Точная синхронизация
2. Cинтезирование звука (генерация)
3. Обработка/анализ звука
4. Позиционирование в пространстве
5. Многоканальное аудио (до 32-х каналов)
6. WebRTC (P2P)
7. Любой каприз

<audio>

1. Музыка играет
2. Простое API
3. Можно управлять громкостью и перемоткой
4. Нельзя точно контролировать когда будет воспроизводится звук

Web Audio

1. Более сложное API
2. Можно вообще всё

Смотреть еще

1. Документация: AudioContext
2. Интро в Web Audio от html5rocks
3. Демо: модульный синтезатор
4. Демо: Tonecraft by DinahMoe
5. Еще больше демок
6. Tone.JS – фреймворк

bit.ly/uraljs-webaudio

tech.skbkontur.ru/talks