javascript - 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