This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Nov 02 - Read on Facebook

Introducing a big update to the Framer AudioPlayer Module, alongside an all-new example! The AudioPlayer Module for Framer makes it easier for you to prototype with music. It allows you to easily visualize the time, duration, progress, volume and more. It combines the power of the HTML Audio Methods with the flexibility of Components. Alongside the update, I’ve made a Material Design Music App prototype which contains multiple tracks, previous-and-next controls and more.

On Github: https://github.com/benjaminnathan/Framer-AudioPlayer
New Example: http://share.framerjs.com/download/v68wxklica9y/project.zip

11 Comments

Pietro Schirano

Yes. Yes. Yes.

Albert Ramirez Canalias

:O this is great!!

Min-Sang Choi

This is so sick! great work ben! :-)

Jan Schlie

Great stuff

Jinho Seo

it's beautiful! thanks!

David Lee

Love this!

Carl Cooper

Looks great. Looking at the code and trying to understand what's going on - what do the curly brackets mean when you're requiring the module: {AudioPlayer} = require "audio". Also, in the module file, what does the @ sign mean. ex: @player

Josef Richter

Does this somehow help working with advanced stuff like visualizations using AnalyserNode? I'm struggling with that on mobile safari, works for me in chrome only.

Benjamin Den Boer

Hey Carl - that notation is a shortcut. It's effectively the same as writing: AudioPlayer = require("audio").AudioPlayer
As for the "@" sign: it's a CoffeeScript shortcut for "this".
So "@player" equals "this.player" :-)

Benjamin Den Boer

I haven't looked into it, but I'm afraid it won't, Josef.

Benjamin Den Boer

Hey Jérémy Jones - yep! What I usually like to do is target all properties at once, if you're looking to really customize the appearance:

@progressBar.fill.props = ...

Read the entire post on Facebook