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

14 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.

Jérémy Jones

Benjamin Den Boer Hey, quick question, how can I change the color? (the black one/left) something like audio.progressBar.played? http://cl.ly/image/2L0z1J0V423G
Thanks :)

Jérémy Jones

Easy - @progressBar.fill.backgroundColor = "red" :)

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 = ...

Jérémy Jones

thanks Benjamin Den Boer

Read the entire post on Facebook