1

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>
AdamRoper
  • 37
  • 1
  • 8
  • Or, use a JS variable to remember the mute state and toggle the audio accordingly, don't rely on some DOM attribute. – Passerby Dec 30 '13 at 10:39

2 Answers2

1

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.

Stasik
  • 2,568
  • 1
  • 25
  • 44
1

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";
        }
        });
});
Community
  • 1
  • 1
Merlin
  • 4,907
  • 2
  • 33
  • 51
  • I have done that, but how does that allow me to switch icons and audio by clicking on the one image? A quick example is here: http://arc.adamroper.com I want to click the speaker icon, which will mute the audio and change the icon. then, clicking again will unmute and change the icon back. – AdamRoper Dec 30 '13 at 10:57
  • I can get it to mute/unmute - but only as two different buttons. I want to change the icon and mute status with a single onClick event. – AdamRoper Dec 30 '13 at 11:22
  • Are you working on the link you provided ? this one : http://arc.adamroper.com/ I don't see no change on the source.. – Merlin Dec 30 '13 at 11:30
  • I am working on my local webserver. I just uploaded the version I am fiddling with. ie; trying to get the two buttons to work as a single toggle. – AdamRoper Dec 30 '13 at 11:37
  • I have just added the onclick event to the image - for now. – AdamRoper Dec 30 '13 at 11:39
  • This code does **HALF** of what I want.. `Sound Off` – AdamRoper Dec 30 '13 at 11:43
  • Your fiddle works perfectly! :) Thank you! :p I have been staring at this for far too long! :) – AdamRoper Dec 30 '13 at 11:55
  • Your page is working I just checked it 30 sec ago :) Please Don't forget to make my answer as Accepted :) Thanks – Merlin Dec 30 '13 at 11:58