Welcome, weary internet traveller. You’ve stumbled onto a great slice of the internet.

Keyframes is a creative community. Share your #wip, get #feedback, find inspiration, and chat with people who make things. It is a bunker from the rest of the garbage internet. No popularity contests here. No circle jerks. No regular jerks. Just a wholesome place to shoot the shit and be real about what you’re making.

You can post in public, or private (with a Plus account). Use it to improve your work, or just feel good about creating things again.

Come on in! We hope you enjoy your stay.

Register here for a very fun time ✨️

Or log in if you’re returning. (Welcome back!)

All posts tagged “visualizer”

✌️ Added a new waveform visualizer to the https://songsling.io landing page.

🎵 It uses web audio to generate noise and plays back a looped beat. There's no sound as the output is muted, but it's very useful for performant drawing (via canvas).

🌐 Next: the idea is to sync the start of the beat with the keyframe in the animation (made by https://www.instagram.com/123pingu/) where the globe starts smiling and mute again when turns around. I might have to change it from .gif to .mp4 or find a solution to track .gif keyframes. Suggestions welcome!

The essence of the service is that you can create interactive tracks that change in response to online metrics. So my idea was to have an animation of 🌐and a waveform that sort of conveys that (beat starts pumping when the 🌐 looks happy/accomplished, otherwise it's quiet)

Everything that would enhance the results really! I'm not a designer so all feedback very welcome.

Scrolling Waveform Visualizer Using Web Audio API
const targetLength = this.analyser.fftSize * 8 // or however long // if you want 4 bars at x bpm (4/4): // 60 / bpm * 4 * 4 * this.audioCtx.sampleRate let displayArray = new Uint8Array(targetLength).fill(128) let prevTime = 0 const updateData = (t) => { this.requestAnimId = requestAnimationFrame(updateData) const frameOffset = Math.floor( (this.audioCtx.currentTime - prevTime) * this.audioCtx.sampleRate ) prevTime = this.audioCtx.currentTime displayArray = concatenate( Uint8Array, displayArray, this.getAnalyserData().slice(-frameOffset) ).slice(-targetLength) canvasCtx.fillStyle = 'rgba(255, 255, 255, 1)' canvasCtx.fillRect(0, 0, this.state.width, this.state.height) canvasCtx.lineWidth = 1 canvasCtx.strokeStyle = defaultColors.paleVioletRed canvasCtx.beginPath() const sliceWidth = this.state.width * 1.0 / targetLength let x = 0 for (let i = 0; i < targetLength; i++) { const v = displayArray[i] / 128.0 const y = v * this.state.height / 2 if (i === 0) { canvasCtx.moveTo(x, y) } else { canvasCtx.lineTo(x, y) } x += sliceWidth } canvasCtx.lineTo(this.state.width, this.state.height / 2) canvasCtx.stroke() } updateData()

Trying to build a smooth waveform visualizer à la Traktor using the Web Audio API that shows a longer section of the waveform than the FFT size of the analyzer node. Normally you can't do that by default as the buffer length is tied to the FFT, it's more suitable for oscilloscopes and such. So far I've got it working with an approach of concatenating Uint8Arrays into a bigger target, but it's a real CPU killer (chrome task manager shows 99-102% 😄). This code is embedded within a React component lifecycle method. Here's how it looks like in action:

https://cdn.haywirez.com/file/haywirez-cdn/temp/songsling_io_scrolling_waveform.mp4

Performance improvement suggestions very welcome 😄