Audio control question

Elements Audio & Video
1

I’ve got a little hype generated page running that shows a simulation of some Augmented Reality work my company is doing…

    http://altdimension.com/livingpopups/interactiveAR/napoleon/

It’s based on the reveal script with some image overlays, overflow masking, etc. That part is working great.

What I’m trying to figure out is how to allow the audio to play. I’m fine having it muted at startup and adding a button to un-mute (needs to remain in sync w/ the picture though), then I’d like to have the volume based on the timeline so that when the center of the window is over the AR, you can hear it and it fades out as you move off center.

Thoughts?

Here’s a zip of the project if that helps…

    https://www.dropbox.com/s/glmvb7rva4e3uhp/napoleon.hype.zip?dl=0

Thx

2

You can set the volume of the element by using a button like this:

hypeDocument.getElementById('napo-video').volume=.5;

First, you would need to set the ‘Unique Element ID’ of the video to be napo-video

Some more info on these properties can be found here: Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)

To play both the timeline and the video, and unmute the video all in one go, you can use regular JavaScript assigned to a button:

var myVideo = document.getElementById("napo-video");
myVideo.play();
hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward);
myVideo.volume=.5;

The video doesn’t seem to work – can you reencode it in h264 with a standard audio codes like AAC or MP3?

3

This is just to show you what I would do based on what you’ve said. As @Daniel said there was no audio with the file so I’ve added some white noise to the video just to show you the volume.

The volume is controlled by a script based on the drag.

3 Likes