Recreating the progress bar and timers

Adding the draggable progress bar and the time played and time remaining counters underneath it.

Adding the progress bar

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 ”#DBDBDB”.

The size of the knob, knobSize, is also quite small, only 7 points.

By making $.Now_Playing its 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 shadowColor to null.)

Now, to activate the slider, you pass it to the audio player’s showProgress() function.

audio.showProgress progressBar

Adding the Time Played counter

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

Then, to have it update when the music plays, you pass it to the audio player’s showTime() function.

audio.showTime timePlayed

Adding the Time Remaining counter

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 progressBar’s.
• 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 showTimeLeft().

audio.showTimeLeft timeRemaining

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