如何在 useEffect 挂钩（反应）中启用 Player tone.js 的音量滑块？

Question

我目前正在尝试调整 tone.js 提供的播放器组件的音量。

我启动了一个新的 Player 并使用 useRef 保存了 current 中对象的引用。

播放器包含 url、循环、音量等键

在 useEffect 之外，我有一些事件处理程序可以控制播放和停止方法，还有一个循环按钮可以在 useEffect 中切换循环状态。他们都有效。

我面临的问题是，每当我想调整音量时，都会调用 useEffect，这会导致重新渲染。

我基本上希望能够在创建的 Player 对象中更改音量的关键参数（值）。移动滑块时会重新渲染，但音量不会改变。

我只是把这个发给她，希望以前有人做过。

我之前的问题没有得到解答，最后我自己解决了。似乎没有多少人使用网络音频 API 我想。

我相信虽然在这种情况下我只需要一个熟练的反应。

可能有一个简单的解决方法，但我只是缺乏知识。

几周前我开始学习 React。

这是我的代码

import React, { useState, useEffect, useRef} from "react";
import "./DrumMachine.css";
import Button from "./Button";
import { Player } from "tone";
import Sound from "./sound.wav";
import Poti from './Poti';

export default function DrumMachine() {
  console.log("body")
  const [value, setValue ] = useState(0);
  const [loop, setLoop] = useState(false);

  const playerRef = useRef(null);
  playerRef.current = new Player(Sound).toDestination();


  useEffect(() => {
    console.log("useEffect")
    console.log(playerRef.current.volume)
    playerRef.current.loop = loop;
    playerRef.current.volume = value;
  },[loop, value]);
 
  const play = () => {
    playerRef.current.start();
  };

  const stop = () => {
    playerRef.current.stop();
  }

  const volume = (event) => {
    console.log(value)
    setValue(event.target.value)
  }

  const loopToggle = () => {
    console.log('loop')
    setLoop(!loop);
  }
  const doSt = () => {
    console.log('loop')
  }


  return (
    <div className="machine">
      <Button onClick={play}>Play</Button>
      <Button onClick={stop}>Stop</Button>
      <Button onClick={loopToggle}>
        {loop ? 'Loop active' : 'Loop disabled'}
      </Button>
      <Button onClick={doSt}>
        {'Do something'}
      </Button>
      <Button></Button>
      <Button></Button>
      <Button></Button>
      <Button></Button>
      <span className='vol-box'>
        <label htmlFor='vol' >Volume</label>
        <Poti 
        onChange={volume} 
        value={value} id='volM' 
        name='vol' 
        min='0' 
        max='1'
        step='0.1'
        ></Poti>
      </span>
      
    </div>
  );
}

console.logs 显然只是为了测试。我会同时阅读文档，希望找到解决方案。

感谢您的帮助。

Answer 1

工作叉。

https://codesandbox.io/s/web-audio-api-playground-v2-forked-y1dc6?file=/src/components/DrumMachine.js

好的，有几件事。

音量最小值和最大值太小，影响不大。我将它设置为 -20 和 20 作为分贝，这足以让人注意到差异。
我在组件外声明了你的播放器并将其作为 ref 初始值传递到组件中。这不是执行此操作的唯一方法，但它是让您的示例正常工作的最简单方法。这使玩家成为单身人士。

如果您需要多个 DrumMachine 组件。我建议在其自己的组件中创建播放器并传递函数以将其更新为控件组件。这将允许您的控件组件在不同的按钮按下时重新呈现，但您的播放器不会，您可以根据需要拥有尽可能多的控件组件。

如何在 useEffect 挂钩（反应）中启用 Player tone.js 的音量滑块？

How to enable volume slider of Player tone.js inside of useEffect hook(react)?

reactjs

react-hooks

volume

use-effect

tone.js