Web Audio API support?

[jimapl]

Hi quick question,
Would it be possible to use the Web Audio API, instead of relying on an audio html element?
Im working on a project where im trying to achieve a bit more drm protection. And am looking into a way to not be reliant on this!

To be more specific:
audioContext or webkitAudioContext

Thanks for v7!

[katspaugh]

You can create a Web Audio player to shim an audio element like this:

import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'
import WebAudioPlayer from 'https://unpkg.com/wavesurfer.js@7/dist/webaudio.js'

const webAudioPlayer = new WebAudioPlayer(/* optionally pass your own AudioContext instance */)
webAudioPlayer.src = '/examples/audio/audio.wav'

const wavesurfer = WaveSurfer.create({
  container: document.body,
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  media: webAudioPlayer,
})

wavesurfer.on('click', () => {
  wavesurfer.play()
})

It uses a BufferSourceNode + GainNode under the hood. You can access the GainNode via webAudioPlayer.getGainNode.

[jimapl]

Thanks for the quick reply man! gold!

Will try to implement this.

[ruchaheda]

I tried to implement this option and I am getting the following error when trying to set the media attribute in the way shown above:

Type 'WebAudioPlayer' is missing the following properties from type 'HTMLMediaElement': buffered, controls, defaultMuted, defaultPlaybackRate, and 329 more.ts(2740)
wavesurfer.d.ts(40, 5): The expected type comes from property 'media' which is declared here on type 'WaveSurferOptions'

What am I doing wrong?

[RylanBot]

I had the same problem. @katspaugh