Quasar /Vue js / Three js : Music visualizations

Recently I launch a product call sonnuage.io. It was a try about Quasar meeting Three js. It’s a proof of concept, and I’m really happy with the look and feel. And I’m about to test the feature of Quasar that allow the project to create an IOS and Android app in a forthcoming article. I will try to guide you through the development process of this project.

First we need to create a quasar project. Obviously you need to install the cli here.

quasar create <my-app>

you need to install some package : three.js, wavesurfer.js

I will not approach tu html template, there is a lot of articles about how iterate through an array of object in vue. My demonstration will focus on the code and how to connect three js and Quasar.

Set up

<div ref=”waveform”></div>

<div ref=”out”></div>

<audio crossorigin=”anonymous” style=”display: none;” ref=”audio” :src=”file” controls>

we need 3 elements to trigger audio visualizer. A div with ref (like an ID with vue js)out, a div to inject the waveform from wavesurfer and an audio tag wich is display none. We only use the last one to feed the audiovisualizer.

Javascript

First Iwant to thanks this formidable article that help me a lot going through three js

So what is important in my article- is how we bind the three js with the vue js lifecycle ?

With the mounted(), we trigger the audio waveform generator.

this.wavesurfer = WaveSurfer.create({

container: this.$refs.waveform,

hideScrollbar: true,

waveColor: ‘#33F’,

progressColor: ‘hsla(200, 100%, 30%, 0.5)’,

cursorColor: ‘red’,

barWidth: 5,

backend: ‘MediaElement’

})

this.wavesurfer.load(this.file.toString())

this.file is the props we pass to our component containing an url of the audio.

Then I create a function binded with the play button. The visualizer is mostly the same with the article that I link you above, the trick was to bind an hidden audio tag with wasurfer muted.

this.$refs.audio.crossOrigin = ‘anonymous’

this.$refs.audio.play()

// audio.play()

this.wavesurfer.playPause()

this.wavesurfer.setMute(true)

var src = context.createMediaElementSource(this.$refs.audio)

Here we launch the visualizer with the source of the audio tag, seing the waveforme progress, but it’s in fact mute. And tadaaaaa

Hope you can try different 3d waveform on sonuage.io !