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

编程问答 2022-04-28

问题描述

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

单击“播放”时，我创建了一个 Tone.polySynth 和一个 Tone.Gain，然后使用 .chain() 函数将 Gain 连接到 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",duration: "16n"},{time: "0:0:1",note: "E3",{time: "0:0:2",note: "F3",{time: "0:0:3",note: "G3",{time: "0:1:0",note: "A3",{time: "0:1:1",note: "B3",{time: "0:1:2",note: "C4",{time: "0:1:3",note: "D4",{time: "0:2:0",note: "E4",{time: "0:2:1",note: "F4",{time: "0:2:2",note: "G4",{time: "0:2:3",note: "A4",{time: "0:3:0",note: "B4",{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

解决方法

每次单击“播放”时，您似乎都在创建一个新的增益节点。您只需要创建一次这些 Tone 对象。

此外，$(".vol-slider").on('input' 代码不会修改增益节点本身。您可以在 Tone 发挥作用时使用 gain.rampTo() 来修改增益。

这应该有效：

$(".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",duration: "16n" },{ time: "0:0:1",note: "E3",{ time: "0:0:2",note: "F3",{ time: "0:0:3",note: "G3",{ time: "0:1:0",note: "A3",{ time: "0:1:1",note: "B3",{ time: "0:1:2",note: "C4",{ time: "0:1:3",note: "D4",{ time: "0:2:0",note: "E4",{ time: "0:2:1",note: "F4",{ time: "0:2:2",note: "G4",{ time: "0:2:3",note: "A4",{ time: "0:3:0",note: "B4",{ 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

javascripttone.jsweb-audio-api