如何解决如何启用Player对tone.js做出反应?
我已经阅读了tone.js的文档几次,但仍然不知道为什么我的代码无法正常工作。
根据此帖子https://github.com/Tonejs/Tone.js/wiki/Using-Tone.js-with-React-or-Vue
我们应该将Sampler
用于音频文件/样本,而不要使用tone.js文档中所述的Player
。
在我的项目中,尽管在控制台中出现以下错误:
URL键既不是音符也不是中音:声音
据我了解,这意味着采样器无法处理文件。
可能是介绍播放器的原因。
我通过Chrome和最新的tone.js版本运行本地服务器。
import React,{ Component } from 'react';
import './DrumMachine.css';
import Button from '../buttons/Button';
import { Player,Buffer } from 'tone';
import Sound from '../audio/sound.wav' //src\audio\sound.wav
var buff1 = new Buffer(Sound);
class DrumMachine extends Component {
constructor(props) {
super(props);
this.state = {
isLoaded: false
};
this.handleClick = this.handleClick.bind(this);
this.player = new Player(
{ Sound },{ onload: () => {
console.log('loaded');
this.setState({isLoaded: true});
}}
).toDestination();
}
handleClick() {
console.log(this.state.isLoaded);
this.player.start();
}
render() {
const { isLoaded } = this.state;
return (
<div className='drum-machine'>
<Button disabled={!isLoaded} onClick={this.handleClick}>Btn1</Button>
<Button>Btn2</Button>
<Button>Btn3</Button>
<Button>Btn4</Button>
<Button>Btn5</Button>
<Button>Btn6</Button>
<Button>Btn7</Button>
<Button>Btn8</Button>
</div>
)
}
}
export default DrumMachine;
我已将Master
更改为Destination
,因为根据文档,该方法不再在较新的版本中使用。我以前以各种方式尝试过,但没有成功。仅适用于v.13.4.9上的Sampler沙盒。
如果我运行上面的代码,我得到:错误: “未设置缓冲区或未加载缓冲区”
更新:我让播放器运行,但是遇到了另一个问题,下面的线程对此进行了讨论。您可以在帖子底部的codeandBox中找到解决方案。
跟我来:How to enable volume slider of Player tone.js inside of useEffect hook(react)?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。