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%
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).
