Tone.js 不使用 React

Question

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

但这给出了一个错误：

Uncaught (in promise) DOMException: Unable to decode audio data modules.js?hash=625032f…:48100 Uncaught (in promise) Tone.Buffer: could not decode audio data: kick.wav

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

我是新手 - 如果有正确的方法，请告诉我。我需要使用 componentDidMount 吗？（我也尝试过使用它。请告诉我正确的方法）。谢谢

Answer 1

您似乎在使用 meteor，这会以某种方式阻止您请求服务器加载您的文件。最简单的解决方案是在您的根目录中创建一个 public 文件夹，并将您的示例放在其中。然后将 ./kick.wav 传递给您的 Tone.Player 构造函数。构造函数在后台发出 GET 请求，并会自动找到您的文件。随着更改，我必须添加此代码以在缓冲区完成加载后播放示例：

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

Tone.js 不使用 React

Tone.js not working with React

javascript

meteor

reactjs

web-audio-api