Tone.js 附加到合成器的增益不一致

Question

我是 Tone.js 的新手，对 Gain 对象有疑问。我在 html 中设置了音量滑块，如下所示：

<button class="play">Play</button>
<button class="stop">Stop</button>  
 <div>
  Vol:&nbsp;
  <input type="range" class="vol-slider slider" min="0" max="10" value="4">
   <div class="vol-text">4</div>
</div>

单击 'Play' 时，我创建一个 Tone.PolySynth 和一个 Tone.Gain，然后使用 .chain() 函数将增益连接到 PolySynth。增益值取自音量滑块。使用 Tone.Part 函数（下面的 js 代码）播放音符。

首次启动应用程序时，序列以正确的音量播放。当音量滑块增加时，它还会以增加的音量（更高的增益）播放。但是，当降低音量滑块时，序列的音量不会降低。从较高值变为较低值时，增益不会产生影响。

我对此感到困惑，感谢知识/经验的帮助。

请在 https://codepen.io/minapre/pen/QWpmdJm

进行编码

$('.stop').on('click', function(e){
  Tone.Transport.stop();
}) // .stop

  
$(".vol-slider").on('input', function(e){
    let val = $(this).val()
    $(".vol-text").text(val)
 }) // .vol-slider
  
$('.play').on('click', function(e){
  
console.clear()

testnotes = [ {time: "0:0:0", note: "D3", duration: "8n"},
{time: "0:0:0", note: "D3", duration: "16n"},
{time: "0:0:1", note: "E3", duration: "16n"},
{time: "0:0:2", note: "F3", duration: "16n"},
{time: "0:0:3", note: "G3", duration: "16n"},
{time: "0:1:0", note: "A3", duration: "16n"},
{time: "0:1:1", note: "B3", duration: "16n"},
{time: "0:1:2", note: "C4", duration: "16n"},
{time: "0:1:3", note: "D4", duration: "16n"},
{time: "0:2:0", note: "E4", duration: "16n"},
{time: "0:2:1", note: "F4", duration: "8n"},
{time: "0:2:2", note: "G4", duration: "8n"},
{time: "0:2:3", note: "A4", duration: "8n"},
{time: "0:3:0", note: "B4", duration: "8n"},
{time: "0:3:1", note: "C5", duration: "4n"},
]
  
Tone.Transport.stop()
const  synth  = new Tone.PolySynth( )
let vol = parseFloat( $(".vol-slider").val() ) / 10 
console.log("vol: " + vol)
const gain = new Tone.Gain(vol).toDestination()
synth.chain( gain);
const part = new Tone.Part(function(time, note) {
      synth.triggerAttackRelease(note.note, note.duration, time);
    }, testnotes).start(0);
Tone.Transport.start()
 
}) // .play

Answer 1

看起来你每次点击“播放”时都在创建一个新的增益节点。您只需要创建这些 Tone 对象一次。

此外，$(".vol-slider").on('input' 代码并未修改增益节点本身。您可以使用 gain.rampTo() 在 Tone 播放您的部分时修改增益。

这应该有效：

$(".stop").on("click", function (e) {
  Tone.Transport.stop();
}); // .stop


// Create Tone objects here.

const synth = new Tone.PolySynth();
let vol = 1;
const gain = new Tone.Gain(vol).toDestination();
synth.chain(gain);
let testnotes = [
  { time: "0:0:0", note: "D3", duration: "8n" },
  { time: "0:0:0", note: "D3", duration: "16n" },
  { time: "0:0:1", note: "E3", duration: "16n" },
  { time: "0:0:2", note: "F3", duration: "16n" },
  { time: "0:0:3", note: "G3", duration: "16n" },
  { time: "0:1:0", note: "A3", duration: "16n" },
  { time: "0:1:1", note: "B3", duration: "16n" },
  { time: "0:1:2", note: "C4", duration: "16n" },
  { time: "0:1:3", note: "D4", duration: "16n" },
  { time: "0:2:0", note: "E4", duration: "16n" },
  { time: "0:2:1", note: "F4", duration: "8n" },
  { time: "0:2:2", note: "G4", duration: "8n" },
  { time: "0:2:3", note: "A4", duration: "8n" },
  { time: "0:3:0", note: "B4", duration: "8n" },
  { time: "0:3:1", note: "C5", duration: "4n" }
];
const part = new Tone.Part(function (time, note) {
  synth.triggerAttackRelease(note.note, note.duration, time);
}, testnotes);


$(".play").on("click", function (e) {
  console.clear();
  Tone.start();
  Tone.Transport.stop();
  part.start(0);

  Tone.Transport.start();
}); // .play

$(".vol-slider").on("input", function (e) {
  let val = $(this).val(); // This is a string at this point ...
  let valFloat = parseFloat(val);
  $(".vol-text").text(val);
  gain.gain.rampTo(valFloat, 0.1);
}); // .vol-slider

这是一个代码笔，将所有内容放在一起： https://codepen.io/joeweiss/pen/GRWxmML

Tone.js 附加到合成器的增益不一致

Tone.js inconsistency of Gain attached to synth

javascript

web-audio-api

tone.js