如何启用Player对tone.js做出反应？

问题描述

我已经阅读了tone.js的文档几次，但仍然不知道为什么我的代码无法正常工作。

根据此帖子https://github.com/Tonejs/Tone.js/wiki/Using-Tone.js-with-React-or-Vue 我们应该将Sampler用于音频文件/样本，而不要使用tone.js文档中所述的Player。

提供了指向sandbox的超链接，您可以在其中查看演示。

我上传了项目的声音文件，并且可以正常播放。

在我的项目中，尽管在控制台中出现以下错误：

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 (将#修改为@）