Skip to content

benjamindenboer/FramerAudio

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 

Repository files navigation

icon
Framer Audio


banner

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

More Resources


Contact

Releases

No releases published

Packages

No packages published