Drag controlled timeline to launch audio?


(nev) #1

I’m trying to have a simple draggable element play a sound as its dragged back and forth. So I have a small rectangle that can be moved over a timeline of three seconds and at say one second a play audio event should fire. I’ve tried doing that with both the play sound command and by launching Javascript and by starting another timeline but all these methods fail.

Is this possible. If I select continue after drag the sounds will fire but not if I effectively try and use the drag as a scrubber.

Many thanks
Nev


(Greg) #2

I’m not sure if it will work, but have you tried attaching your javascript to a Timeline Action?


(Hans-Gerd Claßen) #3

you’re better of with js for audio here …
example

audio.hype.zip (2.4 MB)

for control beyond play / pause / volume etc. you’ll have to rely on libraries


(nev) #4

Thanks guys.

Not near my Mac to check the hype document but the record player time jumping example is ace. Hopefully I might be able to adapt that to get what I’m trying to do to work.

Basically a slider that plays progressively through notes of a chord, as you move the slider back and forth, (each note is a separate file).

Thanks for the help, very much appreciated.

Nev


(Hans-Gerd Claßen) #5

then forget about my first example …
create a timeline with stoppoints, add a play audio behaviour.
create the slider which on drag controls the timeline with option continuing on.

though, won’t work on iPad. If important rethink you timelineapproach.


(nev) #6

Thank you. I will try adding stop points later tonight, think I’d only tried with pause before.


(stephen) #7

Timeline actions won’t fire during a drag. I would like to add more options in the future to allow this. In the meantime you can add a Run Javascript action to your On Drag handler and use currentTimeInTimelineNamed to figure out if you should play audio.

The code below assumes you have added your audio as suggested in here and that you want the audio to play when that point is hit either forwards or backwards.

var currentTime = hypeDocument.currentTimeInTimelineNamed('dragTimeline');
var soundTime = 2;
if (window.pastTime == true) {
	if (currentTime < soundTime) {
		var myAudio = document.getElementById("myAudio"); 
		myAudio.currentTime = 0;
		myAudio.play();
		window.pastTime = false;
	}
} else {
	if (currentTime > soundTime) {
		var myAudio = document.getElementById("myAudio"); 
		myAudio.currentTime = 0;
		myAudio.play();
		window.pastTime = true;
	}
}

(nev) #8

Thanks for that, have added i think correctly but likely it’s user setup now causing my issue.dragsound.zip (119.1 KB)

I’ve added a zip here if anyone has time to give me a pointer, of my current working.

Looking in inspector it seems I have an issue with my initial asset setup.

Thanks for all the help so far,
nev


(stephen) #9

This one should work:

dragsound.zip (18.8 KB)

You need to include the resources folder in the audio path:

<audio height="50" id="click128" preload="auto" width="300">
	<source src="${resourcesFolderName}/click128.mp3" type="audio/mpeg"></source>
</audio>

and you should set the audio currentTime to 0 each time (not 1)


(nev) #10

Sorry been away so thankyou. That works to play the sound at the specified time.
I should now be able extend that out to include other sounds at points in the timeline, so many thanks.