如何解决如何将可视化器连接到此合成器
let switchSound = "false";
var startSound = document.querySelector('#startsound');
var mute = document.querySelector('#mute');
const synth = new Tone.polySynth();
const synth1 = new Tone.Membranesynth();
class Instrument {
constructor() {
this.synthType = null;
this.synth = null;
this.gain = new Tone.Gain();
this.gain.toDestination;
}
get defaultSettings() {
return {
Synth: {
oscillator: { type: 'triangle' },envelope: {
attack: 0.05,decay: 0.1,sustain: 0.3,release: 1
}
}
};
}
updateSynthType(synthType) {
let newSynth = new Tone[synthType](
this.defaultSettings[synthType]);
console.log(newSynth.envelope.attack);
}
}
window.onload = function(){
startSound.addEventListener('click',function() {
if (switchSound === "false"){
let inst = new Instrument();
inst.updateSynthType('Synth');
switchSound = "true";
var context = new AudioContext();
const $inputs = document.querySelectorAll('input'),chords = [
'G0 C1 E1 B1 C1','F1 A1 C1 E2','G1 B1 D1','D1 F1 A1 C2','E1 G1 B1'
].map(formatChords);
var chordIdx = 0,step = 0;
// synth.oscillator.type = 'sine';
let gain = new Tone.Gain(0.2);
let reverb = new Tone.Reverb(2,0.1);
gain.toDestination();
// reverb.connect(gain).toDestination();
synth.connect(reverb).connect(gain);
Array.from($inputs).forEach($input => {
$input.addEventListener('change',() => {
if ($input.checked) handleChord($input.value);
})
});
function handleChord(valueString) {
chordIdx = parseInt(valueString) - 1;
}
Tone.Transport.scheduleRepeat(onRepeat,'16n');
Tone.Transport.bpm.value = 100;
Tone.Transport.start();
function onRepeat(time) {
let chord = chords[chordIdx],note = chord[step % chord.length];
synth.triggerAttackRelease(note,'32n',time);
step++;
}
function formatChords(chordString) {
let chord = chordString.split(' ');
let arr = [];
for (let i= 0; i< 2; i++) {
for (let j = 0; j < chord.length; j++){
let noteOct = chord[j].split('')
note = noteOct[0];
let oct = (noteOct[1] === "0") ? i + 2 : i + 4;
note += oct;
arr.push(note);
}
}
return arr;
}
mute.onclick = function() {
if(mute.getAttribute('data-muted') === 'false') {
gain.gain.rampTo(0);
mute.setAttribute('data-muted','true');
mute.innerHTML = "unmute";
} else {
gain.gain.rampTo(0.6);
mute.setAttribute('data-muted','false');
mute.innerHTML = "mute";
};
}
}
});
}
我想添加一个可视化工具,当您选择不同的合成器时会播放。关于将其放在哪里有任何想法?我认为对于这个项目来说,一个漂亮的可视化工具将是很棒的,并且我不知道如何将它们两者连接起来。
我可以创建可视化器,但无法连接它们。音乐是在start()函数中播放的吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。