Master Sound on/off function

Hi, I have a project with 5 scenes, at certain start points and click points sound will play to accompany animations. Is there a way I can have a master button / script to turn the sound off (or back on) throughout every scene if the user so wishes?

Hi Matt (@popidev)

You can use javascript to implement the .muted property of HTML5 audio:

<audio id="sound1">
    <source src="....">
</audio>

using the below script on a button for example

var sound1 = document.getElementById("sound1");

sound1.muted = true; // mute

will mute the audio with the id sound1

If you want to mute more than one sound you can add the other sounds to the above script individually (duplicate with different ID’s) or you can use the audio tag for example

var sounds = document.getElementsByTagName("audio");
var muteBtn = document.getElementById("mute");

muteBtn.onclick = function () {

	for (var i = 0; i < sounds.length; ++i) {
    	
    		sounds[i].muted = true;
    }

}

Have a look at this to see if it helps!

D

1 Like

Thank you for this.

I am having trouble though - basically I have inserted sound to play as part of a timeline actions and I am not sure how I can assign an ID to each sound as I am not using html tags to contain them. Is there a way to target the sounds by their filename rather than ID?

ahh … then it’s gonna be difficult. I’m not sure if there is a way to access those actions via javascript. Those actions are hard coded into the generated script and the audio would only be accessed through those 2 actions. Of course other audio elements that are accessed within an element can be manipulated using the technique above.

maybe anyone from @hype can give a little insight here.

Meanwhile, let me have a look and i’ll get back to you.

D

Hi there.
I’m having the same issue.
i’m using the Onload Scene action to load the sound when my scene starts.
I created a menu with a mute button. However, i can’t access my sound with javascript (at least i don’t know how).
Is it possible to interact with a sound loaded with hype time line ?

Hi Charlie

The only way to interact (and manipulate) an audio file is if it is created either by dragging the audio onto the scene or including it within the inner HTML of an element as an audio tag.

You can create the same effect as the action “play sound” by including this piece of javascript in a new function “on scene load”.

window.audioElement = document.createElement('audio');
audioElement.setAttribute('src', '${resourcesFolderName}/drum1.mp3'); /// This can be any sound in your resources area
audioElement.play();
audioElement.loop = "true";

You can then access the global variable audioElement to manipulate the audio.

You can then use an “On Mouse Click” action on your menu button and run another javascript function and place the following in it to toggle the muted state.

if (audioElement.muted) {
    audioElement.muted = "";
} else {
    audioElement.muted = "true";
}
2 Likes

While there’s no “pause all audio” functionality, if you’re still using Hype’s built-in audio support along with Hype Professional, you could make a Custom Behavior which has chained actions to mute all audio. Then whenever you want to mute it all, you’d use the action to trigger this custom behavior. Each time you’d add audio, you’d need to add a pause to the custom behavior, but at least it is one spot.

Where is the action to "mute all audio". Am i missing something?

Are you referring to stopping each audio / sound?

D

Yes, by “chained actions” I mean one action per audio file as part of the behavior.

Ahh. So not a mute all but a stop all. I mean that would work but if you wanted to “un mute” the audio wouldn’t it play the audio from the beginning.

Quick question … is there a way to access that audio via javascript at all?

After you “Play Sound” on a scene load for example. Could you access the audio then? or is that not possible?

D

Ah yes, I interpreted the question more of a pause than a mute (and subsequently didn’t correctly read your question)… my comment was for pausing!

There’s no way to access Hype’s audio via JavaScript, but this is something I’d like to add to the API.

Just like to add my vote to building access to audio via JavaScript within Hype’s future API. I’m building music education animations and typically running multiple audio files on a single page that need to be manipulated by the user.

1 Like

howler is nice …

2 Likes