A universal 'mute' button possible?

@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.

Wow… howler.js is nice!

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

1 Like

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

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.

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.

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

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.

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

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

@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?

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:

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.

Wonderful! :grinning:

No Script, just work with two versions of each back/next-Button. One with and the Other without an Action playing the sound. So a mutebutton will just run a Timeline to Show just the desired Button. Custombehaviours and Symbols may be a good help …

this should work toomuteSounds.hype.zip (445.1 KB)

1 Like

Can I just interject here :slight_smile:

I would (if it were me) just create a persistent symbol (because it lives outside the scene structure) and place my buttons inside it. That way the buttons would be available across all scenes and any interaction would be contained to the symbol so no need to check anything on scenes, etc. Unless you want to (I’ll come back to that ;))

So, here is my logic:

  • Create a persistent symbol. Inside create 3 buttons. Mute, Play, Pause. Give them ID’s. My suggestions are muteBtn, playBtn, pauseBtn but it doesn’t matter except the code below must change.
  • Inside the symbol and in the symbol inspector (CMD-2) choose “on Symbol Load” -> Action: “Run Javascript…”, Function: “New Function…” and in the function window type the following code (or copy and paste): Basically, this sets 2 global variables. isMuted which is set to false and audio which is assigned a new Audio object with a URL for the audio.
isMuted = false;
audio = new Audio('http://traffic.libsyn.com/effortlessenglish/Models_Etc.mp3'); //new Audio('${resourcesFolderName}/myAudio.mp3');
  • Then, highlight any of the buttons and in the Actions inspector (CMD-6) choose “on Mouse Click” -> Action: “Run Javascript…”, Function: “New Function…” and in the function window type the following code (or copy and paste again): Here we are using just one function and depending on the button’s ID we call the associated audio methods. Note, the Audio object has a “muted” property that is either true or false.
if (element.id == "playBtn"){ //ID assigned to play button
console.log("play pressed")
	audio.play();
} else if (element.id == "pauseBtn"){ //ID assigned to pause button
	console.log("pause pressed")
	audio.pause();
} else if (element.id == "muteBtn"){ //ID assigned to mute button
	console.log("mute pressed")
	if (!isMuted){ // check our global variable to check if muted or not.
		console.log("muted")	
		audio.muted = true;
		isMuted = true;
	} else if (isMuted) {
		console.log("not muted")
		audio.muted = false;
		isMuted = false;
	}
}
Files

Demo

globalAudioControls.zip (38.7 KB)


The above technique will enable you to control one instance of audio over the entire document.

If you wanted to delve deeper, you could create variables in each scene to find out where the user is and use this variable to set the audio to play from that point. Using the currentTime property of the audio object. I’ll let Jim work on that if he wants :wink:

2 Likes

Regarding the other diversion within the thread. I have some documents using webAudio in Hype if you want @Photics I can share them with you and show you how you can use the technique to have seamless looped audio. PM me.

anyone else with good suggestions¿ … :wink:

Hello Jim and everyone else,

Thank you for all the suggestions! Now this is what I call a ‘community’!

Let me try out the various solutions, and see what’s best. Stay tuned…

RH :slight_smile:

I moved the conversation here... Annoyed Tomatoes

I'm using howler.js... https://howlerjs.com ...which is nice.

1 Like