javascript - 如何让 Player 与tone.js 做出反应？

Question

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

根据这篇文章https://github.com/Tonejs/Tone.js/wiki/Using-Tone.js-with-React-or-Vue 我们应该使用Sampler音频文件/样本而不是Player如音调.js文档。

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

我上传了我的项目的声音文件，并且能够毫无问题地播放它。

在我的项目中，虽然我在控制台中收到以下错误：

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 hook(react) 中启用 Playertone.js 的音量滑块？

标签： javascriptreactjsweb-audio-apitone.js