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., ‘
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
# 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
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()
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.)