Javascript 如何在react with tone.js中启用播放器？

我已经阅读了tone.js的文档好几次了，但仍然不知道为什么我的代码不起作用

根据这篇文章 我们应该使用

采样器

来采集音频文件/样本，而不是文档中所述的

播放器

提供了一个指向的超链接，您可以在其中看到演示

我上传了我的项目的声音文件，并能够播放它没有任何问题

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

url键既不是音符也不是midi音高：声音

据我所知，这意味着采样器无法处理文件

这可能就是为什么引入了该玩家

我通过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;

import React，{Component}来自'React'；
导入“/DrumMachine.css”；
从“../buttons/Button”导入按钮；
从“音调”导入{Player，Buffer}；
从“../audio/Sound.wav”//src\audio\Sound.wav”导入声音
var buff1=新缓冲器（声音）；
类DrumMachine扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false
};
this.handleClick=this.handleClick.bind（this）；
this.player=新玩家(
{声音}，
{onload:（）=>{
console.log（'loaded'）；
this.setState（{isLoaded:true}）；
}}
).toDestination（）；
}
handleClick（）{
console.log（this.state.isLoaded）；
这个.player.start（）；
}
render（）{
const{isLoaded}=this.state；
返回(
Btn1
Btn2
Btn3
Btn4
Btn5
Btn6
Btn7
Btn8
)
}
}
导出默认DrumMachine；

根据文档，我已将

Master

更改为

Destination

，因为新版本中不再使用该方法。我以前试过各种方法，但都没有用。仅在v.13.4.9中带取样器的沙箱中工作

如果我运行上面的代码，我会得到：错误：“缓冲区未设置或未加载”

更新：我让播放器运行，但我自己遇到了另一个问题，这已在下面的线程中讨论。您可以在文章底部的codesandbox中找到解决方案

---

跟我来：

？！？！？！我留下了一个链接到另一个包含答案的线程，因为我觉得它可能对其他人有用。我觉得没有必要在这个线程中复制/粘贴完全相同的代码；然后点击链接。？！？！？！我留下了一个链接到另一个包含答案的线程，因为我觉得它可能对其他人有用。我觉得没有必要在这个线程中复制/粘贴完全相同的代码；对链接进行遍历。