Toggle movie sound on and off on Click


(Steve) #1

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.

Also is there a way to remove the movie navigation controls?


(Steve) #2

Removing the video controls and initial Muting was done via the select Element, then uncheck the Controls property,

I’ve created a function to toggle the mute control but it’s not working. Here are the screen shots that show current resources and function detail:

Action:

Element Ids:

Link to Published webpage:
http://sgdesign.com/temp/


(Steve) #3

I added :

var audioElm = document.getElementById(‘celiamovie’);
audioElm.muted = !audioElm.muted;

alert(audioElm.muted);

to the function and it returns the alert of true and false on each toggle but yet the sound does not happen…

Here are two new renders that use the alert for debugging:

http://sgdesign.com/temp/1.html

and this one is exactly the same BUT the video Controls are enabled to check the sound status:

http://sgdesign.com/temp/1.html


(Steve) #4

Anyone have any ideas on this??

Is it maybe an issue with the interface assignment of Mute on the video not being easily over-ridden with Javascript?


#5

Here’s the JS you would need to mute that video:

var vid = document.getElementById("celiamovie");
vid.muted = true;
// to unmute, use: 
// vid.muted = false;

(Make sure that video has the unique element id celiamovie)


(Steve) #6

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);

Live test file is here:
http://sgdesign.com/temp/3.html


(Steve) #7

Very frustrating…

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?


(Mark Hunte) #8

Can you post your project. @Daniel 's suggestion does work so seeing properly what you are doing may help us to see whats going wrong


(Steve) #9

Mark, sure I can upload…

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.

http://SGDesign.com/temp/Archive.zip


Toggle Button using innerHTML
(Mark Hunte) #10

Ok here is how I would do it.

The mute, un-mute is the easy part. The harder part is getting the Hover to work with change of text.

In the hover of the Button I added :smile:

<div class="button">
    <span class="initialText"></span>
   
</div> 

This gets its InnerHTML changed when Muted. annoyingly even though this is in the hover. It then only appears on Click.

It may be I am tired so I have left it like this for now since it is doing my head in… :unamused:

Example zip


(Steve) #11

Excellent! This works well in my tests… I’ll study what you have done to learn from this.

Thanks!