Framer Audio

INTRODUCTION

From music player mocks in Design, to fully functional audio players in Code. A Framer module that allows you to design audio interfaces for iOS, Android, Desktop and more—and then bring them to life. From play buttons to volume sliders.

Watch the video.

Overview

All included properties and methods.

Properties	Type	Parameters	Description
Audio.wrap	Method	play, pause	Wrap audio object around 2 layers.
audio	String		Source of the audio file.
showProgress	Method	slider	Use slider to manipulate audio progress.
showVolume	Method	slider	Use slider to manipulate audio volume.
showTime	Method	time	Display current time with a TextLayer.
showTimeLeft	Method	timeLeft	Display time left with a TextLayer.

Also included: the Slider.wrap method.

Properties	Type	Parameters	Description
Slider.wrap	Method	background, fill, knob	Wrap slider logic around 3 layers.

Get Started

Download the example file or read on for step-by-step instructions.

First, grab the audio.coffee file and place it within the /modules folder (located within your .framer folder). Then, to include the module, require both the Audio and Slider classes:

# Include the module
{Audio, Slider} = require "audio"

Next, you’ll likely want to define two basic states in Design: a play and pause state. I’ve named these layers play and pause respectively, and made them targetable in Code. Next, I’ll wrap the Audio object around these layers, and store the entire object in a variable named audio.

# Wrap AudioLayer
audio = Audio.wrap(play, pause)
audio.audio = "audio.mp3"

The layers are automatically made part of the same object—and the play and pause interactions are functional by default.

---

Volume & Progress Sliders

If you’d like to add volume or progress sliders, you’ll either need to define a SliderComponent in Code, or use the included Slider.wrap method.

# Slider via Code
slider = new SliderComponent

# Slider via Design
slider = Slider.wrap(bg, fill, knob)

The Slider.wrap method takes three parameters:

• background — The background layer of the slider.
• fill — The fill layer of the slider.
• knob – The knob layer of the slider.

All of these can be styled completely in the design. The method wraps a component around these 3 layers to handle all of the sliding functionality for you.

Once you have set-up a slider, you can make it reflect the progress or the volume.

• showProgress(layer) — adjust audio track progress.
• showVolume(layer) — adjust audio track volume.

# Show and edit audio progress 
audio.showProgress(slider)

# Show and edit audio volume 
audio.showVolume(slider)

---

Time & Time Left

The module includes two methods that will automatically update the text contents of a TextLayer to reflect either the current track time, and the time left. These will automatically update—also when a progress slider is being edited.

• showTime(layer) — show current time with a text layer.
• showTimeLeft(layer) — show current time left with a text layer.

# Show the current time and time left
audio.showTime(time)
audio.showTimeLeft(timeLeft)

Please note that these methods only work with TextLayers from either Design or Code.

---

Examples

• Play, Pause. Two artboards, one Audio object.
• Slider Wrapping. From 3 layers in Design to an interactive slider in Code.
• Audio Player. With current time, duration and progress sliding.

More Resources

• W3S Audio DOM Reference.
• MDN Audio Reference.
• MDN Media Events.

---

Contact

• Follow me @benjaminnathan.
• Follow @framer.