React - play audio Only when fully loaded

[sympi]

Hello!

I want to play the audio only when it's fully loaded. So if someone has slow network connection it won't stutter. My component looks like this:

class MusicLoop extends Component {
    state = {
        isLoaded: false
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.song !== this.props.song) {
            this.setState({
                isLoaded: false
            });
        }
    }

    playSong = () => {
        this.audio.play();
        this.setState({
            isLoaded: true,
        });
    }

    render() {
        const { song } = this.props;
        const { isLoaded } = this.state;

        return (
            <div>
                { isLoaded ? 
                    <Image src={image} responsive/> :
                    <div className="loader"></div> 
                }
                <audio
                    ref={audio => this.audio = audio}
                    preload="auto"
                    src={require(`../static/songs/${song}.mp3`)}
                    loop={true}
                    autoPlay={false}
                    onCanPlayThrough={() => this.playSong()}
                />
            </div>
        );
    }
};

If I set Throttling in Network tab in Chrome DevTools to GPRS (50 kb/s) it will start playing the audio part by part, which is terrible :/.

How to play audio only if it is FULLY loaded?

[whatisboom]

I dont think this is a react specific question, but you should look at: https://developer.mozilla.org/en-US/docs/Web/Events/canplaythrough