Dove Man Dove Man - 1 year ago 191
CSS Question

How to add mute/unmute button to browser audio player?

So I have my code here, and it works great. Only thing is there are no mute/unmute buttons and I have no idea how to add them.

<audio src="MUSIC URL" autoplay loop>
<p>Your browser does not support the audio element </p>

Answer Source

I use this, get a play and pause button .png and use them. Then make a folder called audio and put the files in there for you music. I put the play and pause in a folder called images.

<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}

<audio controls loop>
<source src="**your website url here**/audio/waves.ogg" type="audio/ogg">
<source src="**your website url here**/audio/waves.mp3" type="audio/mpeg">
<img id="pauseplay" src="**your website url here**/images/play.png" alt="button" title="Play/Pause">
<script type="text/javascript">
	var playing = !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch),
	snd = document.getElementsByTagName('audio')[0],
	ctrl = document.getElementById('pauseplay');
	playing = !playing;
	ctrl.title = playing? 'Pause' : 'Play';
	if(playing){snd.autoplay = false; ctrl.src = '**your website url** here/images/pause.png';}
	ctrl.addEventListener('click', function(){
		} else {;
		playing = !playing;
		ctrl.title = playing? 'Pause' : 'Play';
		ctrl.src = playing? '**your website url here**/images/pause.png' : '**your website url here**/images/play.png';
	}, false);

If you want to see it live look at this site I made.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download