Tone.js 无法与 React 一起使用

Question

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

\n\n

import React, { Component, PropTypes } from \'react\';\nimport ReactDOM from \'react-dom\';\nimport Tone from \'tone\';\nimport MuiThemeProvider from \'material-ui/styles/MuiThemeProvider\';\nimport Slider from \'material-ui/Slider\';\nimport RaisedButton from \'material-ui/RaisedButton\';\n\n\nlet sound = new Tone.Player("kick.wav").toMaster();\nexport default class App extends Component {\n\nrender() {\n\n    return(\n        <MuiThemeProvider>\n            <div>\n                <Slider min={0} max={100} step={10} className = "Slider1Test1" style={{height: 400}} axis="y"/>\n                <RaisedButton label="A" className = "RaisedB1Test1" style={{width: 10}}/>\n\n                <Slider min={0} max={100} step={10} className = "Slider2Test1" style={{height: 400}} axis="y"/>\n                <RaisedButton label="B" className = "RaisedB2Test1" style={{width: 10}}/>\n            </div>\n        </MuiThemeProvider>\n    );\n}\n}\n

\n\n

但这给出了一个错误：

\n\n

\n

未捕获（承诺中）DOMException：无法解码音频数据modules.js？hash = 625032f \ xe2 \ x80 \ xa6：48100未捕获（承诺中）Tone.Buffer：\ n无法解码音频数据：kick.wav

\n

\n\n

我尝试过“./kick.wav”、“./kick.ogg”、“./kick.mp3”。我尝试过给出完整的路径。我尝试通过提供 XMLHTTPRequest 来仅使用网络音频 - 它始终是相同的错误。

\n\n

我是新来的反应 - 请让我知道是否有正确的方法来做到这一点。我需要使用 componentDidMount 吗？（我也尝试过使用它。请让我知道正确的方法）。\n谢谢

\n

Answer 1

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

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