/
index.js
104 lines (86 loc) · 2.89 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
const playBtn = document.getElementById("play");
const drumsBtn = document.getElementById("drums");
const guitarBtn = document.getElementById("guitar");
let drumsEnabled = true;
let guitarEnabled = true;
let guitarSource = null;
let drumSource = null;
let drumGainNode = null;
let guitarGainNode = null;
async function run() {
try {
const audioContext = new AudioContext();
const drumLoopResponse = await fetch("/drum-loop.mp3");
const drumLoopBuffer = await drumLoopResponse.arrayBuffer();
const guitarLoopResponse = await fetch("/guitar-loop.mp3");
const guitarLoopBuffer = await guitarLoopResponse.arrayBuffer();
const drumLoop = await audioContext.decodeAudioData(drumLoopBuffer);
const guitarLoop = await audioContext.decodeAudioData(guitarLoopBuffer);
drumSource = audioContext.createBufferSource();
drumSource.buffer = drumLoop;
drumSource.loop = true;
// Create gain node for drums
drumGainNode = audioContext.createGain();
drumGainNode.gain.value = 0;
drumSource.connect(drumGainNode);
drumGainNode.connect(audioContext.destination);
guitarSource = audioContext.createBufferSource();
guitarSource.buffer = guitarLoop;
guitarSource.loop = true;
// Create gain node for guitar
guitarGainNode = audioContext.createGain();
guitarGainNode.gain.value = 0;
guitarSource.connect(guitarGainNode);
guitarGainNode.connect(audioContext.destination); // Connect gain node to destination
} catch(err) {
alert(err.message);
}
}
function activateDrums(e) {
e.preventDefault();
drumsEnabled = true;
drumGainNode.gain.value = 1;
toggleButtonColor(drumsBtn, drumsEnabled);
}
function deactivateDrums(e) {
e.preventDefault();
drumsEnabled = false;
drumGainNode.gain.value = 0;
toggleButtonColor(drumsBtn, drumsEnabled);
}
function activateGuitar(e) {
e.preventDefault();
guitarEnabled = true;
guitarGainNode.gain.value = 1;
toggleButtonColor(guitarBtn, guitarEnabled);
}
function deactivateGuitar(e) {
e.preventDefault();
guitarEnabled = false;
guitarGainNode.gain.value = 0;
toggleButtonColor(guitarBtn, guitarEnabled);
}
drumsBtn.addEventListener("mousedown", activateDrums);
drumsBtn.addEventListener("touchstart", activateDrums);
drumsBtn.addEventListener("mouseup", deactivateDrums);
drumsBtn.addEventListener("touchend", deactivateDrums);
guitarBtn.addEventListener("mousedown", activateGuitar);
guitarBtn.addEventListener("touchstart", activateGuitar);
guitarBtn.addEventListener("mouseup", deactivateGuitar);
guitarBtn.addEventListener("touchend", deactivateGuitar);
playBtn.addEventListener("click", async () => {
try {
drumSource.start();
guitarSource.start();
} catch (error) {
console.error("Error loading or playing audio:", error);
}
});
function toggleButtonColor(button, isEnabled) {
if (isEnabled) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
}
run();