Awesome
<h1 align="center"> <img src="https://d.pr/i/bRqvKY+" width="160" alt="icon"><br> Framer Audio<br> <br> </h1> <br> <p align="center"> <img src="https://d.pr/i/tPYZvA+" width="840" alt="banner"> <br> <h6 align="center">INTRODUCTION</h6> <p align="center">From music player mocks in <a href="https://framer.com/features/design?utm_source=github&utm_medium=link&utm_campaign=framer_audio_benjamin">Design</a>, to fully functional audio players in <a href="https://framer.com/features/code?utm_source=github&utm_medium=link&utm_campaign=framer_audio_benjamin">Code</a>. A <strong>Framer</strong> 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.</p> <p align="center"><a href="https://youtu.be/KCeOa9F3L9A">Watch the video.</a></p> </p> <br>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
Contact
- Follow me <a href="https://twitter.com/benjaminnathan">@benjaminnathan</a>.
- Follow <a href="https://twitter.com/framer">@framer</a>.