javascript - プレイヤーがtone.jsに反応するようにするにはどうすればよいですか?

Question

私はtone.jsのドキュメントを数回読んだことがありますが、コードが機能しない理由はまだわかりません.

この投稿https://github.com/Tonejs/Tone.js/wiki/Using-Tone.js-with-React-or-Vueに よると、tone.js のドキュメント。SamplerPlayer

デモを表示できるサンドボックスへのハイパーリンクが提供されています。

プロジェクトのサウンド ファイルをアップロードしたところ、問題なく再生できました。

私のプロジェクトでは、コンソールに次のエラーが表示されます。

URL キーは音符でも MIDI ピッチでもありません: サウンド

私が理解している限り、それはサンプラーがファイルを処理できないことを意味します。

これがおそらく Player が導入された理由です。

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 を使用したサンドボックスでのみ機能します。

上記のコードを実行すると、次のエラーが表示されます: 「バッファが設定されていないか、ロードされていません」

更新: プレーヤーを実行しましたが、次のスレッドで説明されている別の問題に遭遇しました。投稿の下部にあるコードサンドボックスで解決策を見つけることができます。

私に従ってください：useEffectフック（反応）内でPlayerのtone.jsのボリュームスライダーを有効にする方法は？