Doesn't work in Chrome 71+

[mgol]

If you open the page in Chrome 71 or newer, it displays a blank rectangle with a Stop/Start button. Clicking the button, even multiple times, doesn't do anything.

The DevTools console displays a warning:

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

The URL linked at the end of the message explains the issue. tl;dr is included in one box:

Key Point: If an AudioContext is created prior to the document receiving a user gesture, it will be created in the "suspended" state, and you will need to call resume() after a user gesture is received.

This is a measure preventing websites from playing potentially unwanted audio, as I understand.

Tested on macOS 10.13.6 (17G4015) but the issue should be present on all operating systems.

[DarthVanger]

+1. Same for me on Ubuntu 18.04: Visiting http://reactmusic.surge.sh/ I can see the same warning in the console, empty square on the screen, and no music in Chromium Version 73.

But in Firefox it works.

[mjdewitt]

I am exploring react and decided to take a stab at fixing this in Chrome. I'm sure there are better ways to address this, but I got it working with changes to handlePlayToggle in demo.js:

` handlePlayToggle() {
this.setState({
playing: !this.state.playing,
});

if (this.state.playing) {
	console.log('audio state playing');	
	if (this.audioCtx == undefined) {
		var audioCtx = (window.AudioContext || window.webkitAudioContext);
		this.audioCtx = new audioCtx();
	}    			 
	this.audioCtx.resume();
} else { //state.playing
	console.log('audio state not playing');	 
  if (this.audioCtx == undefined) {
  	var audioCtx = (window.AudioContext || window.webkitAudioContext);
	  	this.audioCtx = new audioCtx();
	}   				
	this.audioCtx.suspend();
} //state.playing

}`

Now I can have some fun with this.

[mjdewitt]

Well,
Apologies as it seemed to be working, but I think it was just a fluke. A better answer is modifying song.js:

componentDidUpdate(prevProps: Object, prevState: Object) { if (prevState.buffersLoaded !== this.state.buffersLoaded || prevProps.playing !== this.props.playing) { if (this.state.buffersLoaded === true && this.props.playing === true) { setTimeout(() => { this.scheduler.start(this.loop); this.audioContext.resume(); \\<==add this to make play work }, 0); } else { this.scheduler.stop(true); this.audioContext.suspend(); \\<==add this to stop an error } } }

I ran into other issues like the Play/Stop button label being reversed, and not knowing react, I came up with what I am sure is the wrong way to do it, but it works for me. There is definitely some weirdness in the demo constructor in setting state as it seemed to be always reinitializing the state of things after the toggle call.

and so, I added these tests:
this.state = { playing: true, lightMode: true, }; //+++++++++ added these if (this.state.showPlay == undefined) { console.log('setting showPlay'); this.state = { showPlay: true, }; } if (this.state.lightMode == undefined) { //a react error was thrown on load if you changed lightmode without first playing. console.log('setting lightMode'); this.state = { lightMode: true, }; }

I modified handlePlayToggle to handle the new variable for the button:
handlePlayToggle() { this.setState({ playing: !this.state.playing, showPlay: !this.state.showPlay, }); console.log('showPlay is '+this.state.showPlay); } //handleplaytoggle

last change was to the button:

{this.state.showPlay ? 'Play' : 'Stop'}

This seems to be working reliably in Chrome now and seems to work in Firefox too. But again, I don't know react and just want to use this to play with music.