Tone.js不与工作做出反应
我想实现一个基本的纯音播放器从文件夹中加载文件,并通过在ReactJS按下按钮播放。Tone.js不与工作做出反应
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来使用唯一的Web音频 - 它始终是一样的错误。
我是新来的反应 - 请让我知道是否有这样做的正确道路。我需要使用componentDidMount吗? (我也尝试过使用它,请让我知道正确的方法)。 感谢
它看起来像你使用流星,这是莫名其妙地阻止你的请求到服务器加载您的文件。最简单的方法是在你的根目录下创建一个public
文件夹,将您的样品在那里。然后在./kick.wav
传递给你的Tone.Player
构造。构造函数在请求下发出GET
请求,并自动找到您的文件。随着更改,我不得不添加此代码来播放缓冲区加载完成后的示例:
const x = new Tone.Player('./kick.wav').toMaster()
Tone.Buffer.on('load',() => {
x.start();
})
谢谢!你是最棒的! – AgneyaKerure
拯救生命。我不使用流星,只是普通的React,仍然会遇到同样的问题。尽管将声音放入公用文件夹中。 –
您的kick文件位于何处? –
它与App.jsx文件位于同一文件夹中。这有什么区别吗? – AgneyaKerure
如果是在同一个文件夹中,则路径应该是“./kick.wav”你试过。必须有其他错误...你有这个项目的github回购吗?我对解决这个问题感兴趣 –