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

Question

我是 Tone.js 的新手，并且对 Gain 对象有疑问。我在 html 中设置了一个音量 slider ，如下所示:

<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>

单击“播放”时，我创建了一个 Tone.PolySynth 和一个 Tone.Gain，然后使用 .chain() 函数将增益连接到 PolySynth。增益值取自音量 slider 。使用 Tone.Part 函数(下面的 js 代码)播放音符。
首次启动应用程序时，序列会以正确的音量播放。当音量 slider 增加时，它也会以增加的音量(更高的增益)播放。但是，当音量 slider 降低时，序列的音量不会降低。从较高的值变为较低的值时，增益没有影响。
我对此感到困惑，并感谢知识/经验的帮助。
请在 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