Home › Forums › JavaScript › mute – unmute sounds on website.
- This topic is empty.
-
AuthorPosts
-
January 26, 2015 at 2:38 pm #194280
chauhanheena
ParticipantHi,
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.
January 26, 2015 at 2:59 pm #194281shaneisme
ParticipantWhat have you tried?
P.S. I don’t like playing sounds on websites unless it’s after someone clicked a “play” button.
January 26, 2015 at 3:59 pm #194285Paulie_D
MemberAgreed, 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.
January 26, 2015 at 5:38 pm #194291Shikkediel
ParticipantNo 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.aspJanuary 26, 2015 at 6:41 pm #194295chauhanheena
Participanthttp://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.
January 26, 2015 at 10:44 pm #194304Shikkediel
ParticipantI’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; } }
January 27, 2015 at 12:42 am #194309chauhanheena
Participantfunction 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
January 27, 2015 at 1:18 am #194311Shikkediel
ParticipantYou 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. ;-)
January 27, 2015 at 2:08 am #194313Shikkediel
ParticipantThis works (apart from the link to the mp3) – basic and effective. :-)
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; }
January 27, 2015 at 5:37 pm #194389Shikkediel
ParticipantFound a pretty good solution for this one, @chauhanheena.
January 27, 2015 at 6:42 pm #194392chauhanheena
ParticipantI have used the one u suggested and works perrrrfect. Thanks :)
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.