Tone.js无法与React一起使用

Question

我想实现一个基本的Tone Player来从文件夹加载文件并通过在ReactJS中按一个按钮来播放它。

import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Tone from 'tone';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Slider from 'material-ui/Slider';
import RaisedButton from 'material-ui/RaisedButton';


let sound = new Tone.Player("kick.wav").toMaster();
export default class App extends Component {

render() {

    return(
        <MuiThemeProvider>
            <div>
                <Slider min={0} max={100} step={10} className = "Slider1Test1" style={{height: 400}} axis="y"/>
                <RaisedButton label="A" className = "RaisedB1Test1" style={{width: 10}}/>

                <Slider min={0} max={100} step={10} className = "Slider2Test1" style={{height: 400}} axis="y"/>
                <RaisedButton label="B" className = "RaisedB2Test1" style={{width: 10}}/>
            </div>
        </MuiThemeProvider>
    );
}
}

但这给出了一个错误：

未捕获（已承诺）DOMException：无法解码音频数据modules.js？hash = 625032f…：48100未捕获（已承诺）Tone.Buffer：无法解码音频数据：kick.wav

我已经尝试过“ ./kick.wav”、“./kick.ogg”、“./kick.mp3”。 我试图给出完整的路径。 我尝试通过提供XMLHTTPRequest仅使用网络音频-一直都是相同的错误。

我是新来的回应者-请告知我是否有正确的方法。 我需要使用componentDidMount吗？ （我也尝试过使用它。请让我知道正确的方法）。 谢谢

Answer 1

看来您正在使用流星，这以某种方式阻止了您对服务器加载文件的请求。 最简单的解决方案是创建一个public的根目录文件夹，将您的样品在那里。 然后将./kick.wav传递给您的Tone.Player构造函数。 构造函数在GET发出GET请求，并会自动找到您的文件。 除了更改，我还必须添加以下代码以在缓冲区完成加载后播放示例：

const x = new Tone.Player('./kick.wav').toMaster()
Tone.Buffer.on('load', () => {
    x.start();
})