CODEWITHSUNDEEP
javascripthtmlhtml5-audio
AdamRoper
AdamRoper

Reputation: 37

Need to mute audio and change image with JS

I am trying to create a toggle switch for the audio that replaces the icon dependent on the state. Here is my code (that is not working):

<div id="bgAudioControls">

<a href="#" onclick="muteSound()">
<img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
</a>

<audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

</div>


<script language="javascript">
    function muteSound() {

    if (document.getElementById("mute").src == "img/sound-off.svg")
    {
        document.getElementById("unmute").src = "img/sound-on.svg";
        document.getElementById('bgAudio').muted = true;
    }
    else
    {
        document.getElementById("mute").src = "img/sound-off.svg";
        document.getElementById('bgAudio').muted = false;
    }
    }
    </script>

I am positive I am overlooking something SUPER simple.. Any help appreciated.

A live view of the whole code in action can be seen at http://arc.adamroper.com

The below code works - albeit as two buttons, not a toggle.

<a href="#" onclick="document.getElementById('bgAudio').muted = true;">Mute</a>

<a href="#" onclick="document.getElementById('bgAudio').muted = false;">Unmute</a>

Upvotes: 1

Views: 3317

Answers (2)

Merlin
Merlin

Reputation: 4917

UPDATE : working FIDDLE

What says @Stasik is :

You have to remove id="mute" from the <a> tag and put it in the <img> tag

Like this:

<a href="#"  onclick="muteSound()"><img id="mute" src="img/sound-off.svg" /></a>

UPDATE

to play/pause try this found here

COMPLETE CODE

HTML

<div id="bgAudioControls">
    <a href="#" >
        <img id="mute" src="img/sound-off.svg" width="64" height="64" alt="Sound Off" />
    </a>

    <audio id="bgAudio" autoplay loop preload src="ogg/epic-lead.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</div>

JAVASCRIPT

$(function() {
    $("#mute").click(function(e) {
        e.preventDefault();

        var song = $('audio')[0]
        if (song.paused){
            song.play();
            document.getElementById("mute").src = "img/sound-on.svg";
        }else{
            song.pause();
            document.getElementById("mute").src = "img/sound-off.svg";
        }
        });
});

Upvotes: 1

Stasik
Stasik

Reputation: 2614

Accessing ".src" of the mute element is not correct, since src is the attribute of the child of the mute element. Assign id="mute" to the element directly for a quick fix.

Upvotes: 1

Related Questions