<style>
 button#playbtn{
  background: url('./png/play.png') no-repeat;
  width: 30px;
  height: 30px;
  border: 0px;
 }

 button#mutebtn{
  background: url('./png/speaker.png') no-repeat;
  width: 30px;
  height: 30px;
  border: 0px;
 }
 </style>

 <script>
 function Audio_play() {
  var myAudio = document.getElementById("myAudio");

  if (myAudio.paused) {
  myAudio.play();
  playbtn.style.background = "url('./png/pause.png') no-repeat";
  } else {
  myAudio.pause();
  playbtn.style.background = "url('./png/play.png') no-repeat";
  }
 }

 function Audio_mute() {
  var myAudio = document.getElementById("myAudio");

  if(myAudio.muted){
  myAudio.muted = false;
  mutebtn.style.background = "url('./png/speaker.png') no-repeat";
  } else {
  myAudio.muted = true;
  mutebtn.style.background = "url('./png/speaker_muted.png') no-repeat";
  }
 }
 </script>

 <!--
//src, controls, loop, autoplay, muted, preload(auto, metadata, none)
 //mp3: audio/mpeg
 //ogg: audio/ogg
 //wav: audio/wav
 -->
 <audio id="myAudio" controls="controls">
  <source src="m.mp3" type="audio/mpeg">
 </audio>

 <br>

 <button id="playbtn" onclick="Audio_play()"></button>
 <button id="mutebtn" onclick="Audio_mute()"></button>

•