Instagram Filters for Music: Part 3. Allowing Users to Choose Songs from the Instagram Music library

Introducing the Instagram Music Patch

Image for post

This is Part 3 of a series of posts about building Instagram Spark AR filters for artists in the music business. Check out Part 1 and Part 2 as well. 🤘🏻

Up until this point, any audio integrated into an Instagram Spark AR filter would need to be manually added to the effect as an M4A file. Enter the Instagram Music Patch. This patch allows users of your filter to select any track from the Instagram Music library to use in your effect. The patch can also be connected to the Audio Analyzer or Energy Meter patches to power dynamic visuals in the effect using the real-time audio levels of the selected track. I think this technique works best with more generic audio powered filters like an audio visualizer for example.

The patch doesn’t come without its issues though. Adding an extra step for your filter can reduce the conversion rate of shares so only use this patch if it is beneficial to have the entire Instagram Music library at your disposal. In addition, users may only select a small portion of the chosen track which will be looped in the recording. Finally, I’ve noticed that Instagram will strip the audio file out when you try to save a recorded video without actually posting it to Instagram Stories. That one is probably an edge case but worth mentioning.

I’d like to share a very simple prototype filter I built using the new Instagram Music patch as well as the Energy Meter patch for the Foo Fighters.

Foo Fighters “Bridge Burning” Filter

Almost 10 years ago, I helped Foo Fighters tease the announcement of their seventh album Wasting Light. The teaser consisted of a simple webpage which initially looked black and empty. However, the intro riff of the album’s first track “Bridge Burning” began to play. As the audio levels of the track increased, so did the appearance of the iconic “FF” logo. I had simply connected the left and right audio channels of the clip to the opacity of each “F” of the logo. It was a ridiculously simple tactic which led to millions of replays and many email signups.

I was thinking about this teaser the other day while putting together the “Shame Shame” filter for Foo Fighters latest release and thought I could recreate it as a simple Instagram effect. In order to do this, I extracted each “F” of the “FF” logo as a separate texture. Each of these are used as materials for stacked rectangles in the scene. Rather than use the textures directly within the materials, they are instead connected in the patch editor because we’ll be providing their alpha opacity dynamically. Then, we’ll connect an Instagram Music patch to an Energy Meter patch so the user may select a song from the library and we may get the left and right energy from the track. These energy readings are then normalized and power the alpha channel of each related “F” texture. Finally, we’ll connect the Energy Meter to an awaiting speaker so we actually get a signal.

Here’s a patch diagram of the basic setup:

Image for post
Spark AR Patch Editor

When the user opens the filter, Instagram prompts them to choose a song from the library. Once a song is chosen, the clip will automatically begin playing and the energy levels will reveal the “FF” logo accordingly.

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store