Pause audio after playing

I am trying to find a way to pause audio that is playing in my Hype document within each othe characters at the top. When you clock on them a bio appears for each one with an audio read along. So far I have been able to “Play Sound” and “Stop Sound” using the Mouse Clicks in the Actions section.

I have seen ways to tie in Javascript with this, but since I am a beginner some assistance would be nice.

The link to view this is http://thesupersustainables.com/characters/ And I have also made the hype work file accessible through dropbox: https://www.dropbox.com/s/lhrynwtaw6h575k/characters.zip?dl=0

Thanks for viewing and hope you can assist.

Hi Angel!

I have created a demo here. For the purposes of this demo it features only Tara (Terra) and the “Pause~Play~Stop” controls.

Is this what You were requesting?

If so adding the “Pause” control requires a more intricate set-up (JavaScript) than the “Play Sound” - “Stop Sound” arrangement You currently have using Hype’s built-in commands. All the controls will need to use JavaScript, not just “Pause”. And to utilize the JavaScript you are going to need to add elements with audio tags.

A fair amount more work compared to what You have now… so ask yourself just how important a “Pause” control is to your interface. Your voice overs are mostly around one minute which isn’t terribly long to play at one time - even for a youngster. Just a thought.

This is awesome. How can I get started with this please? I did try to steer away from this but would need it as part of the story. Thank you.

Hi Angel!

I won’t have time to go over this with You for at least another day - and I set it up for my own quickie demo, it is not a finished work. I will need to tighten it up - but You seem raring to go - and the over all concept is valid. The attached Demo is way stripped down to the bare essentials so I could upload it here.

CharactersDemo_JHSv2.zip (1.3 MB)

You will see three JavaScript functions: “playVoiceOver”, “pauseVoiceOver” & “reloadVoiceOver” - which are trigger by the appropriate buttons.

The audio is referenced by the “Play” button. It references the “Terra - Voice over.mp3” file in the “Resources Library”.

The “Play” button’s innerHTML has the following script (audio tag) in it:

<audio id="Terra" preload="auto">
      <source src="${resourcesFolderName}/Terra - Voice over.mp3" type="audio/mpeg">
</audio>

Note the ID “Terra” in this audio tag. It is the ID that is referenced in the JavaScript functions.

All the time I have right now. There’s enough here to let You explore - but again this Demo project is not a completed example.

Thanks Jim. Since I am in the middle of studying up my JavaScript from a designers side, i’ll explore what you put together to assist me. Thank you very much I appreciate it and will update you on my progress.

@JimScott Thanks again. Since I am a beginner with Javascript, what would be the best way to add the additional functions? Perhaps giving each button a id or class? I got the innerHTML down.

tag, I’m it!!

@AEVolucion, can you elaborate a bit more on the additional functions.

As you can see (or perhaps not :slight_smile: ) in Jim’s example the audio is what has an ID and this is what is being referenced in each of the functions. So, depending on which button you click it uses the same variable to reference the audio source. In this case “whichVoiceOver”

whichVoiceOver = hypeDocument.getElementById('Terra');

Then simply, the methods change (play(), pause(), etc) depending on which action (javascript function) is called.

If you wanted to do the same with another “character” you would just repeat the same steps with another set of “controls” but use a different ID (in the innerHTML) and of course reference a different sound in the <source> tag.

Of course, there are other ways to do this that make it probably too complex for yourself at this point. The above technique would be the easiest.

Sorry for the delay in response Angel - I’ve been without power for three days here in rain soaked N. California (far better than another year of drought!)… and am now behind in my project; as such I will only have time to post here and will not be able to reply for another day or two - if any follow up question of yours requires an involved response.

And Thanks to @DBear for filling in with his above post. You can follow his advice and stick with the simpler code as previously presented (as You are learning things) - or take a leap… if so read on.

Let’s take it up another level.

Our overall goal in the new code is to condense to one function the ability to handle the “Play” ~ “Pause” ~ “Stop” button controls and know which “voice over” to play. This approach will save You a fair amount of coding time as You have seven layouts that all basically do the same thing.

The code presented here is not the only way to accomplish our goal - and may not be the most elegant form. But this approach has proved very serviceable to me in working with a collection of media files, and is relatively easy to follow along.

Project Demo: CharactersDemo_JHSv4.zip (1.3 MB)

Warning: I have only tried the following suggested code in this simplified version of your project. There may be things in the full project that conflict with this code - or cause unexpected results; while unlikely - it is a possibility. An inconsistency with ID names would be one area to create a problem, so be consistent in your approach (more on this topic just below).

Changes to the Project Structure:

The “control” button IDs in this demo now have a specific naming structure e.g.:
“play01_Terra”; “pause01_Terra”; “stop01_Terra”.

Each layout requires a unique ID. In this demo I only have one layout - but the idea is that You would name them according to the layout order (and the voice over name). So You would have the “Play” button for the second layout named “play02_Terra”. The “Pause” button ID for the second layout would be “pause02_Terra”. The “Stop” button ID for the second layout would be “stop02_Terra”. The third layout would use “03” instead of “02” in the names.

You do not have to use this exact naming schema - but this is how I’ve chosen to do it here as it is dead simple. Using the actual layout name or some part of it will add a layer of complexity - unnecessarily muddying the waters for the purposes of this demonstration.


We will use two methods not in my previous Demo: slice(); and indexOf().

The slice() method does just that - it slices a part of a string and returns one of the sliced components.

whichBtn = element.id // i.e. the element the user clicked on e.g. "play01_Terra"
whichBtn.slice(7); // returns the characters in the string *after* the seventh character: i.e. "Terra"

Do note that the “pause01_” has one more character than both “play01_” & “stop01_” so we will use “whichBtn.slice(8)” for the “pause01_Terra” string instead of “whichBtn.slice(7)” used for the “play” & “stop” IDs.

Read more about the slice() method here.


indexOf() method returns the position of the first occurrence of a specified value in a string. If it does not find this value it returns “-1”. This “-1” value is how we will be employing the indexOf() method. We don’t care where in the string the specified value occurs - only if it exists or not.

if (whichBtn.indexOf("play") > -1) {

If the value is greater than “-1” it exists in the string and then we will do something (like play the voice over).

More info on the indexOf() method here.

Just below is the new code. Below this code, using the “Play” button ID from the demo project (“play01_Terra”) I will annotate one conditional iteration (if, else… statements - read about them here).

function voiceOverControls(hypeDocument, element, event) {	
	whichBtn = element.id;
	
	if (whichBtn.indexOf("play") > -1) {
	whichVoiceOver = whichBtn.slice(7);
	whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
        whichVoiceOver.play();
	}
	else if(whichBtn.indexOf("pause") > -1) {
		whichVoiceOver = whichBtn.slice(8);
		whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
		whichVoiceOver.pause();
	}
	else if(whichBtn.indexOf("stop") > -1) {
		whichVoiceOver = whichBtn.slice(7);
		whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
		whichVoiceOver.load();
	}
}

**Here is the annotated version:**
whichBtn = element.id;
// i.e. "play01_Terra" was clicked; "whichBtn" is a variable holding this value
	
	if (whichBtn.indexOf("play") > -1) {
 //"play" is found in the variable "whichBtn" (and so the value is "> -1")

	whichVoiceOver = whichBtn.slice(7);
// whichBtn.slice(7); gives us "Terra" from the string "play01_Terra"
// so the "whichVoiceOver" variable now equals "Terra"

	whichVoiceOver = hypeDocument.getElementById(whichVoiceOver);
// whichVoice over is now being set to the value of the audio tag whose ID is "Terra"

	whichVoiceOver.play();
// play the "Terra" voice over

As a memory refresher here is what our audio tag - located in the “Play” button’s innerHTML looks like:

<audio id="Terra" preload="auto">
      <source src="${resourcesFolderName}/Terra - Voice over.mp3" type="audio/mpeg">
</audio>

Note the audio tag’s ID of “Terra” and the audio file it references in the “Resources Library” - “Terra - Voice over.mp3”, just as with the previous project file in my first post above: “CharactersDemo_JHSv2.zip”

1 Like

@JimScott and @DBear Thank you both for your help. I got it to work!
DBear, I will go back and play with the code that was first introduced to me. I want to learn.
Jim Scott, I used the new code provided. I was able to dissect it and see hoe it works. The one thing I did need to make new each time, which I think you mentioned, was to make new unique ID’s on each layer so I would not receive an error. It did look complex at first but with your notes it was a big help. Thank you again!

1 Like

You are Welcome - I’m glad You got things to work.

@JimScott and @DBear Gentlemen, thank you so much for your help. I know it is long overdue but better late then never. My clients launched TheSuperSustainables.com it was a valuable learning experience utilizing Hype and from a business side.

3 Likes