mute – unmute sounds on website.

[chauhanheena]

Hi,
I’m using a script to play sound on the click event of buttons and anchor tags.

and i call this function on the click event of anchor tags, buttons , images etc

I want to add a feature of muting and unmuting these sounds with a toggle speaker like button.

could anyone help me with the code.

[shaneisme]

What have you tried?

P.S. I don’t like playing sounds on websites unless it’s after someone clicked a “play” button.

[Paulie_D]

Agreed, don’t take control of my viewing experience away from me.

By all means offer am ‘enhanced’ experience if you want but it should never be enabled by default.

Give me the option to turn it on…not the option to turn it off.

[Shikkediel]

No argument there. The basics of setting volume are quite simple :

http://www.w3schools.com/tags/av_prop_volume.asp
http://www.w3schools.com/tags/av_prop_muted.asp

[chauhanheena]

http://codepen.io/chauhanheena/pen/PwjvWr

for some reason the sound doesnt play in codepen , its because of the link but otehrwise onthe website it plays correct.

the mute script works fine.
i need to unmute the mute like a toggle switch.

n its a client requirement to play sound. i too am not alright with the sound thing n chose to give the mute option.

@shikkediel

@Paulie_D

@shaneisme

[Shikkediel]

I’m wondering where the killClick() function came from – I find it an odd approach, it apparently empties click events of all elements (13 in total in the case of this pen), even if there aren’t any to begin with. I’d go for something like this (untested) :

function muteAudio(){
els=document.getElementsByTagName('audio');
for (var j = 0; j < els.length; j++) {
els[j].muted = true;
}
}

The selector would have to be adjusted to whatever is used exactly on the site of course. For toggling mute, you could check the boolean value of the first audio element and flip all values accordingly.

Edit – it’s probably easier to keep track of mute by using another variable as the ‘switch’ (instead of checking the audio elements)…

var silence = true;

function muteAudio() {

var allaudio = document.getElementsByTagName('audio');

if (silence) {
for (var j = 0; j < allaudio.length; j++) {
allaudio[j].muted = false;
}
silence = false;
}
else {
for (var j = 0; j < allaudio.length; j++) {
allaudio[j].muted = true;
}
silence = true;
}
}

[chauhanheena]

function muteAudio(){
els=document.getElementsByTagName('audio');
for (var j = 0; j < els.length; j++) {
els[j].muted = true;
}
}

din’t work. I changed the selector to ‘a’ too.

@skikkediel

[Shikkediel]

You can’t set the volume on a link so that would be natural. Other than that I’m not exactly sure what’s going on. The audio element doesn’t seem to actually be created inside the DOM at least which is why looping through them has no effect. Seems a lot easier to just include it inside the HTML. For sure muting will work then.

Edit – I’ll see if I can put together a workaround, even if my opinion is that creating and loading the audio on every single click isn’t very efficient. I only realise now it’s about the page I’ve seen before by the way. ;-)

[Shikkediel]

This works (apart from the link to the mp3) – basic and effective. :-)

Muted audio

Two lines inside the main function :

if (silence) html5audio.muted = true;
else html5audio.muted = false;

And a small function that toggles the variable when the button is clicked.

var silence = false; // but preferably true

function muteAudio() {
silence = !silence;
}

[Shikkediel]

Found a pretty good solution for this one, @chauhanheena.

[chauhanheena]

I have used the one u suggested and works perrrrfect. Thanks :)

[Author]

Posts