A universal 'mute' button possible?

1

Hi gang,

In this multimedia presentation, I’m doing (see screen capture) , it was recently suggested that we allow the user to mute the narration track entirely if he/she chooses to just read it (as given on the left).

The way this is set up is that each scene has its own separate narration track. So the visitor would have to hit the mute button on each page to silence it.

Note: the ‘sound resume’ button plays the audio track from the beginning if the client changes his/her mind and wants audio instead of muted silence.

So my question is – is there a way (javascript?) to universally mute the whole presentatton, instead of having the client pressing on mute on each separate scene?

In other words, on the opening splash page of the presentation, there is an option of a mute button that will silence the whole thing once and for all.

And a ‘mute off’ button if he/she changes his/her mind and wants to listen to it all. So the button resumes the default sound on.

Thanks everyone!

RH

Screen Shot 2017-01-18 at 10.54.42 AM.png963×605 664 KB

2

One idea that I have not experimented with (I’m doing this off the top of my head)…

Basic Concept:

You could set up a global variable so when the mute button is pressed (JavaScript function runs) in one scene the variable is set - audioMute.

window.audioMute = "true";

Then in the “On Scene Load” event in all scenes check for this:

if(audioMute == "false") {
    myNarration01.play();
else {
    myNarration01.load(); // track loads but does not play
}

“myNarration01” would be the ID of the audio track you’ve set up for Scene 1, and the number would correspond to the audio track for that Scene (e.g. Scene 2’s audio track ID would be “myNarration02”).

And of course You would need an audioMute = “false”; when the “sound resume” button for the narration is clicked. You also could refine this code by using the Scene number to establish what track to play so You only need need one function for the whole project instead of a unique function for every Scene.

Example:
In the “On Scene Load” event handler runs a function that establishes what audio track to play for the Scene that is loading, and if the mute button has not been selected previously will play the audio track:

window.whatScene = hypeDocument.currentSceneName(); // e.g. "Scene_02"
whatScene = whatScene.slice(-2);
// we get the last 2 characters of the scene name - i.e. whatScene now = "02"

myNarration = ("myNarration" + whatScene);
// myNarration now equals "myNarration02" the ID for the audio track for Scene 2

 if(audioMute == "false") {
        myNarration.play();
    else {
        myNarration.load(); // track loads but does not play
    }
3

I think the problem is that Hype is lacking Audio / Video controls. Here’s an example…

Using JavaScript / DOM volume properties, the volume can be changed on an audio file or video. So, mute would simply be…

element.volume = 0.0;

The problem with Hype is that an audio file isn’t always on-screen. If I load a sound on scene load, what’s the way to manipulate that sound? I don’t know.

There’s no ID, no Hype API. There’s simply… “Play Sound” and “Stop Sound”.

4

Hi Michael!

You need to use an HTML audio tag, which in Hype is created via an element’s innerHTML:

<audio id="myAudio_01" style="width:100%" preload="auto" controls="">
      <source src="${resourcesFolderName}/myaudio01.mp3" type="audio/mpeg">
</audio>

The ID for the audio file is in the tag itself - it is NOT the ID field in the “Identity Inspector” which references the containing element of the audio tag (such as a button, rectangle, etc.).

This tag then references the audio in the “Resource Library”. Using JavaScript you can then play, pause, load, sync timelines, etc. by referencing the audio tag’s ID for that sound resource.

myNewAudio = hypeDocument.getElementById('myAudio_01');
myNewAudio.play();
myNewAudio.pause();
myNewAudio.load(); // loads file - if audio is playing this code acts as a rewind to the start of the audio

More info here: http://forums.tumult.com/t/controlling-audio-advanced-techniques-play-pause-rewind-volume-control/953
5

Yeah, but that's not fun :smirk:

I saw Daniel's audio guide, but it's kinda kludgy. That's not his fault. But if I have a game with a lot of audio files, which I do, I have to hide the sounds somewhere on the scene.

So, to add volume controls to my game, I have to create a database of my sound files... and then use loops to lower / raise the volume on each.

My point is that I think Hype can improve in this area. It's a lot of coding, which is what Hype is supposed to eliminate.

6 Likes
6

howler.js is nice …

3 Likes
7

Hi Jim,

Thanks for the input!

How do I assign an ID to my narration track(s)?

For example, the file name for one of them is CRR_audio_1.mp3. There’s a sequence of 12 narration tracks so it goes up to CCR_audio_12.mp3.

By the way, the way I’ve set up the sound activation is from the NEXT button of a previous scene So for example, the client is on the opening splash page, and clicks on NEXT to go to Scene 1 of the presentation. Attached to this NEXT button is the Action ‘Play Sound’, the sound being CRR_audio_1 (the first narration track). Then when he/she is in Scene 1, clicking on the NEXT button here will activate CRR_audio_2 for the next scene, and on it goes.

Attached is a screen capture of my Scene 2. Thanks!

Screen Shot 2017-01-19 at 9.11.17 AM.png1361×931 1010 KB

8

@rh009

I’ve already started on working on a Demo for You.

However - before I go any further - I would like to cover a few questions~interface issues that popped up for me. Your explanation will allow me to craft a more accurate demo for You.

I’m not clear on exactly what is the function of the narration track. Does it simply verbalize the text on screen? Or does it also add ancillary information that does not appear visually?

Your description uses the term “universal mute”. Strictly speaking a mute simply turns the volume down to “0” - but the soundtrack keeps playing.

OR do You actually meaning an “On” & “Off” sound control for the narration tracks. this would be a different set-up.

If it was a “mute” in the strict sense of the word:
In this circumstance if the user clicked “mute” while in a Scene and then clicked “unMute” (or Resume, etc.) 30 seconds later the narration track would would be playing at that point in time (30 seconds later) instead of at the time when the user clicked mute. Suppose they click on “unMute” after the narration track has finished - nothing would happen. This approach strikes me as disorienting to the user. Then You need to (or should) put up some kind of notice that the track has finished playing. One more complication.

And if the narration is providing more information than the text on the screen they would be missing out on the valuable (I would assume!) info that was not conveyed between the mute~unMute clicks.

When the viewer travels to a new screen with the “universal mute” functioning on the new narration track it would start playing but the sound down to “0”. Clicking “unMute” would set the volume up but the narration voice over would be playing a ways into the track - or possibly finished. Again, this seems a possible source of confusion.

But may be this is what You want - just checking.

An “On” & “Off” sound control for the narration tracks:

Would really be more like a “play”~“pause” set-up when in the same scene. Click once the track goes silent. Click again the track picks up where it left off.

If the soundtrack was set to “off” when the viewer left Scene 1 and went to Scene 2, the soundtrack would load but not play. Then when~if the viewer turned the soundtrack “on” in Scene 2, it would start playing from the beginning.

I think the interface has to be one way or the other: either the “mute” functions as a true mute and runs while the volume is at “0” - or it is “On”-“Off” (effectively Play-Pause in the same Scene). A mute should not try and fulfill both functions otherwise it will confuse the viewer as to what the true function of the control is.

A “third way” would be to have “Play”, Pause" and “Mute” buttons available. Clean and unmistakable as to what the functions are.

Which brings us to an option for the “third way” here - You could actually show the web browser’s default audio player which does all these functions for You. You can keep the audio player discrete on the page (so it does not impinge on the Scene’s visuals - as well as give the viewer the option to hide the audio player).

This way the viewer has the opportunity to play, pause, rewind to start, scrub to a specific location in the audio player’s timeline, mute - as well as a volume control to set the volume.

You could still have the universal “off” setting, but it might be nice to label it with a “Sound Off” and “Sound On” button. Once the viewer selected “Sound Off” the “Sound On” button would appear in that Scene and all other Scenes the viewer went to - and vice-versa with “Sound Off”. A nice option here would be to hide all sound controls when the Sound button is “off”… and then show them again of course when the Sound button was turned “on”.

Just a few thoughts ;->
Please let me know how You envision the sound track interface to work.

9

Wow… howler.js is nice!

@Daniel @jonathan – why isn’t this part of Hype?! :smile:

1 Like
10

Hi Michael!

Indeed! When I first started using Hype I was shocked to find a virtual absence of sound controls, the ability to play sound on the Timeline - or at least have the soundtrack's waveform displayed in the Timeline. There are work arounds for everything of course - but this missing capability is definitely a time waster. Look forward to improved audio controls in Hype 4!

2 Likes
11

I found a possible reason... it doesn't autoplay on iOS. Interesting. :thinking:

Also, straight JavaScript is all that's needed...

I knew there was an easier way to do this. It seemed odd that I'd need to add HTML to the scene if I wasn't even going to show an audio player.

12

So, I’ve been working on audio because of Annoyed Tomatoes. One of the features is volume control – for both background music and sound effects.

https://photics.com/games/annoyed-tomatoes

mv = 0.3;

var music = new Audio('${resourcesFolderName}/title-screen-dark-feelings.m4a');
music.volume = mv;
music.loop = true;
music.play();

The mv variable is the Music volume. So, when the background music is played, it plays at the preferred volume. For the theme of this thread, just set the value to “0” for no sound… or use music.pause();

Easy, right?!

Well, my projects aren’t that simple. I’m using a loop. For some reason, when I play the audio with Hype’s scene actions, there’s no delay at the end of a loop. But when I play it with the above JavaScript code, there’s a noticeable delay. I’m still figuring that out.

13

Well, my projects aren't that simple. I'm using a loop. For some reason, when I play the audio with Hype's scene actions, there's no delay at the end of a loop. But when I play it with the above JavaScript code, there's a noticeable delay. I'm still figuring that out.


Hi Michael! - Here's some info about the "gap" in the looping...
1 Like
14

I was just searching this topic and I think Hype is using the Web Audio API...

Apparently Web Audio gets rid of the gap, which I think is what Howler.js is using. It says so right in the title... "Modern Web Audio Javascript Library"

Since most modern browsers seem to support Web Audio, I figured I'd just use Web Audio. I started looking at how to add an audio file with pure JavaScript. I was like nope... not tonight. That's a lot harder. HA HA!

Howler.js and Gapless-5 appear to be good solutions though... and the audio not playing on iPhone is an Apple thing.

15

@Photics
Maybe we move this discussion to a different topic? I think this parallel discussion is hijacking the thread.

16

Hello Jim,

Thanks for taking the time to answer this so thoroughly.

Yes, the narration track on the left verbalizes the text on the left, and is actually timed to some of the moving images to the right. There is no ancillary info.

The presentation will be on a ipad hosted by ‘Kiosk Pro’.

Each separate scene has its own .mp3 track, and as I mentioned, is activated by the NEXT button of the previous scene. So the NEXT button in scene 4 for example, will activate scene 5 narration as the presentation changes from scene 4 to 5.

The idea of the MUTE button (which I’m personally not crazy about, but is what the client is asking for) is that if a visitor chooses not to listen to the narration for whatever reason, but just read it at his/her own pace, he/she can turn the whole thing off.

The MUTE button will simply be placed in the opening splash screen. Once MUTE is pressed, the whole presentation is silent. If the person changes his/her mind, he/she must navigate back to the splash screen and unmute.

As you mention, there might be compilations, but that will to be the way it is. We would prefer not to use a mute option at all, but…

So I guess, my answer to your question, is that it is a ‘true mute’.

This project is actually due on Monday. If you can let me know how to make a MUTE button and an UNMUTE button (to be placed on the splash page) that’ll be great. I understand that each scene might then have to fiddled around with by adding code, but that’s ok.

I’m not a coder, so simple steps please. : )

Much thanks!

RH

17

@rh009

Thank You for your reply so this gives me a better idea of your goal.

The main reason why I have gone into such detail in these last several posts is to find out exactly what You need and so make the code as specific & simple as possible - so it is easy for You to understand and be able to make basic changes to the code if necessary.

If the viewers are making a choice on the Splash screen (and only there) I think it is more of an “on”~“off” switch, otherwise we have a mess on our hands. i.e. they leave Scene 3 - go to the splash screen and then come back to Scene 3 - or maybe not - perhaps they go to Scene 4, etc. So why not just start things from the beginning of a sound track when ever a Scene is opened - the viewer already has to disrupt their experience by having to leave a Scene to turn the volume on or off.

I think, following the gist of my first post above, we would implement a “soundStatus” variable.

Initially this variable would be set to a default of “on” - the soundtrack for each scene would play when the Scene opened - and turn off when the Scene closes, of course.

If the viewer chose “off” at the splash screen the soundStatus variable would be set to “off” and the soundtracks do not play.

This set-up would work using the “On Scene Load” event handler. When a scene opened it would check the soundStatus variable to see whether or not to play the sound track.

We also would employ the “On Scene unLoad” event handler which would stop playing the soundtrack when the viewer left a Scene - whether or not a soundtrack was actually playing. There is no penalty for turning a sound off even if it is already off - and our code is one notch simpler as we do not need to check the “soundStatus” variable.

Does this approach sound good to You?

18

Hi Jim,

Thank you again! Yes, I believe this suits our needs.

If you can be so kind as to provide the codes, where to place them, how to customize, etc. that’ll be wonderful.

I’m not a coder, so simple instructions would be awesome.

RH :slight_smile:

19

I will create a basic Hype project that demonstrates the entire set-up (code, placing of code, etc. using 3 dummy scenes) which You will be able to adapt to your needs. I will not be able to get to this until tonight (California time) and will communicate via private message when it is finished.

20

Wonderful! :grinning: