Attila

@haywirez

songsling.io

109

Any feedback on how could I tweak/harmonize the songsling.io color scheme?

These are the colors in the "theme" I'm using now, plus some randomized ones:

purple: 'rgba(41,42,109,1)',
softPurple: 'rgba(41,42,109,0.1)',
backgroundPink: 'rgba(219, 112, 190, 0.65)',
paleVioletRed: 'rgba(219, 112, 147, 1)',
softLime: 'rgba(0,255,0,0.6)',
brightAzureBlue: 'rgba(116, 227, 236, 1)',

Video: https://twitter.com/haywirez/status/1048906492630523904
Site: https://songsling.io

extreme explosion of bright LSD vibe colors, maximum range

the composition, color palette

✌️ 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 πŸ˜„