1

I am using the web audio api to make a series of demonstrations of simple computer music / electronic music concepts. In one example, I show how to build a square wave by successively adding sine waves going up the harmonic series, and displaying an oscilloscope view of the process.

I am including an input range slider to adjust the fundamental frequency at will, which requires the use of a constantSourceNode: the frequencies of all of the oscillators need to be changed simultaneously, otherwise, they get out of phase, ruining the visuals of the demonstration. I've got it working great in chrome, but it seems that

audioContext.createConstantSource()

is not supported in Safari. Any suggestions for a workaround / alternate implementation?

(Here is a link to a codepen of the demonstration, working in chrome).

1 Answer 1

2

Safari does not yet have an implementation for the ConstantSourceNode. If you want to keep your code the way it is you could use standardized-audio-context which includes an implementation of the ConstantSourceNode for browsers which don't support it natively.

But you could also build your own if you prefer that. A looped AudioBufferSourceNode with a constant signal and a GainNode can be used to achieve the same effect. The AudioBuffer used with the AudioBufferSourceNode needs to have at least two samples because if it only has one sample Safari will not loop it.

7
  • Thanks. I've tried to build my own, as you suggested. I believe I have implemented it correctly; I create an AudioBufferSourceNode, fill it with a looping buffer that is 1 sample long, and have my input range slider update the underlying buffer channel data. I then attach this to the detune audioParam of each of my oscillators via AudioBufferSourceNode.connect(Oscillator.detune). Again, it works fine in Chrome, but the detune doesn't seem to be doing anything in Safari. No error message, just doesn't work. (here's the new codepen: codepen.io/jon-myers/pen/bGVqbKr)
    – jon-myers
    Apr 23, 2020 at 22:08
  • Unfortunately there is another bug in Safari which prevents it from looping a single sample buffer. The buffer has to have at least two samples. I will update my answer to mention that as well. Apr 24, 2020 at 15:44
  • @jon-myers – how are you updating the underlying channel data? I've tried doing that (for samples, not the ConstantSourceNode workaround), and my experience was that browsers will ignore attempts to change the buffer once it's started playing.
    – Luxocrates
    Apr 26, 2020 at 21:02
  • (edit: that said, if taking this approach, you could always feed it through a gain node whose gain you're attenuating, as an alternative to editing in-flight buffer data. Still, I'm curious how you achieved it)
    – Luxocrates
    Apr 26, 2020 at 21:10
  • hmm, I haven't run into that problem. First I assign the buffer channel data to a variable, and then I fill that with whatever the new value is. bufferData = audioContext.bufferSourceNode.buffer.getChannelData(0); bufferData.fill(newValue)
    – jon-myers
    Apr 26, 2020 at 21:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.