FramerAudio

Overview

All included properties and methods.

Also included: the Slider.wrap method.

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, youll likely want to define two basic states in Design: a play and pause state. Ive named these layers play and pause respectively, and made them targetable in Code. Next, Ill 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 objectand the play and pause interactions are functional by default.

Volume & Progress Sliders

If youd like to add volume or progress sliders, youll 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 updatealso 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.