https://github.com/benjamindenboer/FramerAudio
Design with Audio in Framer (https://framer.com).
https://github.com/benjamindenboer/FramerAudio
audio audio-player design module
Last synced: 6 months ago
JSON representation
Design with Audio in Framer (https://framer.com).
- Host: GitHub
- URL: https://github.com/benjamindenboer/FramerAudio
- Owner: benjamindenboer
- Created: 2017-10-22T10:06:36.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-08-22T15:25:40.000Z (about 3 years ago)
- Last Synced: 2025-04-12T21:11:22.527Z (7 months ago)
- Topics: audio, audio-player, design, module
- Language: CoffeeScript
- Homepage:
- Size: 43.9 KB
- Stars: 47
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - FramerAudio
README
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.
## 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](https://framer.cloud/BsbYC) 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](https://framer.com/docs/?utm_source=github&utm_medium=link&utm_campaign=framer_audio_benjamin#slider.slidercomponent), 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](https://framer.cloud/BsbYC)**. Two artboards, one Audio object.
- **[Slider Wrapping](https://framer.cloud/BlHxd).** From 3 layers in Design to an interactive slider in Code.
- **[Audio Player](https://framer.cloud/pHMBF)**. With current time, duration and progress sliding.
## More Resources
- [W3S Audio DOM Reference](https://www.w3schools.com/tags/ref_av_dom.asp).
- [MDN Audio Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio).
- [MDN Media Events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events).
---
## Contact
- Follow me @benjaminnathan.
- Follow @framer.