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

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.


Starting Audio: Build Trust First

Audio should (in most cases) be played in response to a touch event, but always if this is that person's first time on your website. That means that your users need to click a button, tap a link, or take some action to start a sound. The NYTimes, for example, creates an 'Unmute' button on stories that require audio. If you want audio to play at a random time in your document, you'll need to build trust with your users. They will need to have engaged with your website and played audio by tapping or taking some media/related action a few times. Each browser handles this 'trust' differently. Chrome, for example has a Media Engagement Index (Read more here: Chrome's new Media Engagement Index), which may cause issues with audio played at a certain point in time. This does not affect audio actions that trigger in response to a click or tap event, but it does affect whether your audio can play after, for example, 3 seconds have elapsed in a timeline. Browsers do not want audio to play at random point in time without any user action and this is a good thing for the web. For more information about how browser handle autoplay in browsers, please visit: Autoplay guide for media and Web Audio APIs - Web media technologies | MDN. The best course of action is to make sure that you only play audio in response to a user event like a click or a tap.

Example Document

For a quick demo of custom audio actions, download this file: PlayPauseDemo.hype.zip (1.8 MB)

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

Your audio element would appear as:

<audio width="400" controls="controls" preload="auto" id="myaudio">
	<source src="https://site.com/audio.mp3" type="audio/mpeg"> <!-- Safari and iPhone -->
</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>
</audio>

If the file audio.mp3 is in your Resource Library in Hype, you would use <source src="${resourcesFolderName}/AUDIO.MP3"type="audio/mpeg"></source>

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();

Do you want to create a toggle button to play audio if it is paused, or pause it if it is playing? Please see: Audio Play / Pause switching Buton - #2 by DBear

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();

But keep in mind that you need to trigger this action in response to a user action -- a click or tap -- or else it likely won't 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.hype.zip (1.8 MB)

Tips for iPhones, iPads, and Mobile devices

  • You can play multiple streams of audio at once (since iOS 6+)
  • 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).

7 Likes

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

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!

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.

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: javascript - How can i stop all audio playing using Jquery - Stack Overflow

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

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.

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 !

2 Likes

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.

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.

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:

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.

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…

Use the 'Stop Audio' action for that same audio element.

That's definitely the way to do it -- I've heard https://howlerjs.com/ is a great library for working with audio. You could also create a slider for the audio volume with a few lines.

er... yeah, but as I said, in the activity I'm building, the user won't have a button to tap which means I have to balance all audio before importing it into the project. That's doable, but not ideal at all.

I mean, you also need to crop your images before you bring them into Hype – maybe I’m not understanding you? If you need to set the volume of audio before playback, you would need to setup your audio element outside of the Hype audio action interface. But this is a great feature request!

Actually, you don’t have to crop images before you import then. Simply group the image, set the Content Overflow to Hidden in the Metrics inspector and crop to your heart’s content. In addition to this being possible with graphics, you can make all sorts of adjustments to images in the Element inspector including filtering. In comparison to this, there’s virtually nothing you can do with audio you’ve imported.

Allow me to explain my situation in more detail. Forgive the detail, but maybe it’ll prompt a solution that I’ve not considered yet.

Say I have the following audio over five scenes, none of which requires user interaction because it’s animation that simply plays as the iBooks Author widget runs:

  • background music track 1
  • background music track 2
  • wind
  • car engine
  • car horn
  • narration
  • pop
  • light switch
  • character dialogue 1
  • character dialogue 2

First off, I put all these into something like Audacity. I must have a firm idea of which audio occurs in isolation and which elements occur simultaneously and then I can move these around to adjust the amplitude so that everything is balanced with everything else. This might involve anticipating which piece of, say, a narrator’s script, might occur with only background music playing, or in isolation etc. and adjusting each piece accordingly. I also have to make sure that I normalise the whole thing so it’s balanced relative to other audio in other Hype projects. So, I balance all the elements and then export them one by one and import them all into Hype.

It doesn’t stop there though. I have to save that audio project alongside my Hype project in case I decide I want to change any of these elements. For example, instead of the light switch noise occurring in isolation, I decide want the light switch noise to play at a part in the timeline where I also have, say, narration or background music, I now have to rebalance the light switch noise so it can be heard over these.

This all requires quite a lot of planning to get right first time. In our experience, projects evolve rather than work out exactly as you have storyboarded the very first time. This means that it’s almost inevitable you have to go back and balance additional audio elements to get everything right.

Oh how much fiddling around it would save to be able to control volume of audio elements!

thanks for PlayPauseDemo.zip .
How can we make a toggle button with images? not text? when playing a Play image shown, when paused the other button…

Hi! I want to add a mouseClick action to many many elements in different scenes, let them play an audio which I’ve already upload to the hype document. But I don’t know how to write the code. Now I write them in the header HTML:

<script> HYPE.documents['cloud5','cloud4','cloud3','cloud2','cloud1'].event['onMouseClick'];
var myAudio = hypeDocument.documentName('so.mp3');
myAudio.play();
</script>

I want to do that: when I click on the elements named “cloud5”,“cloud4”…, the audio “so.mp3” will play.

I have 30 hype documents and there are 10 scenes which include 3 layouts in a document, every layouts has some elements need to be added the "play audio"events…I don’t want to add the event one by one…it’s crazy. Here’s an example:play audio.zip (484.6 KB)

Thank you very much!~~~

Why not include this library, or something like that, directly in HYPE 4 with an easy way to use and implement in a project? :slight_smile: