Hello,
Is there anything like the Toggle Sound snippet in Adobes Animate program in Hype3?
Basically it’s a mute attribute assigned to the movie and then toggled with a Click event.
I tried using the Scene Controls to first set a Stop Sound but it looks like it is unhappy to select a Video and expects a Sound file. I was then hoping to use a Key Down behavior to toggle or restart the sound.
Thanks Daniel,
I was already trying the same but it does not work. To clarify, I removed the selection on the Element to mute by default and expected to set the mute with the Javascript function.
So, the function below does not mute the sound but on click it does, though it takes two clicks. And the same for unmuting, two clicks and it works… Close…
var audio = document.getElementById(“celiamovie”);
audio.muted = true;
document.getElementById(‘celiamovie’).addEventListener(‘click’, function (e)
{
e = e || window.event;
audio.muted = !audio.muted;
e.preventDefault();
}, false);
To get the video sound to mute immediately I created a separate Timeline Action on frame 1 and targeting a function (onTimeline) to mute the video. The variable has a different name so it does not clash with the main toggleMute function:
function onTimeline(hypeDocument, element, event) {
var audio2 = document.getElementById(“celiamovie”);
audio2.muted = true;
}
Next I want to have a transparent button that has a hover state noting to click to turn on the sound.
On Mouse Down, applied an Action to Run Javascript and pointed it at the toggleMute function:
function toggleMute(hypeDocument, element, event) {
var audio = document.getElementById(‘celiamovie’);
document.getElementById(‘celiamovie’).addEventListener(‘click’, function (e)
{
e = e || window.event;
audio.muted = !audio.muted;
e.preventDefault(); // prevents from opening a link
}, false);
}
in the second getElementById I had set the ID of the Button (‘button’) but that would not work…
The only way to have the video un-mute is to set the second getElementById to target the click event on the actual video. And it seems you don’t even need to set the On Mouse Down on the Button to make it work (odd).
So I can toggle the sound but not from a button… How frustrating
Try this test:
View this example: http://sgdesign.com/temp/4.html
Click the button (upper half) first then the video in the lower half and the toggle will start to work but only when you click the video.
The button makes the toggleMute function alive but only clicking on the video (targeted element) do we get the toggle effect. What is needed to get the button to respect the Mouse Down and properly target the un-muting of the video?
Moving the initial mute function out of the click event and to a timeline action works to mute the video without setting this in the properties for the video element.
Now my only problem is getting the button to target restarting the sound on the video. Very close to achieving the goal.