skelbon
/
conductor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dickin about with some audio

This commit is contained in:
skelbon 2024-07-12 22:05:14 +01:00
parent d37e81ae11
commit 909ba64e1a
12 changed files with 131 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
assets/sounds/Bass.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sounds/Gong.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sounds/Snare.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sounds/Surdo.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sounds/Timpani.wav Normal file
View File

Binary file not shown.

BIN
assets/sounds/Toms.mp3 Normal file
View File

Binary file not shown.

BIN
assets/sounds/Tubular-Bells.wav Normal file
View File

Binary file not shown.

0
assets/svg/Orchestral Bass.svg → assets/svg/Bass.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 457 B

After

Width:  |  Height:  |  Size: 457 B

0
assets/svg/Tubular Bells.svg → assets/svg/Tubular-Bells.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 506 B

After

Width:  |  Height:  |  Size: 506 B

1
index.html
View File

@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mishka Henner - Conductor</title> <title>Mishka Henner - Conductor</title>
<link rel="icon" href="/Logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>

158
src/script.js
View File

@ -1,89 +1,143 @@
import { Client, BrowserSocketFactory } from './blitz.js'; import { Client, BrowserSocketFactory } from "./blitz.js";
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener("DOMContentLoaded", () => {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const socketFactory = new BrowserSocketFactory(); const socketFactory = new BrowserSocketFactory();
const client = new Client(socketFactory); const client = new Client(socketFactory);
client.connect();
const svgFiles = [ const instruments = [
{ fileName: 'Gong.svg', yPos: '20%' }, { image: "Gong.svg", yPos: "20%", sample: "Gong.mp3" },
{ fileName: 'Orchestral Bass.svg', yPos: '10%' }, {
{ fileName: 'Snare.svg', yPos: '20%' }, image: "Bass.svg",
{ fileName: 'Surdo Napa.svg', yPos: '30%' }, yPos: "10%",
{ fileName: 'Surdo.svg', yPos: '25%' }, sample: "Bass.mp3",
{ fileName: 'Timpani Large.svg', yPos: '40%' }, },
{ fileName: 'Timpani Small.svg', yPos: '30%' }, {
{ fileName: 'Toms.svg', yPos: '25%' }, image: "Snare.svg",
{ fileName: 'Tubular Bells.svg', yPos: '0%' } yPos: "20%",
sample: "Snare.mp3",
},
{ image: "Surdo Napa.svg", yPos: "30%", sample: "Surdo.mp3" },
{
image: "Surdo.svg",
yPos: "25%",
sample: "Surdo.mp3",
},
{
image: "Timpani Large.svg",
yPos: "40%",
sample: "Timpani.wav",
},
{
image: "Timpani Small.svg",
yPos: "30%",
sample: "Timpani.wav",
},
{
image: "Toms.svg",
yPos: "25%",
sample: "Toms.mp3",
},
{
image: "Tubular-Bells.svg",
yPos: "0%",
sample: "Tubular-Bells.wav",
},
]; ];
(async () => {
for (let i = 0; i < instruments.length; i++) {
try {
const response = await fetch(`/assets/sounds/${instruments[i].sample}`);
const arrayBuffer = await response.arrayBuffer();
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
instruments[i][`soundBuffer`] = audioBuffer;
console.log(`Loaded ${i}`);
console.log(instruments[i][`soundBuffer`]);
} catch (error) {
console.error(`Failed to load ${i}: ${error.message}`);
}
}
})();
const numStaves = 6; const numStaves = 6;
const numFiles = svgFiles.length; const numFiles = instruments.length;
const sheetWindow = document.getElementById("music-window"); const sheetWindow = document.getElementById("music-window");
for (let i = 1; i <= numStaves; i++) { for (let i = 1; i <= numStaves; i++) {
const staveWrapper = document.createElement('div'); const staveWrapper = document.createElement("div");
staveWrapper.classList.add(`stave-wrapper`); staveWrapper.classList.add(`stave-wrapper`);
staveWrapper.setAttribute("id", `stave-wrapper-${i}`); staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
staveWrapper.style.position = 'relative'; staveWrapper.style.position = "relative";
const staveObject = document.createElement('object'); const staveObject = document.createElement("object");
staveObject.type = 'image/svg+xml'; staveObject.type = "image/svg+xml";
staveObject.data = 'assets/svg/Stave.svg'; staveObject.data = "assets/svg/Stave.svg";
staveObject.classList.add('stave-svg'); staveObject.classList.add("stave-svg");
staveWrapper.appendChild(staveObject); staveWrapper.appendChild(staveObject);
sheetWindow.appendChild(staveWrapper); sheetWindow.appendChild(staveWrapper);
} }
const timeIndicator = document.querySelector('#time-indicator'); const timeIndicator = document.querySelector("#time-indicator");
// Debugging log to ensure the element is found
if (timeIndicator) {
console.log('timeIndicator element found');
} else {
console.log('timeIndicator element not found');
}
timeIndicator.addEventListener("animationiteration", () => { timeIndicator.addEventListener("animationiteration", () => {
const icons = document.querySelectorAll('.event-icon'); const icons = document.querySelectorAll(".event-icon");
icons.forEach((icon) => { icons.forEach((icon) => {
icon.classList.add('fade-out'); icon.classList.add("fade-out");
icon.addEventListener('transitionend', () => { icon.addEventListener("transitionend", () => {
icon.remove(); icon.remove();
}); });
}); });
}); });
client.on('data', (strike) => { const playSound = (num) => {
const source = audioContext.createBufferSource();
const rando = Math.floor(Math.random() * instruments.length);
source.buffer = instruments[num].soundBuffer; // Example: Play the 'Gong' sound
source.connect(audioContext.destination);
source.start();
};
if (strike){ const placeIcon = (region) => {
// create random numbers
const randomStaveNumber = Math.floor((region % 6) + 1);
const randomFileNumber = Math.floor(region);
const randomStaveNumber = Math.floor(Math.random() * numStaves + 1); // Determine the position of the time indicator
const randomFileNumber = Math.floor(Math.random() * numFiles + 1);
const rect = timeIndicator.getBoundingClientRect(); const rect = timeIndicator.getBoundingClientRect();
const sheetLeft = sheetWindow.getBoundingClientRect().left; const sheetLeft = sheetWindow.getBoundingClientRect().left;
const xPosition = rect.left + window.scrollX - sheetLeft; const xPosition = rect.left + window.scrollX - sheetLeft;
// Create the icon div and give it its location data
const newObject = document.createElement('div'); const newObject = document.createElement("div");
newObject.classList.add('event-icon'); newObject.classList.add("event-icon");
newObject.style.position = 'absolute'; newObject.style.position = "absolute";
newObject.style.left = `${xPosition}px`; newObject.style.left = `${xPosition}px`;
newObject.style.top = `${svgFiles[randomFileNumber].yPos}`; newObject.style.top = `${instruments[randomFileNumber].yPos}`;
const eventIcon = document.createElement('object');
eventIcon.type = 'image/svg+xml';
eventIcon.data = `assets/svg/${svgFiles[randomFileNumber].fileName}`;
eventIcon.style.width = '35px';
eventIcon.style.height = '35px';
// create the icon
const eventIcon = document.createElement("object");
eventIcon.type = "image/svg+xml";
eventIcon.data = `assets/svg/${instruments[randomFileNumber].image}`;
eventIcon.style.width = "35px";
eventIcon.style.height = "35px";
// append icon to div
newObject.appendChild(eventIcon); newObject.appendChild(eventIcon);
const staveWrapper = document.getElementById(`stave-wrapper-${strike.region + 1 % 6}`); // select the staveWrapper in which to place the div
console.log(strike.region); const staveWrapper = document.getElementById(
`stave-wrapper-${randomStaveNumber}`
);
// append the div to the staveWrapper
staveWrapper.appendChild(newObject); staveWrapper.appendChild(newObject);
} };
client.on("data", (strike) => {
placeIcon(strike.region % 9);
playSound(strike.region % 9);
}); });
});
client.connect();
})