Mixing the music tracks

The other music tracks will be unmuted when the user advances through the videos, with all four of them playing simultaneously on the last video page.

We use a "change:currentPage" event to know when the user swipes to another page.

First things first: when this event is called, it means the user stopped staring at the first video. This means can set the user_has_swiped variable to yes because a ‘Swipe to continue’ reminder is not needed.

# Listen to page changes
page.on "change:currentPage", ->
    user_has_swiped = yes

Now we have to figure out which page we’re on.

A PageComponent’s visible page is in currentPage, but this property contains the layer object, e.g., ‘page_1’.

It would be better if we had a number.

Fortunately there’s a method, horizontalPageIndex(), that tells us the index of a page layer. We combine it with currentPage.

# Listen to page changes
page.on "change:currentPage", ->
    user_has_swiped = yes
    page_index = page.horizontalPageIndex page.currentPage

This ‘page index’ is zero-based, so the first page will be 0 and the last page 3.

We use our page_index variable in a switch statement to unmute the second track on the second page, the third track on the third page, etc.

    switch page_index
        when 1
            music_2.mute no
        when 2
            music_3.mute no
        when 3
            music_4.mute no

We can ignore the first page because the first track should never stop playing.

We can now also start the remaining videos.

    switch page_index
        when 1
            music_2.mute no
            Video_2_Clouds.player.play()
        when 2
            music_3.mute no
            Video_3_train.player.play()
        when 3
            music_4.mute no
            Video_4_people.player.play()

Everything works!

But you’ll notice that the tracks keep playing when you swipe back to the previous pages. We need code that mutes them again.

    switch page_index
        when 0
            Video_1_Bridge.player.play()
            music_2.mute yes
        when 1
            music_2.mute no
            Video_2_Clouds.player.play()
            music_3.mute yes
        when 2
            music_3.mute no
            Video_3_train.player.play()
            music_4.mute yes
        when 3
            music_4.mute no
            Video_4_people.player.play()

Note that I added a when 0 statement, because the second track (music_2) should mute on the first page.

On the first page we also ‘restart’ the first video. This is needed for iOS devices on which only one video can be playing at given time. (Starting a video will pause any other video that was already playing.)