fullPage.js

HTML

<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div id="fullpage">
    <div class="section">Scroll with mouse
        <audio data-autoplay src="http://albums.cblls.com/media/covers/mogwai.mp3"></audio>
    </div>
    <div class="section">Two
         <audio data-autoplay src="http://albums.cblls.com/media/covers/thiswilldestroyyou.mp3"></audio>
    </div>
</div>
<div id="mute">Mute</div>
<div id="unmute">Unmute</div>

CSS

.section {
    text-align:center;
}

#mute, #unmute {
  padding: 10px;
  background: black;
  color: white;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
}
#unmute {display: none;}

JavaScript

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});

$('#mute').on('click', function() {
   $('#mute').css("display", "none");
   $('#unmute').css("display", "inline");
   $('body audio, body video').each(function() {
     $(this).animate({volume: 0}, 1000, function () {
          muted = true;
      });
   });
 });
 
 $('#unmute').on('click', function() {
     $('#mute').css("display", "inline");
     $('#unmute').css("display", "none");
     $('body audio, body video').each(function() {
       $(this).prop('muted', false);
       $(this).animate({volume: 1}, 1000, function () {
          muted = false;
      });
     });
   });