0

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

我启动了一个新 Player 并利用 useRef 将对象的引用保存在current.

播放器包含 url、loop、volume 等键。

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

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

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

我只是把它说出来，希望有人以前做过。

我之前的问题没有得到解答，最终我自己解决了。我认为使用网络音频 API 的人似乎并不多。

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

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

几周前我开始学习反应。

这是我的代码

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 显然只是为了测试。我将阅读文档同时希望找到解决方案。

谢谢你的帮助。

4

1 回答 1

1

工作叉。

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

好的，有几件事。

  1. 最小和最大音量太小，影响不大。我将它设置为 -20 和 20 作为分贝，这足以注意到差异。

  2. 我在组件之外声明了您的播放器，并将其作为 ref 初始值传递给组件。这不是执行此操作的唯一方法，但它是让您的示例正常工作的最简单方法。这使玩家成为单身人士。

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

于 2020-08-26T18:32:20.383 回答