Playing music with the Framer Audio module

Framer’s Benjamin den Boer created a module that makes it very easy to make a music player in Framer.

Download the Framer Audio module as a ZIP:

Unzip it, find the audio.coffee file (it’s in the ‘src’ folder), and drag it to your project’s window.

You’ll see this line added at the top of your project:

audio = require 'audio'

(And the file will automatically be copied to the “modules” folder inside your project folder.)

As instructed on the module’s GitHub page we’ll change the line to:

{Audio, Slider} = require "audio"

With this module, you create an audio player by wrapping the existing play and pause buttons.

By the way, you did import a “Play” button, but it was a hidden group in Sketch so its visible was switched off.

Let’s show it.

$.Button_Play.visible = yes

And now we can wrap() the buttons:

audio = Audio.wrap($.Button_Play, $.Button_Pause)

The resulting player, named audio, will have the same position as the buttons and also their place in the hierarchy. So the audio player is now also a child of $.Now_Playing.

We need some music. That can be online music, so we’ll use this 90-second Apple Music preview clip of the Onuka song.

audio = Audio.wrap($.Button_Play, $.Button_Pause)
audio.audio = "http://audio.itunes.apple.com/apple-assets-us-std-000001/AudioPreview30/v4/a2/3c/57/a23c57a3-09b2-4742-c720-8fa122ab826c/mzaf_6357632044803095145.plus.aac.ep.m4a"

How do we get a preview like that? I searched Apple Music’s catalogue with their online tool.

Then I used Safari’s Web Inspector to see which .m4a file was being downloaded when I played the song, and copied that URL.

I love this song but have no idea what it’s about, apart from the fact that “misto” (місто) is Ukrainian for “city”.

You can already play the music. Try it. Tap the “Play” button!