在Javascript函数中嵌套事件

Question

我正在使用ToneJS的网站上创建多个切换按钮。基本上，我希望不同的按钮播放不同的曲目。

我已经创建了这样两个相同的按钮。

按钮1:

function togglePlay() {
const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
const element = document.getElementById("play-stop-toggle");
if (status == "started") {
element.innerText = "PLAY";
Tone.Transport.stop()
} else {
element.innerText = "STOP";
Tone.Transport.start()
}
document.querySelector('#status').textContent = status;
}

按钮2:

function togglePlay2() {
const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
const element = document.getElementById("play-stop-toggle2");
if (status == "started") {
element.innerText = "PLAY";
Tone.Transport.stop()
} else {
element.innerText = "STOP";
Tone.Transport.start()
}
document.querySelector('#status').textContent = status;
}

目前，他们正在玩相同的循环，因为下面的代码是全局定义的：

var filter = new Tone.Filter({
type: 'lowpass',
Q: 12
}).toMaster()

var synth = new Tone.MembraneSynth().toMaster()
//create a loop
var loop = new Tone.Loop(function(time){
synth.triggerAttackRelease("A1", "8n", time)
}, "2n")

//play the loop between 0-2m on the transport
loop.start(0)
// loop.start(0).stop('2m')

如何在每个function togglePlay()中嵌套filter、synth和loop，以便根据切换的按钮定义不同的声音？

Answer 1

这样做有问题吗？

function togglePlay() {
const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'
const element = document.getElementById("play-stop-toggle");
if (status == "started") {
element.innerText = "PLAY";
Tone.Transport.stop()
} else {
element.innerText = "STOP";
var filter = new Tone.Filter({
type: 'lowpass',
Q: 12
}).toMaster()
var synth = new Tone.MembraneSynth().toMaster()
//create a loop
var loop = new Tone.Loop(function(time){
synth.triggerAttackRelease("A1", "8n", time)
}, "2n")
//play the loop between 0-2m on the transport
loop.start(0)
// loop.start(0).stop('2m')
Tone.Transport.start()
}
document.querySelector('#status').textContent = status;
}

Answer 2

这里有一个允许同时使用多个音调的解决方案。如果您希望一个音调开始停止当前正在运行的任何其他音调，则必须进行更多的状态管理。这段代码让您了解如何将上下文特定的配置绑定到单击处理程序，以专门处理按钮的行为。

然而，我不知道Tone，并且您的代码没有完整的设置，所以您可能需要做更多的工作来为每个处理程序提供自己的Tone实例。

function createTogglePlayClickhandler(config) {
var filter = new Tone.Filter(config.filter).toMaster()
var synth = config.synth
//create a loop
var loop = config.loop
const element = document.getElementById(elementId);
return function togglePlay() {
const status = Tone.Transport.state; // Is either 'started', 'stopped' or 'paused'

if (status == "started") {
element.innerText = "PLAY";
Tone.Transport.stop()
} else {
element.innerText = "STOP";
Tone.Transport.start()
}

document.querySelector('#status').textContent = status;
}
}
// Generate click handlers
createTogglePlayClickhandler({ 
elementId: "play-stop-toggle",
filter: {
type: 'lowpass',
Q: 12
},
synth: new Tone.MembraneSynth().toMaster(),
loop: new Tone.Loop(function(time){
synth.triggerAttackRelease("A1", "8n", time)
}, "2n")
});
createTogglePlayClickhandler({ 
elementId: "play-stop-toggle2",
filter: {
type: 'lowpass',
Q: 12
},
synth: new Tone.MembraneSynth().toMaster(),
loop: new Tone.Loop(function(time){
synth.triggerAttackRelease("A1", "8n", time)
}, "2n")
});

看起来你只有一个身份元素，所以我认为你想要的行为是一次一个语气？所以，如果我单击音调A，然后单击音调B，音调B应该开始，音调A应该停止？

还是你想要多音色？