React - 完全加载时播放音频

Question

我想只在满载时播放音频。因此，如果有人网络连接速度慢，它就不会口吃。我的组件如下所示：

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

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

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

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

        return (
            <div>
                { isLoaded ? 'Playing' : 'Loading' }
                <audio
                    preload="auto"
                    src={require(`../static/songs/${song}.mp3`)}
                    loop="true"
                    autoPlay={false}
                    onLoadedData={() => this.playSong()}
                />
            </div>
        );
    }
};

如果我将Chrome DevTools中的网络选项卡中的限制设置为GPRS（50 kb / s），它将开始逐个播放音频，这很糟糕：/。

如果完全加载音频怎么播放？

Answer 1

您可以使用sound manager - 这里是usage example