wizgrav / clubber Goto Github PK
View Code? Open in Web Editor NEWApplication of music theory in audio reactive visualizations
Home Page: http://wizgrav.github.io/clubber
License: MIT License
Application of music theory in audio reactive visualizations
Home Page: http://wizgrav.github.io/clubber
License: MIT License
Hi. Dare sharing this: http://jsdo.it/alvarobyrne/clubber_templates_1
Not sure why template 3 power of strongest note is spitting values higher than 1. Currently looking into it but anyways want to share the demo.
Would like this issue to be tagged as a question.
Thank you.
If a Clubber instance can be updated passing the frequencies data, why should we pass in the constructor the AudioContext and Analyzer (they get created automatically otherwise).
Hi :) I've updated my experiment. I was testing it on iOS12.2 Safari, but it seems not to work: the status of the audiocontext in webkit is always "suspended". I've added logs in consoles that show this scenario. Can you give me some suggestions? Thank you very much!
the track play starts here
In case you're unaware, http://wizgrav.github.io/clubber doesn't run in Safari (or Safari TP, or WebKit Nightly).
Web Inspector Console shows the following issues:
[Error] IndexSizeError (DOM Exception 1): The index is not in the allowed range.
Clubber (clubber.js:57)
Global Code (common.js:19)
[Error] TypeError: undefined is not an object (evaluating 'clubber.smoothing = [0.66, 0.8, 0.92][id]')
threshold (main.js:16)
Global Code (main.js:60)
Hello
Can't load shadertoys with multiple inputs. This is more a question than an issue.
First created this : https://codepen.io/alvarobyrne/pen/rQzoOz (stressing detailed view here: https://codepen.io/alvarobyrne/details/rQzoOz /)
And could load a shader with no inputs. fine? isn't it?
Then I forked that one into this second one, which is the main concern to this issue: https://codepen.io/alvarobyrne/pen/JeyVNB
but couldn't load shadertoys with multiple inputs (by clicking on top left menu items, conveniently labeled) even though I found out that texture creation in the 'getChannels' function in tool/main.js is wrong. Line 122, https://github.com/wizgrav/clubber/blob/master/tool/main.js#L122
should be something like
ret["iChannel"+i] = twgl.createTexture(gl,{ src: pf+ch.src });
more or less like in line 171 of the second codepen linked above.
Line 120 https://github.com/wizgrav/clubber/blob/master/tool/main.js#L120 should also be fixed along same line.
But even though finding that error, the shadertoy doesn't load and CORS has definitely have to do with it not loading, but why are assets(only images/textures tested) loaded as images with no problem, but twgl can't load them?. Assets are loaded as images like in line 120 of the second codepen linked above, namely, images loaded top right on div with red background when clicking items on top left, dat-gui, menu.
dev tools console spits very different error messaging (after clicking on dat-gui top left menu items) when 'is_cross_origin' checkbox is toggled.
What else should be considered? I don't fully understand texture creation by twgl library nor in general.
for reference here is twgl doc for twgl's 'createTexture' function: http://twgljs.org/docs/module-twgl.html#.createTexture: haven't looked into the options object enough.
hoping the point to be clear I once again thank you for clubber, and thank you in advance for any time you spend looking at this.
Hi, I have read the documentation over and over and it's very complex (to me), so I would like to do something but I'm not sure how.
Is there a way to make the band values not react to minor changes, but have a smooth visual still?
For example, the output value would not change between 0.11 and 0.12, but if it gets to 0.22 it would still get there smoothly and progressively go through all the values in between.
I hope this is clear, let me know if you need more explanations please!
Hi, I've seen you have updated the experiment, i was wondering if you still have the name of the old audio track you used, its awesome especially with the "Fractal land".
If you do please can I have a link so I can listen to it because it seems you have removed it from this new version.
Many thanks Ollie :)
reference Meyda audio feature extraction library, somehow they managed to make it work on mobile and barely compatible browsers. https://github.com/meyda/meyda
I'm trying to use your tool by doing the following
const clubber = new Clubber({
size: 2048,
mute: false
});
const bands = {
low: clubber.band({
from: 1, // minimum midi note to take into account
to: 59, // maximum midi note, up to 160.
smooth: [0.1, 0.1, 0.1, 0.1] // Exponential smoothing factors for each of the four returned values
}),
mid: clubber.band({
from: 58,
to: 95,
smooth: [0.1, 0.1, 0.1, 0.1]
}),
high: clubber.band({
from: 96,
to: 128,
smooth: [0.1, 0.1, 0.1, 0.1]
})
};
then after listening to the audio update time event I do the following
clubber.update()
console.log(bands["low"](new Array(4)),bands["mid"](new Array(4)),bands["high"](new Array(4)))
but the console log gives me
{from: 1, to: 59, low: 64, high: 128} {from: 58, to: 95, low: 64, high: 128} {from: 96, to: 128, low: 64, high: 128}
Is this what I'm suppose to get? a Rect? rather than array values?
reference : https://udart.github.io/volumetricapp/
also controlKit is great for adding some control widgets quickly, better and faster than dat-gui.js
https://www.npmjs.com/package/controlkit
Would it be possible to implement VR support in the demo?
Thank you
Can you pls add a repeat mode or a playlist mode PLSSS
Hello,
Get tool! I'm trying to understand how to use it for a project of mines and wondering if you can help understand something.
I'm trying to detect the "voice range" of songs for a sort of "karaoke ball" effect and I'm having difficulty on how and where to start.
What tweaks should I be looking at to try achieve this variation?
to give and example use the audio
https://soundcloud.com/ultimaterejects/itf-inside-the-festival
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.