🏠 back to Observable

Any cell needs to be run before mouse click works..

On loading this notebook the music will not play until any code cell is run once.

Which seems off as it’s used by an event once a mouse press is done.

Update: I seems it’s like any cell.

I thought I found the bug. :frowning: My default sequence data was bad. I it thought it would be reset, but it wasn’t. So set it to zeros and it still doesn’t work.
Tone.JS Sequencer / Brett Cooper / Observable

Oh I think I have the audio trying to start before user interaction. So I might ignore this problem for now as I think it will be solved when I get to replacing the p5 code with D3.

You probably referenced some old example? Chrome has required (prior) user interaction for audio playback from version 70 onward (which spawned a huge outrage at the time since many sites broke - especially since there was also an allowlist for popular sites).

You can find a monkeypatched AudioContext in Cabbibo In A Bottle / Fabian Iwand / Observable that will automatically resume playback on user interaction, although I don’t recommend to use it.

Early version where working and then I put some of the code into their own cells and it broke.

It is this cell where I setup the synth that breaks the browsers rules.
// Setup a synth with ToneJS
// We use a poly synth which can hold up to numRows voices
// Then we will play each note on a different voice

synth = new Tone.PolySynth({numRows}, Tone.DuoSynth)

Everything is fine if I put in inside the p5 setup area.

Not sure how to make this wait until a user action done before instantiating.

You need to have your audio code (specfically any Tone.js instantiation) wait for a user interaction, e.g. a play button:

viewof soundEnabled = Inputs.button('Enable sound', {required: true})
Tone = soundEnabled, require('tone')

Alternatively you can try the AudioContext patch:

import {patchAudioContext} from '@mootari/cabbibo-in-a-bottle'
Tone = patchAudioContext(), require('tone')
1 Like