Doesn't work in Chrome 71+ about react-music HOT 3 OPEN

+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.

from react-music.

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.

from react-music.

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.

from react-music.