Skip to main content

Create HTML5 audio visualisations


06 DAT.GUI is a handy tool for prototyping, enabling you to quickly bind a control (slider, checkbox, input field and so on) to a JavaScript variable with a custom callback function. We’ll make use of that here to control the volume of each track, and place an extra checkbox to mute all tracks at once.


07 First of all, we’ll add a resizable <canvas> tag inside the <body> of our HTML. Then, create an inline script of type “text/ paperscript” within the <head> tags, targeting the canvas ID. This delineates the PaperScript scope for Paper.js. We can now draw our circles and create an onResize() method that will keep the circles centered.


08 We’ll now make the createRing() method to be called from our JavaScript’s createRings() method. This is outside the Paper.js scope, so we’ll need to place this method within the global scope using ‘window’. Every time a ring is created, we’ll pass in the index (0-3) for the circle to be created.


09 The onFrame() method is called automatically by Paper.js on each frame of animation. This is where we can get creative and animate the rings however we would like. For the purpose of this exercise, we will scale them up and fade them out over time.


10 You have now reached the cutting-edge of audio and drawing capabilities in the browser, are the creative juices flowing? Take this opportunity to read further and see what you can do.

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.