Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)


#1

Tumult Hype fully support audio actions so you can easily play and stop audio in response to scene events, touch and mouse events, and at specific points in time using timeline actions. For more information, please visit the audio & video section of our documentation. For more advanced control over audio, please continue reading. If you have a question not addressed in this topic, please create a new topic in this category.

Referencing audio files already hosted from a server

If you’re starting with files already uploaded to a server such as:

http://site.com/audio.mp3 and http://site.com/audio.ogg

Your audio element would appear as:

<audio width="400" controls="controls" preload="auto" id="myaudio">
	<source src="http://site.com/audio.mp3" type="audio/mpeg"> <!-- Safari and iPhone -->
	<source src="http://site.com/audio.ogg" type="audio/ogg"> <!-- Firefox and Chrome -->
</audio>

Once you’ve done that, select a box in Hype, click Edit > Edit Inner HTML, and paste your code within the box. You may want to adjust the width and height of the element to suite your needs.

Referencing Audio files in your Tumult Hype Resource Library

Any file added to your resource library can be referenced from within your Tumult Hype document using the following variable: ${resourcesFolderName}. If you had a mp3 & ogg file in your Tumult Hype document, and you wanted to create an audio element, you would use the following audio element code:

<audio id="myAudio"width="400" controls="controls" preload="auto">
	<source src="${resourcesFolderName}/audio.mp3"type="audio/mpeg"><!-- Safari and iPhone -->
	<source src="${resourcesFolderName}/audio.ogg"type="audio/ogg"><!-- Firefox and Chrome -->
</audio>

Playing audio from a Scene or Mouse Action

To play external audio by some other user action (not pressing play or pause on the element itself) you’ll need to run Javascript. This will allow you to play this audio in response to:

  • Clicking a button
  • Loading a scene
  • … or any other event that can be linked with a Javascript in the Scene or Mouse action inspectors

Please note that if you are playing audio that is not externally hosted, you can follow the instructions here. All you need to do is create a small snippet of Javascript which will run when you choose. First, add an ID to your audio element like the text ‘lionroar’ below:

<audio controls="controls" height="50" id="lionroar" preload="auto" width="300">
<source src="AUDIO.MP3"type="audio/mpeg"></source>
<source src="AUDIO.OGG"type="audio/ogg"></source>
</audio>

Next, create a new javascript that runs ‘On Scene Load’ and paste in the following code:

var myAudio = document.getElementById("lionroar"); 
myAudio.play();

What this code does is finds the element with an id ‘lionroar’ and plays it. To pause it with another user action, you’ll run:

var myAudio = document.getElementById("lionroar");
myAudio.pause();

If you have multiple audio files, use a unique var name like myAudio1, myAudio2. You’ll need to make sure you use that unique name when you call the ‘play/pause’ command like this: myAudio1.pause();

If you wanted to start a timeline, then play the audio, you would run this:

HYPE.documents['MYDOCUMENTNAME'].playTimelineNamed('TIMELINENAME');
var myAudio = document.getElementById('lionroar');
myAudio.play();

Rewinding & Skipping ahead

To control audio using the ‘currentTime’ function, you’ll need to add your audio element to your Tumult Hype document based on the instructions above (make sure your element IDs match up). To jump to 30 seconds and play, use the following code:

var myAudio = document.getElementById("lionroar"); 
myAudio.currentTime = 30000;
myAudio.play();

To rewind this track, you can set the currentTime to be 0.

Toggling Play / Pause

To pause playing audio, or play paused audio, use the following function:

var myAudio = document.getElementById("myAudio");

if (myAudio.paused) { 
  myAudio.play(); 
} else { 
  myAudio.pause(); 
}   

You can find more commands in the Javascript Document API. … the possibilities are endless! ♬

Demo document:

Please download this demo document to see how this fits together within a Hype document: PlayPauseDemo.zip (1.8 MB)

Tips for iPhones, iPads, and Mobile devices

  • iOS6 allows multiple ‘streams’ of audio playing at the same time.

  • Most mobile devices don’t respect the ‘autoplay’ tag in the standard <audio> tag. Using a ‘Mouse click’ action to play audio. In general, have your audio begin playing at the same moment a tap gesture occurs.

  • Take the user’s bandwidth into account: The speed of their Internet connection will determine when audio will play, and how quickly it will become ‘buffered’. Test early and often!

Looping a certain number of times

Please see this thread on looping media elements.

Setting the Volume

To adjust the volume of your audio element, trigger this short JavaScript snippet which targets your playing audio element (.5 is 50%:wink:

hypeDocument.getElementById('myaudio').volume=.5;

Please note that hypeDocument.getElementById will work when the selected element on the scene has an element id of ‘myaudio’. This ID is set by using the property: id="myaudio" in the <audio> element.

If you’d like to mute elements, read this topic, or check out how to create a ‘mute master switch’.

Playing in Older Browsers (IE6 / IE7)

The audio element above will work well in Firefox, Safari, Chrome, and IE9. If you want to support IE7 and earlier, you’ll need the slightly more complex version of the audio code below which comes from seanooi.net and provides a Flash Fallback for IE6, and a Windows Media Player fallback for IE7. Here is the code for that player. If you just paste this code in and display it on your scene, you’ll have a standard audio element that the user can control. To integrate this audio into your project so you can play it based on user events, you’ll need to write a small amount of javascript (covered above).


Javascript Audio not working
Drag controlled timeline to launch audio?
Continue Sound With Play Button
Use key commands instead of "on click"
How to control Audio with keyboard keys?
Creating volume slider for Hype audio element
Play/Pause Timeline AND Audio?
Adjust the sound
Knowledge base: Guides from the Tumult Team
Detecting if audiofile plays
A 'sound resume' button possible?
Issues with Phonegap and embedded elements in Hype Pro
Audio not loading from CDN
Audio buttons do not play on iPad (6th generation) iPad
How to make a toggle button to toggle Audio Mute?
Audio Play Error with Javascript
Timeline Action
(Alistair Kroie) #2

Hi,

I am unable to change the ‘Unique Element ID’ of my audio (Hype 3.5.1 standard).

When I select the audio in the resources folder the Unique Element ID can’t be changed in the identity window. Am I selecting this correctly? Is there something else I need to do to change the Element ID?

I downloaded ‘simpleaudio.zip’ from another thread, while the controls work, I can’t see a no way to change the ‘Unique Element ID’. It has obviously been set to get this function to work, but there is no way for me to make changes or see where the ID was originally set. The ID can be changed for other elements though, just not media.

Could you please advise? It looks like a bug to me, but it’s possible that I’m doing something wrong.

Thanks!!

Al


#3

Sorry about the confusion. This was a typo. The audio element’s ID in the simple audio.zip file can be seen by selecting the audio element on the scene, and clicking Edit > Edit Inner HTML. There, you can see the inner HTML of an element with this code inside of it:

<audio id="myAudio" width="400" controls="controls" preload="auto">
    <source src="http://site.com/audio.mp3" type="audio/mpeg"> <!-- Safari and iPhone -->
    <source src="http://site.com//audio.ogg" type="audio/ogg"> <!-- Firefox and Chrome -->
</audio>  

The id="myAudio" section of that code is the property that needs to match up to your JavaScript. Hope that helps!


(Alistair Kroie) #4

Thanks Daniel, got it working! Could you also let me know if there is a way to control the volume of audio that was set to ‘play on scene load’ (via the Hype UI)?

Is there also a way to control all the audio in a scene? For example if there are 8 audio tracks that have the option to play, must they all be referenced to stop or is there a blanket .js command to stop all audio?

Thanks,

Al.


#5

Audio played ‘on scene load’ doesn’t have a targetable ‘id’ set, so you won’t be able to set the volume. You’ll need to create a regular audio element and use the code above:

hypeDocument.getElementById('myaudio').volume=.5;

At this time, no – but that’s a common request. I’ve added your vote! Here’s one way to do this with jQuery: http://stackoverflow.com/a/15930356


#7

A post was split to a new topic: Creating volume slider for Hype audio element


(chris1) #8

I’ve been trying to get this audio player method working with a project in PhoneGap. It all works fine locally (when running on my desktop machine) but when I load the resulting output files into PhoneGap the audio doesn’t play at all. I suspect it is a path issue but I have been able to figure out what the correct path to the .mp3/.ogg files should be.


#9

Hi everyone !

This function is not working on mobile, only on desktop :

hypeDocument.getElementById(‘sound’).volume=.15;

How to make it works for mobile ? Basically, I want to dim the sound when the user is clicking something.

Thank you !


#10

Howdy, I’m a bit new to Hype so bare with me. Your “PlayPauseDemo.zip” is exactly what I need, except I need the audio to start when the scene loads. I thought I could simply run Javascript play90 On Scene Load, but I can’t get that to work.

Any help would be greatly appreciated.


#11

Audio won’t be allowed to autoplay unless it occurs immediately after a user interaction, or (in chrome) you have previously played a lot of media. To get this to work across multiple browsers, you’ll need to have some sort of user action that takes you to that scene where the audio is autoplayed. Here’s an example: PlayPauseDemo-autoplay.zip (1.7 MB)

So on that second scene, if you preview that on it’s own (hitting option + command + enter), the autoplaying element will not be allowed to autoplay. But that button on the first scene which takes you to this scene will follow the can this autoplay rules.


#12

Daniel, first of all, thank you so much for your panther quick response. Quick question…would I be able to audio play a mp4 video file? If so, what to prevent me from making an mp4 out of the audio and treating like video, but off the stage?

Again, that’s so much for your guidance. I’m very impressed. Working in the world of Flash/Animate for 20 years, I’m not used to this level of expertise and communication. LOL :):grinning:


#13

If you have it off scene, folks won’t know what they’re missing – so yes you can have an MP4 video off scene to use its audio. Just make sure you use ‘playsinline’ set either in the code itself or checked in the element inspector. For mobile, you will need to have the same considerations regarding autoplay as you do for audio, but with the added complexity that without the playsinline attribute, the video you’re hiding might want to fill the screen of the device.


#14

so… I can get the volume to work well as long as I trigger the audio from the scene. But if I set the audio to play in the timeline, I can’t seem to control this even if I have the audio object in the scene.

See this for example where the audio starts very loudly but the only way I can figure out to get it to play more quietly is on a button click.

audio.hype.zip (2.3 MB)

I want an activity where the users don’t click anything but simply watch an animation that autoplays. Being able to set the volumes for each sound (narration, car noise, music, car horn, etc) separately in Hype would be much easier than mixing all these separately and them taking them is as a mix-down.

Come to think of it, how do you stop audio playing once you trigger it to play in a timeline. Stopping the timeline won’t do it because it’s already started playing… hmmm…