This is my first blog post in quite a while. I've been busy working away on my LED animation sequencing software and I'm really pleased with the results so far (a future blog post will cover the software in detail). One feature of the software is an audio waveform that serves the dual purpose of assisting with animation timings and facilitating navigation of the animation timeline: The Sparkled sequence timeline, including a waveform and synchronised effects Wavesurfer.js To implement the timeline, I used the excellent wavesurfer.js. Out of the box, wavesurfer comes with navigation, audio playback, waveform generation, and a bunch of other configurations and events to hook into. The one issue I encountered was that large waveforms wouldn't render. After some research, I found that this was a browser limitation. Params: Return: string string Promise When using 'dataURL' type this returns a single data URL or an array of data URLs, one for each canvas. To work around this, I implemented a MultiCanvas renderer for wavesurfer, which has since been accepted into the repository and released under version 1.1.0. Other supported types are 'image/jpeg' and 'image/webp'. This was my first ever contribution to an open-source project, so I was pretty stoked to have it accepted and receive feedback from others. The MultiCanvas renderer works by stacking multiple adjacent canvases, the width of which can be controlled by the maxCanvasWidth wavesurfer property. The renderer itself can by used by setting the renderer wavesurfer property to 'MultiCanvas'. Wavesurfer supports two modes of rendering: lines (a traditional waveform) and bars (looks like a histogram, using average frequency values for each bar). The below image shows a wavesurfer timeline that uses bars. I've added a red line to indicate a the end of one canvas and the beginning of the next. Sometimes, a bar needs to be rendered across two canvases Notice that a bar sits right on this line.
0 Comments
Leave a Reply. |