forked from katspaugh/wavesurfer.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webaudio.js
73 lines (61 loc) · 2.09 KB
/
webaudio.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Web Audio example
import WaveSurfer from 'wavesurfer.js'
// Create your own media element
const audio = new Audio()
audio.controls = true
audio.src = '/examples/audio/audio.wav'
// Create a WaveSurfer instance and pass the media element
const wavesurfer = WaveSurfer.create({
container: document.body,
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
media: audio, // <- this is the important part
})
// Optionally, add the audio to the page to see the controls
document.body.appendChild(audio)
// Now, create a Web Audio equalizer
// Create Web Audio context
const audioContext = new AudioContext()
// Define the equalizer bands
const eqBands = [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
// Create a biquad filter for each band
const filters = eqBands.map((band) => {
const filter = audioContext.createBiquadFilter()
filter.type = band <= 32 ? 'lowshelf' : band >= 16000 ? 'highshelf' : 'peaking'
filter.gain.value = Math.random() * 40 - 20
filter.Q.value = 1 // resonance
filter.frequency.value = band // the cut-off frequency
return filter
})
// Connect the audio to the equalizer
audio.addEventListener(
'canplay',
() => {
// Create a MediaElementSourceNode from the audio element
const mediaNode = audioContext.createMediaElementSource(audio)
// Connect the filters and media node sequentially
const equalizer = filters.reduce((prev, curr) => {
prev.connect(curr)
return curr
}, mediaNode)
// Connect the filters to the audio output
equalizer.connect(audioContext.destination)
},
{ once: true },
)
// Create a vertical slider for each band
const container = document.createElement('p')
filters.forEach((filter) => {
const slider = document.createElement('input')
slider.type = 'range'
slider.orient = 'vertical'
slider.style.appearance = 'slider-vertical'
slider.style.width = '8%'
slider.min = -40
slider.max = 40
slider.value = filter.gain.value
slider.step = 0.1
slider.oninput = (e) => (filter.gain.value = e.target.value)
container.appendChild(slider)
})
document.body.appendChild(container)