How do i assign my audiofile to my mute/unmute toggle-button?

Question

This is a more detailed version of my previous unanswered question: https://stackoverflow.com/questions/26076274/html-css-toggle-mute-with-picture-assignment-button

I need some help with some CSS/html5 scripting. You see, I've got this pretty cool button that mutes/unmutes audio, and the button itself toggles between two pictures (one for mute, one for unmute. You know, the basic mute/unmute speaker icons) depending on it's current state. The only problem is that I can't figure out how to make this button work. The button displays perfectly on my page and everything, and when I click on it, the picture changes like its suppose to, but my track is still playing. I already know what the problem is. You see, I don't know how to assign this button to my audio file. The audio itself has lots of attributions (autoplay, looping, display:none etc.), so I don't know quite where in my script to put it. The script for the button was found on a previous StackExhange thread (answer by Jaka Dirnbek): How to create a only mute/unmute button (like youtube) in html and the asker of this question asked only for the button, and not the audio setup, and thats where I'm stuck.

Where do i put my audio src?

In the head? or in the body? and how do i write my audio code? I currently have the following script for my audio:

<audio id="track" src="Poopsyflop.wav" loop="loop" autoplay="autoplay" div style="display:none">

¨

If anyone has any ideas, I would love to hear them :) Thanks in advance!

-Daniel

Answer 1

You assign it using the audio file ID

DEMO http://jsfiddle.net/mattball/sVwXH/

HTML

// audio file
<audio id="background_audio" autoplay="autoplay">
  <source src="http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" />
</audio> 

// button
<a href="#noscroll" id="mute">toggle sound</a>

JS

var audio = document.getElementById('background_audio');

document.getElementById('mute').addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;
    e.preventDefault();
}, false);

This is based on an example that is readily available online through various sources.

Answer 2

Take a look here.

Example:

.unmute{
  background-image: url(http://franriavilla.in/images/unmute.png);
  background-size: cover;
  width:35px;
  height:30px;
  cursor: pointer;
  }

.mute{
  background-image: url(http://franriavilla.in/images/mute.png);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<audio id="track" autoplay="autoplay" loop="loop">
        <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
    </audio> 
    
<div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>