Javascript Tone.js不使用React

我想实现一个基本的音调播放器，从文件夹中加载一个文件，并通过按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>
    );
}
}

import React，{Component，PropTypes}来自'React'；
从“react dom”导入react dom；
从“音调”导入音调；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/滑块”导入滑块；
从“物料界面/RaisedButton”导入RaisedButton；
让声音=新音调.Player（“kick.wav”）.toMaster（）；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

但这会产生一个错误：

未捕获（承诺中）数据异常：无法解码音频数据模块。js？hash=625032f…：48100未捕获（承诺中）音调。缓冲区： 无法解码音频数据：kick.wav

我试过“/kick.wav”、“/kick.ogg”、“/kick.mp3”。我试着给出完整的路径。我曾经尝试过通过提供XMLHTTPRequest只使用web音频——这一直都是相同的错误

我是新的反应-请让我知道，如果有一个正确的方法来做到这一点。我需要使用componentDidMount吗？（我也试过使用它。请告诉我正确的方法）。

---

谢谢

看起来您正在使用meteor，这会以某种方式阻止您对服务器加载文件的请求。最简单的解决方案是在根目录中创建一个

public

文件夹，并将示例放在其中。然后将

/kick.wav

传递给您的

Tone.Player

构造函数。构造函数在引擎盖下发出

GET

请求，并将自动找到您的文件。除了更改之外，我还必须添加以下代码，以便在缓冲区完成加载后播放示例：

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

---

看起来您正在使用meteor，这会以某种方式阻止您向服务器加载文件的请求。最简单的解决方案是在根目录中创建一个

public

文件夹，并将示例放在其中。然后将

/kick.wav

传递给您的

Tone.Player

构造函数。构造函数在引擎盖下发出

GET

请求，并将自动找到您的文件。除了更改之外，我还必须添加以下代码，以便在缓冲区完成加载后播放示例：

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

---

您的kick文件位于哪里？它与App.jsx文件位于同一文件夹中。这有区别吗？如果它在同一个文件夹中，那么路径应该是您尝试的“/kick.wav”。一定还有别的错误。。。你有这个项目的github回购协议吗？我对解决这个问题很感兴趣还有，你用的是什么浏览器？有些浏览器不支持某些音频类型。嘿，谢谢你的关注。在这里，你去-请随时添加功能，如果你没有找到他们在当前版本。我还没有将当前代码推入回购协议。另外，我也试过使用Chrome、Firefox、Chrome Canary——它们都不适用于我。你的kick文件位于哪里？它与App.jsx文件位于同一文件夹中。这有区别吗？如果它在同一个文件夹中，那么路径应该是您尝试的“/kick.wav”。一定还有别的错误。。。你有这个项目的github回购协议吗？我对解决这个问题很感兴趣还有，你用的是什么浏览器？有些浏览器不支持某些音频类型。嘿，谢谢你的关注。在这里，你去-请随时添加功能，如果你没有找到他们在当前版本。我还没有将当前代码推入回购协议。另外，我也试过使用Chrome、Firefox、Chrome Canary——它们中没有一个对我的工作影响这么大，Stephen！你是最棒的！救生员。我没有使用流星，只是简单的反应，仍然得到相同的问题。但是把声音放在一个公共文件夹里解决了。非常感谢Stephen！你是最棒的！救生员。我没有使用流星，只是简单的反应，仍然得到相同的问题。但将声音放在公用文件夹中解决了这一问题。