Javascript/audio autoplay issue

Using JavaScript with Hype
1

Hello Hype community!

I am very much hoping to get some input/help with a project I’m working on.

It’s an online interactive album.

I’ve included a Hype mockup that is a bare-bones version of the site with only navigation, sounds, and 3 pages (instead of what will ultimately be 12).

Much of it is working, but I’m having a hard time tracking down an issue described below.

I’d think if you just download the example and start messing around you will quickly see what it is I’m trying to build and what the behavior should be.

Download here:
autoPlayTest3.zip (225.4 KB)

If you do checkout the Hype project, when previewing, make sure to open up the Chrome dev tools console to see what’s going on behind the scenes. I’ve tried to document major actions with console.logs.

Also, FWIW, I am wondering not only how to fix the issues I’m having with my current setup, but also wondering if anyone might have ideas for refactoring my code or even totally restructuring my code so that I can get the behavior I’m looking for in the dry-est way possible? I’m not sure that the way I’ve laid it out here is the best way to do it.

So, here is a more detailed explanation of what I’m trying to do and where I’m at with it:

I’m in the process of building an autoplay/audio playback/navigation system that allows the user to choose and play a song/scene manually, or click an autoplay button that automatically plays the album, song-to-song, all the way through. Each song in the album has its own page that will contain the lyrics and animated album art for that song. Each page is built as consecutive scenes in Hype. I’m using howler.js for the audio, which is all set up and working great. It’s the autoplay system that is not quite working right.

Here is an explanation of how the autoplay system should behave and what’s going wrong:

There is an autoplay button on each song/scene page.

Say a user chooses a song (either from the main menu, or by clicking through the various song/scene pages manually), and then the user presses autoplay.

Here is how the autoplay sequence should behave:

  • Let’s say the user has navigated to a given scene/page (let’s say scene 1).

  • When the autoplay button on that scene/page is clicked, the autoplay sequence will be switched on and the song should start playing (let’s call it song1).

  • At the end of the song1, since the autoplay button is switched on, a function will be triggered that switches to the next Hype scene, which contains the next song/scene in the album (song2).

  • At the end of that song (song2), the process repeats (automatically switching and triggering the next scene and next audio track) until the entire album plays through.

  • When the last song/scene is reached (lets say song12 in order to represent a full album of songs), it then automatically switches to the beginning (song1) and continues to play the album through in an infinite loop until the autoplay button is turned off.

  • When the autoplay button is turned off (while the song is playing), the song that is currently playing will just play though and then stop (thereby halting any further autoplay actions).

  • There is an autoplay button located on the menu page and the intro page. Clicking either of these autoplay buttons should automatically switch to song/scene1 and trigger song1 playback and following through with the rest of the autoplay sequence as outlined above.

  • If a user navigates to a given song/scene (let’s say song3) and then presses the autoplay button (and no song is currently playing), then song3 will be triggered to play and then at the end of that song, the autoplay sequence will continue.

  • If a user navigates to a given song/scene (let’s say song7) and then presses the autoplay button (and no song is currently playing), then song7 should be triggered to play, then at the end of the song, the autoplay sequence will continue.

Here is what’s going right:

  • All manual audio controls are woking fine.
  • If the user clicks the autoplay button from the menu screen, the intro screen, or the song/scene1 page, then the autoplay sequence works correctly (playing song1 from song/scene1 and then continuing through the whole album).
  • If I manually switch to a given song/scene, and I first manually trigger the audio with the PlaySong button, then the autoplay sequence triggers the correct song and continues to play correctly.

Here is what is going wrong:

  • If I navigate to a given song page other than song/scene1 and I try to click the autoplay button fresh in order to start the autoplay sequence, it will not play the correct current song. The only way I can get it to play the correct song is if I click the PlaySong button first.
  • I’m using a counter (a global window. variable) to keep track of what song and scene is supposed to play at any given time. The strange thing is, if you open the Chrome Javascript console, when I navigate to a given scene, you can see that the counter is being updated correctly (for instance, if you choose scene3 from the menu, then it will jump to scene3 and it will display that the counter is now = 3). However, even though the counter is showing the correct number, the correct song will not play.

So, that’s where I’m at. I would so very much appreciate any help you might be able to offer!
Any ideas?

Thanks so much!

rg

2

the window.counter variable is correct, but it is out of sync with the window.currentSong variable when you try to autoplay. Try logging currentSong to see instead of window.counter; this is the variable you’re actually using for playing.

You probably just need to change AutoPlayOn() to add the line to set window.currentSong = 'song' + window.counter; so it would look like:

	// turn On autoPlay
	window.autoPlay = true;
	console.log('autoPlay has been turned ON');
	
	// check to see if the song is playing.
	// if it is not playing, play the currentSong. Otherwise, do nothing.
	if (!window[currentSong].playing()) {
		window.currentSong = 'song' + window.counter;
		window[currentSong].play();
		window.console.log('song number ' + window.counter + ' is now playing');
	} 
	
	window.counter++;

(For that matter, I would ask why you are doing a counter++ at the bottom?)

Note that Hype does have an API to look at what scene you’re on (hypeDocument.currentSceneName()), and then you could potentially use this for determining what to play.

1 Like
3

Awesome, thanks so much for your input with this Jonathan!
You were right - adding window.currentSong = 'song' + window.counter; to my AutoPlayOn() function got it in sync and it now works!

The window.counter++ at the bottom was my mistake. In fact, I think I have figured out a way to refactor the entire code structure to work better. I’m going to give it a shot.

That having been said, in an effort to really understand what my options are here, I made this example and posted on the forum earlier today as a separate question (but it directly relates to the code suggestion you helped me out with here):

This is a much simpler example, but it gets to the heart of what I don’t understand. Would you be so kind as to take a look and explain to me why, my console.log()'s indicate that I’m moving through all functions, but only the first scene switching command works? Why is this and what would the correct syntax be to make it work?

callMultipleFunctions.zip (33.0 KB)

In the other thread I got some good feedback about how I could do this with native Hype functions or with a single custom function (rather than writing multiple functions for multiple scenes).

But I’m still wondering, what would the proper syntax be to do this if I wanted to do this? Is it possible to trigger a chain reaction of functions within Hype (besides just one). Just trying to better understand how it all works. :slight_smile:

Thanks again for the help!

4

When I run your code, it goes into an infinite loop clicking "Start sequence" on the Intro scene. This is because the button calls:

switchToScene1()
which calls
sceneSwitcher()
which calls
switchToScene2()
which calls
sceneSwitcher()
which calls
switchToScene2()
which calls
sceneSwitcher()
which calls
switchToScene2()
... etc

I'm not exactly sure what you're trying to accomplish, but if you are looking for a toggle to automatically advance scenes, I'd probably do it by having a timeline action at the end of the main timeline for each scene, and this action can jump to the next scene if some flag is set. The turning on of this action could either immediately advance, or if you wanted to be fancier, look at the time of the main timeline and only advance if it is >= the duration of the timeline (and otherwise it will advance when the timeline action is hit).

5

Advancing to the next Scene once an audio track finishes ("Auto Play" option selected...).

I've been working with @raleigh on this I think we've nailed the dismount:

myAudio.onended = function() {
if (autoPlayFlag == "true") {
    hypeDocument.showNextScene(hypeDocument.kSceneTransitionPushRightToLeft, 1.1)
  } else {
     var ppBtn = hypeDocument.getElementById('playPauseBtn');
     hypeDocument.setElementProperty(ppBtn, 'background-image', "${resourcesFolderName}/Btn_Play_K.png");
 // Autoplay not in effect so set the "Pause" symbol to "Play" symbol now that the song is ended
       }
	}

Oh! There's another background image I had to locate in the Finder instead of conveniently dragging to the element's image well from the Resource Library to generate the default image. :sob:

1 Like