Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript mute – unmute sounds on website.

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #194280
    chauhanheena
    Participant

    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.

    #194281
    shaneisme
    Participant

    What have you tried?

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

    #194285
    Paulie_D
    Moderator

    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.

    #194291
    Shikkediel
    Participant

    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

    #194295
    chauhanheena
    Participant

    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

    #194304
    Shikkediel
    Participant

    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;
    }
    }
    
    #194309
    chauhanheena
    Participant
    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

    #194311
    Shikkediel
    Participant

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

    #194313
    Shikkediel
    Participant

    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;
    }
    
    #194389
    Shikkediel
    Participant

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

    #194392
    chauhanheena
    Participant

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.