Recreating the progress bar and timers
Adding the draggable progress bar and the time played and time remaining counters underneath it.
The Framer Audio module uses sliders for its progress bar and volume slider.
You customize a SliderComponent to look like you want (or create one in Design) and then pass it to the audio player.
Try this slider:
progressBar = new SliderComponent width: 311 height: 3 backgroundColor: "#DBDBDB" knobSize: 7 x: Align.center y: 363 parent: $.Now_Playing
It’s as wide as the album cover,
311 points, and it’s thin, only
3 points high. The light gray of the slider is
The size of the knob,
knobSize, is also quite small, only
parent it’ll be placed where it belongs: inside the “Now Playing” screen. We use
Align.center to center it horizontally and place it
363 points from the top.
The left part of a SliderComponent is its
fill, a child layer, so we have to set its color separately:
progressBar.fill.backgroundColor = "#8C8C91"
And the same is true for the
knob, which gets the same color as the fill:
progressBar.knob.props = backgroundColor: progressBar.fill.backgroundColor shadowColor: null
(We get rid of its default shadow by setting
Now, to activate the slider, you pass it to the audio player’s
Just under the progress bar, on the left, we want the Time Played counter. Same deal—you make a Text Layer, and then pass it to the audio player.
timePlayed = new TextLayer fontSize: 14 color: progressBar.fill.backgroundColor x: progressBar.x y: progressBar.y + 5.5 parent: $.Now_Playing
It uses the default (iOS and Mac) San Francisco font with a size of
14, and we want it to be placed
5.5 points below the
progressBar. The text’s
color is the same as the progress bar’s
Then, to have it update when the music plays, you pass it to the audio player’s
There’s also a Time Remaining counter, which counts backward.
It has the same text properties as the
timePlayed counter, so we can just copy that one…
timeRemaining = timePlayed.copy()
…and then change a few properties to move it to the right:
- Its right edge,
maxX, should be aligned with the
- Its text should be right-aligned.
- And it needs a fixed width for right-aligning text to work.
timeRemaining.props = textAlign: Align.right width: 60 maxX: progressBar.maxX parent: $.Now_Playing
You pass it to the audio player with a
You’ll notice that everything is now placed precisely on top of the Sketch
$.Progress_bar, so we can hide it:
$.Progress_bar.visible = no
By the way, you can now see when the music has loaded. When the Time Remaining counter changes to the correct length,
-1:29, it means that the file is ready. When this takes too long, you can download the
.m4a file and save it inside your project folder (best in a new ”sounds” folder). Of course, you’ll then have to change the URL to a local one.
Interactive progress bar