ydeng/audioshowkit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated demo page.

Browse Source
This commit is contained in:
Harrison Deng 2022-03-20 19:24:22 -05:00
parent 0945e829ca
commit 792251dada
2 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tests/index.html
View File

@ -11,7 +11,19 @@
</head> </head>
<body> <body>
<h1>Hit start to see demo!</h1>
<button id="startbtn">Start.</button> <button id="startbtn">Start.</button>
<h2>Horizontal Bar Pattern</h2>
<p>Below is a canvas that has all bin values being drawn live using the built-in horizontal bar pattern.</p>
<canvas id="horizontal">Canvases don't seem to be supported! Please try a different browser.</canvas>
<h2>Binding frequency bin values to element styles</h2>
<p>Has never been this easy! Here we bind the width of a div to a frequency bin.</p>
<div id="widthDiv"></div>
<p>Here we bind a frequency to the colour of a div.</p>
<div id="colourDiv"></div>
</body> </body>
</html> </html>

18
tests/script.js
View File

@ -9,16 +9,28 @@ startBtn.addEventListener("click", async (ev) => {
let mediaStream = new Audio("../tests/Elektronomia - Collide.mp3"); let mediaStream = new Audio("../tests/Elektronomia - Collide.mp3");
mediaStream.addEventListener("canplaythrough", (ev) => { mediaStream.addEventListener("canplaythrough", (ev) => {
let visCore = new VisualizerCore(mediaStream, 128); let visCore = new VisualizerCore(mediaStream, 128);
let coreAndEventCanvas = document.createElement("canvas"); let coreAndEventCanvas = document.getElementById("horizontal");
coreAndEventCanvas.width = 640; coreAndEventCanvas.width = 640;
coreAndEventCanvas.height = 200; coreAndEventCanvas.height = 200;
console.log("starting playthrough."); console.log("starting playthrough.");
mediaStream.play(); mediaStream.play();
visCore.analyze(); visCore.analyze();
document.body.appendChild(coreAndEventCanvas);
bindHorizontalBar(coreAndEventCanvas, visCore); bindHorizontalBar(coreAndEventCanvas, visCore); // Pre-made simple horizontal bar visualizer.
let widthDiv = document.getElementById("widthDiv");
widthDiv.style.height = "20px";
widthDiv.style.backgroundColor = "orange";
visCore.addUpdateListener((delta, bins) => {
widthDiv.style.width = bins[3] + "px";
})
let colourDiv = document.getElementById("colourDiv");
colourDiv.style.height = "20px";
visCore.addUpdateListener((delta, bins) => {
colourDiv.style.backgroundColor = "rgb(" + bins[0] + "," + bins[1] + ", " + bins[4] + ")";
})
}); });
}); });