Example connect to a source from a file about virtual-audio-graph

Thanks :-) I’m away this week - when I have a chance I’ll look and give you feedback. cheers On 23 Jul 2019, at 00:25, Ben Hall <[email protected]<mailto:[email protected]>> wrote: I've added a bit in the docs on working with audio files now so people in the future should find it a bit easier (f96fa5f<f96fa5f>) thanks for the feedback, let me know if you have any other issues! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#66?email_source=notifications&email_token=AAG2WOS6UAZRSRWHUMMIQETQAW7MFA5CNFSM4IFSHKJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2QC3SI#issuecomment-513813961>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAG2WOQQCIAANNFKFF7GCKDQAW7MFANCNFSM4IFSHKJA>.

Hi Ben,

I have implemented the audio graph, inspired by your example. Audio is a new world for me and took a bit of experimentation, but it works a treat. Fyi, the actual code is aded below. Basically a file object (stored in a database) is read into an arrayBuffer, converted to audioBuffer and added into the audio graph.

That has led me to one more question: how can I change the graph on-the-fly, ie while audio is playing? The declarative nature allows a detailed setup, but changing the graph with .update() after some event doesn't do what I hope. Basically I'd like the user to control (through a button click) whether the biquadFilter is applied or not.

Any advice is appreciated!

EDIT: Found it. I'm now getting the audio node (by id) and editing the properties. Works great. Thanks again :-)

Thanks
Mark

            // After reading file soundtrack file....
            fileReader.onload = (event) => {
                if (!event) return null

                const arrayBuffer = fileReader.result
                if (!arrayBuffer || typeof arrayBuffer === 'string') {
                    console.log('arrayBuffer not expected format:', arrayBuffer)
                    return null
                }

                // ... convert the arrayBuffer to an audioBuffer, and ....
                audioContext.decodeAudioData(arrayBuffer)
                    .then((buffer: any) => {

                        // ... play
                        virtualAudioGraph.update({
                            0: gain('output', {gain: 1}),
                            1: biquadFilter(0, {
                                type: 'notch',
                                frequency: 1000,
                            }),
                            2: bufferSource(1, {buffer}),
                        })

                    })
                    .catch((response: Error) => {
                        console.log('decode error', response)
                    })
            }

            // Start the actual read
            fileReader.readAsArrayBuffer(file)

[benji6]

Hi, I don't currently have any documentation on how to do this, but something like this should work:

async function example() {
  const audioContext = new AudioContext()
  const virtualAudioGraph = createVirtualAudioGraph({ audioContext })

  const response = await fetch('my-audio-sample.wav')
  const data = await response.arrayBuffer()
  const buffer = await audioContext.decodeAudioData(data)

  virtualAudioGraph.update({
    0: gain('output', { gain: 0.2 }),
    1: bufferSource(0, { buffer }),
  })
}

There's some more info on the buffer source node here: https://github.com/benji6/virtual-audio-graph/blob/master/docs/standard-nodes.md#buffersource

Over the next few days I'll look at adding an example to the docs to help with this sort of usecase

Awesome! Thanks! On 22 Jul 2019, at 07:01, Ben Hall <[email protected]<mailto:[email protected]>> wrote: Hi, I don't currently have any documentation on how to do this, but something like this should work: async function example() { const audioContext = new AudioContext() const virtualAudioGraph = createVirtualAudioGraph({ audioContext }) const response = await fetch('my-audio-sample.wav') const data = await response.arrayBuffer() const buffer = await audioContext.decodeAudioData(data) virtualAudioGraph.update({ 0: gain('output', { gain: 0.2 }), 1: bufferSource(0, { buffer }), }) } There's some more info on the buffer source node here: https://github.com/benji6/virtual-audio-graph/blob/master/docs/standard-nodes.md#buffersource Over the next few days I'll look at adding an example to the docs to help with this sort of usecase — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#66?email_source=notifications&email_token=AAG2WOSTS753HS3O6ZOEEKTQATFBZA5CNFSM4IFSHKJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2OLQKA#issuecomment-513587240>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAG2WOSG5MVJJKVTC3HROHTQATFBZANCNFSM4IFSHKJA>.

[benji6]

I've added a bit in the docs on working with audio files now so people in the future should find it a bit easier (f96fa5f) thanks for the feedback, let me know if you have any other issues!