Producing a Music Video in the Browser


This page and associated codepens are meant to share with other developers a means of creating a Webm video from a dynamically generated canvas driven from user input and a audio file. If this sounds interesting, keep reading.


Introduction

I’m Jason. I’m building Vizibop, a service currently in beta that allows musicians and podcasters to quickly and easily create a unique MP4 video synched to a audio file. Yes, this is a thing.

At its core, Vizibop leverages a HTML Canvas, HTML5 Audio, MediaRecorder, and P5.js to generate a WebM file with front end code only. From there, that WebM file is sent through AWS Elastic Transcoder to convert the Webm file to a MP4 file which can then be shared on sites like Instagram, TikTok, and YouTube. Here is a basic video created from Vizibop:

Creating a basic animation

P5.js is a javascript library that make drawing on a canvas relatively straight forward. Even for the mathematically challenged like myself, particles and flocking are made easier to implement using P5. I am using P5 instance mode to keep things tidy. Here is a very basic scaffolding for a p5 animation:

See the Pen Vizibop – Basic P5 Animation by Vizibop (@Vizibop) on CodePen.


Playing Music

Audio in the browser is a bit of a rabbit hole. Howler and SoundJS will make your life a lot easier if you get into building jukeboxes and video games. To keep things simple, let’s simply create a hidden audio element and allow a user to click a button to begin playing a song. For Vizibop we allow users to upload their own songs in WAV or MP3 format using FileReader and createObjectURL.

See the Pen Play Music by Vizibop (@Vizibop) on CodePen.


Wiring Audio to P5

The P5.sound module makes it super easy to have the variables within your sketch change based on the volume and frequency of a sound. Out of the box you can use Amplitude and FFT to do some pretty amazing things. The Coding Train has a whole series of videos on sound within P5 that I encourage you to watch.

In this example, we want to do some beat detection to change the background of the canvas. Beat detection also gets a little tricky depending on the song and quality of the underlying audio. In Vizibop we let the user define which frequency bands to key off of to really dial in more accurate beat detection.

But…….IOS 13 had a major regression with createMediaElementSource. You can read about it here and here and here. As of the writing of this document, creating a media element source on certain versions of IOS mobile is completely broken. Supposedly this is fixed in IOS 13.6 and 14. If you are on mobile IOS right now, this and all subsequent codepens are not going to be awesome.

See the Pen Vizibop – Sync to Beat by Vizibop (@Vizibop) on CodePen.


Customize the animation

The animation above is pretty basic. A better experience allows the users to turn knobs and dials to customize their animation. In our case, I have tried to balance just enough knobs and dials to create a wide range of videos without overwhelming the user with too many options. The possibilities are really unlimited when you combine images, typography, color, motion, and math.

See the Pen Vizibop – Custom Animation by Vizibop (@Vizibop) on CodePen.


Record a video

We now have the key components to record a music video built entirely in the front end.

Now the fun begins, particularly across browsers and computers. MediaRecorder and captureStream are the magic that allows us to create a Webm video from the components above. As of the writing of this document, Safari only supports MediaRecorder in experimental mode. Firefox does not support VP9 or H264 codecs. Chrome is our best friend here and clearly outperforms in this use case. With 70% market share between Chrome and Firefox, I was willing to move ahead with this approach betting that eventually Safari will make MediaRecorder generally available.

I am still tweaking the configuration here. It seems that both the VP9 and H264 codecs underperform VP8 for this application. Firefox has its issues. Adjusting both the frame rate of the animation and the captureStream combined with the optional videoBitsPerSecond parameter for the MediaRecorder seem to improve visual lag and artifacts due to compression. It’s not perfect but so far I am pleased with the results

See the Pen Vizibop – Record Video by Vizibop (@Vizibop) on CodePen.


What’s next?

With this technique, there really isn’t a limit to the types of you can create in the browser. With that said, by design, Vizibop will not evolve into a full blown video editor. A guiding principle is to keep the user experience simple while maximizing the number of unique videos that can be created. Awesome Factor = Number of Unique Videos / Number of Knobs and Dials. My intent is to create a tool that is very simple to use for people who I believe should be spending more time focused on their core craft.

Your thoughts, feedback, advice, and guidance is always welcome

Jason ( @vizibop )

Create a video with a animated GIF

You can now create a video with a animated GIF. This opens up a whole new world of possibilities for showcasing your audio.


Check out the easy steps below to create a video with a animated GIF:


1 – Go to GIPHY and search for something amazing!




2 – Click on a GIF that matches your style




3 – Click the Copy Link item as seen below



4 – Copy the link inside of the GIF Link field



5 – Create a video!


6- Select Animated GIF from the list of animations


7 – Paste the URL from GIPHY


8 – Have fun!!!!!!!


Try Vizibop today

Once you’ve spent some time on GIPHY finding that perfect meme, you should try making a video with Vizibop so you can share your music or podcast on Instagram, Tiktok, and Youtube. Don’t let the effort of making a video get in the way of sharing more of your creations.

The Best Free VSTs for 2020


Good quality plugins don’t necessary need to be expensive. Sure, we would all like to own Omnisphere, EZDrummer or Komplete 12. But at the end of the day, you can put great sounds into Reason, Fruity Loops, Ableton or Logic for no money at all. Here are some great VSTs for your next track:


VK-1 Viking Synthesizer – Blamsoft

VK-1 Viking Synthesizer comes with 228 presets providing very rich sounds. This plugin provides great emulation of a old school monophonic analog synthesizer. There are three variable wave oscillators, a multi-wave LFO, ladder filters with a dual lowpass configuration, and two mod busses.


Helm – Tytel

Helm is perfect for beginners with an easy-to-use step sequencer, formant function and a stutter section. This VST gives you the knobs and dials to start learning sound design sound design, using visual graphs and envelopes.


Freq Echo – Valhalla

Freq Echo has a strong emphasis on delay and other feedback effects. In a few minutes you will be doing some subtle chorusing, intense flanging and a unlimited demonstration of echoes.


Amplitube Custom Shop – IK Multimedia

The Custom Shop lets you create your own virtual gear collection with 24 great sounding models to experiment on. If you are a guitar or bass player, this is the free plugin for you. You can really dial in your sound with amplifier heads, microphones, cabinets, rack effect gear and stomp boxes.


Wider – Polyverse

Polyverse’s Wider is a great sounding stereo plugin. Using proprietary comb filtering, Wider puts out a very natural stereo image from a single channel and does it without compromising phase.


PanCake – Cableguys

This VST lets you make complex pannings. Try your hand at your own modulation curves with the use of soft and hard control. This technique allows you to see some really gentle transitions as well as really hard cuts.


Tyrell N6 – uHe

This plugin probably deserves to be at the top of the list in my mind. Tyrel is a really strong subtractive synthesizer that will put out very rich sounds with SO many variations. Tyrell N6 has noise, 2 oscillators, 2 LFOs with 7 waveforms, a ring modulator, and a mixer with filter feedback and overdrive.


Chamber Orchestra 2 – Versilian Studios

An orchestral plugin designed for music theory geeks whop simply want affordable or free orchestral sounds. The instruments include string sections, orchestral percussion, woodwinds, brass and keys.


TAL – NoiseMaker

Noisemaker comes complete with 256 factory presets, three oscillators and some great effects such as delay, reverb, modulators, various filters, and a awesome bit-crusher. You will find some roomy pads as well as heavier quick envelope noise.


Kontakt Start – Native Instruments

Kontakt Start is an huge bundle of Native Instruments effects and instruments. It includes a nice sampling of instruments, synthesizers, plugin effects and almost 1,400 samples. Make sure to try Vintage and TRK-01.


Dexed – Digital Suburban

Dexed is a multi-format, multi-platform synthesizer with 144 parameters that is modeled after the Yamaha DX7. It is a patch of the DX7 and also has it’s own sound machine. There are a ton of presets from Yamaha’s hardware synthesizers.


SPAN – Voxengo

A spectrum analyzer that lets you dial in every detail from FFT window overlap to Fourier block size in samples. SPAN is a handy way for getting deep details about your audio.


MFreeFXBundle – MeldaProduction

MeldaProduction offers a smorgasbord of plugins for you to try out. From utility tools for saturation, distortion to cool little modulators and instruments.


Vinyl – iZotope

iZotope’s VST has modeling, advanced filtering, and resampling processes to simulate vinyl. Try out some scratches, warps and mechanical noise to add a little spice to your audio.


Supermassive – Valhalla

Supermassive is a VST for creating delays and reverbs. There are eight modes, density controls, and multi-phase delay modulation. Use Supermasive to add a little sugar to any of your sounds.


NOVA by Tokyo Dawn Records

A parallel dynamic equalizer that really shines against some purpose built equalizers you will find in your DAW . If you need more clarity, more punch, or a better sibilance, NOVA will do the trick.

Try Vizibop today

Once you’ve tried out all of these amazing VST’s and produced your next creation, you should try making a video with Vizibop so you can share your music or podcast on Instagram, Tiktok, and Youtube. Don’t let the effort of making a video get in the way of sharing more of your creations.

Quickly share your audio on TikTok, YouTube and Instagram

This week I launched Vizibop which takes your MP3 or WAV track and turns it into a video. You can download the MP4 video and share it on TikTok, YouTube and Instagram or any other place you want to share your music or podcast.

Vizibop is a online audio visualization maker. It is designed to be super easy to use. It was built so you can quickly create a video without the complexity of layers and complicated interactions like you find in something like Fruity Loops ZGameEditor Visualizer.

We believe the effort and time required to make a video for your audio should not get in the way of sharing more of your creations. If you are anything like me, you create lots of ‘sketches’. You should be able to create and post a video of your sketch in a matter of minutes. Vizibop is designed to do just that.

With literally thousands of animations to choose from, and further variations with a simple set of knobs and dials, we think you can create a video, with minimal effort, that matches your style. You can see examples of the videos you can create with Vizibop in our showcase.