Creating volume slider for Hype audio element

Elements Audio & Video
4

Hi Trey!

Another approach that uses a symbol’s timeline to set the volume…
Project: VolumeControl_timeline.hype.zip (278.0 KB)

The initial set-up is similar in many regards to that described above, such as the “initAudioVar” & “playSound” functions; but the code for the volume slider itself is far less as it utilizes the “On Drag” action to constrain the slider’s motion, a symbol timeline and a wee bit of code to indicate where in the timeline the volume slider has been dragged.

The volume slider has been converted to a symbol called “VolumeSet” which has a timeline 5 seconds long. These seconds are translated to volume settings. So the volume slider dragged the equivalent of 1 second is quiet (20% of full volume), and the slider dragged all the way to the right (5 seconds on the timeline) is 100% volume. There is no reason the timeline couldn’t be 10 seconds long, or whatever - just keep an eye on the math to allow a translation to the JavaScript volume range.

Examples - as used in the “sliderVolume” function below:

3 seconds on the timeline multiplied by “0.1” (to translate to the JavaScript value range for volume, 0.0-1.0) which is = “0.3”. The “0.3” is multiplied by 2, for a setting of 60% of full volume. 5 seconds would be (5 * 0.1) = 0.5. Then (0.5 * 2) for a volume setting of 1.0 or 100%.

The following function, called by the “On Drag” action of the slider, tracks where the slider is on the timeline and then sets the volume (the variable “volumeSlider” is initialized in the “initAudioVar” function) :

function sliderVolume(hypeDocument, element, event) {
if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseMove) {
		var volumeSetting = volumeSlider.currentTimeInTimelineNamed('Volume');	
		audio1.volume = ((volumeSetting * .1) * 2);
	
	}
}

That’s it.


Notes: What I do not like about this approach is the "On Drag" action which, especially on the first drag, is rather rough - the slider does not follow the cursor very well; though it improves after that.

While the first method posted above has more complicated code for the volume slider, it is smoother and it needs only two adjustments to customize to what is basically a “cut & paste” coding operation.

1 Like