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>

204
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",
const numStaves = 6; },
const numFiles = svgFiles.length; { image: "Surdo Napa.svg", yPos: "30%", sample: "Surdo.mp3" },
const sheetWindow = document.getElementById("music-window"); {
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",
},
];
for (let i = 1; i <= numStaves; i++) { (async () => {
const staveWrapper = document.createElement('div'); for (let i = 0; i < instruments.length; i++) {
staveWrapper.classList.add(`stave-wrapper`); try {
staveWrapper.setAttribute("id", `stave-wrapper-${i}`); const response = await fetch(`/assets/sounds/${instruments[i].sample}`);
staveWrapper.style.position = 'relative'; const arrayBuffer = await response.arrayBuffer();
const staveObject = document.createElement('object'); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
staveObject.type = 'image/svg+xml'; instruments[i][`soundBuffer`] = audioBuffer;
staveObject.data = 'assets/svg/Stave.svg'; console.log(`Loaded ${i}`);
staveObject.classList.add('stave-svg'); console.log(instruments[i][`soundBuffer`]);
} catch (error) {
staveWrapper.appendChild(staveObject); console.error(`Failed to load ${i}: ${error.message}`);
sheetWindow.appendChild(staveWrapper); }
} }
})();
const timeIndicator = document.querySelector('#time-indicator'); const numStaves = 6;
const numFiles = instruments.length;
const sheetWindow = document.getElementById("music-window");
// Debugging log to ensure the element is found for (let i = 1; i <= numStaves; i++) {
if (timeIndicator) { const staveWrapper = document.createElement("div");
console.log('timeIndicator element found'); staveWrapper.classList.add(`stave-wrapper`);
} else { staveWrapper.setAttribute("id", `stave-wrapper-${i}`);
console.log('timeIndicator element not found'); staveWrapper.style.position = "relative";
} const staveObject = document.createElement("object");
staveObject.type = "image/svg+xml";
staveObject.data = "assets/svg/Stave.svg";
staveObject.classList.add("stave-svg");
timeIndicator.addEventListener("animationiteration", () => { staveWrapper.appendChild(staveObject);
const icons = document.querySelectorAll('.event-icon'); sheetWindow.appendChild(staveWrapper);
}
icons.forEach((icon) => { const timeIndicator = document.querySelector("#time-indicator");
icon.classList.add('fade-out');
icon.addEventListener('transitionend', () => { timeIndicator.addEventListener("animationiteration", () => {
icon.remove(); const icons = document.querySelectorAll(".event-icon");
});
}); icons.forEach((icon) => {
icon.classList.add("fade-out");
icon.addEventListener("transitionend", () => {
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;
const newObject = document.createElement('div');
newObject.classList.add('event-icon');
newObject.style.position = 'absolute';
newObject.style.left = `${xPosition}px`;
newObject.style.top = `${svgFiles[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';
newObject.appendChild(eventIcon);
const staveWrapper = document.getElementById(`stave-wrapper-${strike.region + 1 % 6}`);
console.log(strike.region);
staveWrapper.appendChild(newObject);
}
});
client.connect(); // Create the icon div and give it its location data
const newObject = document.createElement("div");
newObject.classList.add("event-icon");
newObject.style.position = "absolute";
newObject.style.left = `${xPosition}px`;
newObject.style.top = `${instruments[randomFileNumber].yPos}`;
}) // 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);
// select the staveWrapper in which to place the div
const staveWrapper = document.getElementById(
`stave-wrapper-${randomStaveNumber}`
);
// append the div to the staveWrapper
staveWrapper.appendChild(newObject);
};
client.on("data", (strike) => {
placeIcon(strike.region % 9);
playSound(strike.region % 9);
});
});