title: HTML5 Audio Tag Stop Button, Stop a Live MP3 Stream?
body: <p>I would like to add a stop button. At the moment only a play and pause button, but the stop is not really the browser bufferd the music, but does not jump to the beginning. With MP3 files is perhaps OK, but not in a live stream. Can someone help me? Thank you.</p>
  
  <pre><code>var pause = new Image();
  pause.src = "pause.png";
  
  var play_control = 0;
  function playmusic() {
      if (play_control == 0) {
          document.getElementById('musikplayer').play();
          document.getElementById('playbutt').src = 'pause.png';
          play_control = 1;
          window.setTimeout("playcontrol()", 0); 
          window.setTimeout("zeitanzeige()", 0);
      } else {
          document.getElementById('musikplayer').pause();
          document.getElementById('playbutt').src = 'play.png';
          play_control = 0;
      }
  }
  function playcontrol() {
      if(play_control == 1) {
          if(
              document.getElementById('musikplayer').currentTime 
              == document.getElementById('musikplayer').duration
          ) {
              document.getElementById('playbutt').src = 'play.png';
              play_control = 0;
          } else {
              window.setTimeout("playcontrol()",0); 
          }
      }
  }
  function zeitanzeige() {
      if(play_control == 1) {
          var full = document.getElementById('musikplayer').duration;
          var full_min = Math.floor(full / 60);
          var full_sec = Math.floor(full - (full_min * 60));
  
          if(full_min &lt; 10) {
              full_min = '0' + full_min;
          }
          if(full_sec &lt; 10) {
              full_sec = '0' + full_sec;
          }
  
          var curr = document.getElementById('musikplayer').currentTime;
          var curr_min = Math.floor(curr / 60);
          var curr_sec = Math.floor(curr - (curr_min * 60));
  
          if(curr_min &lt; 10) {
              curr_min = '0' + curr_min;
          }
          if(curr_sec &lt; 10) {
              curr_sec = '0' + curr_sec;
          }
  
          document.getElementById('time').innerHTML = "" + curr_min + ":" 
                                                         + curr_sec + "";
  
          window.setTimeout("zeitanzeige()",0);
      } else {
          document.getElementById('time').innerHTML = "00:00";
      }
  }
  function vol(z) {
      switch(z) {
          case "1":
              document.getElementById('musikplayer').volume = 0.2;
              document.getElementById('vol1').style.background = '#c9c3c3';
              document.getElementById('vol2').style.background = '#8d8585';
              document.getElementById('vol3').style.background = '#8d8585';
              document.getElementById('vol4').style.background = '#8d8585';
              document.getElementById('vol5').style.background = '#8d8585';
              break;
          case "2":
              document.getElementById('musikplayer').volume = 0.4;    
              document.getElementById('vol1').style.background = '#c9c3c3';
              document.getElementById('vol2').style.background = '#c9c3c3';
              document.getElementById('vol3').style.background = '#8d8585';
              document.getElementById('vol4').style.background = '#8d8585';
              document.getElementById('vol5').style.background = '#8d8585';
              break;
          case "3":
              document.getElementById('musikplayer').volume = 0.6;
              document.getElementById('vol1').style.background = '#c9c3c3';
              document.getElementById('vol2').style.background = '#c9c3c3';
              document.getElementById('vol3').style.background = '#c9c3c3';
              document.getElementById('vol4').style.background = '#8d8585';
              document.getElementById('vol5').style.background = '#8d8585';
              break;
          case "4":
              document.getElementById('musikplayer').volume = 0.8;    
              document.getElementById('vol1').style.background = '#c9c3c3';
              document.getElementById('vol2').style.background = '#c9c3c3';
              document.getElementById('vol3').style.background = '#c9c3c3';
              document.getElementById('vol4').style.background = '#c9c3c3';
              document.getElementById('vol5').style.background = '#8d8585';
              break;
          case "5":
              document.getElementById('musikplayer').volume = 1.0;    
              document.getElementById('vol1').style.background = '#c9c3c3';
              document.getElementById('vol2').style.background = '#c9c3c3';
              document.getElementById('vol3').style.background = '#c9c3c3';
              document.getElementById('vol4').style.background = '#c9c3c3';
              document.getElementById('vol5').style.background = '#c9c3c3';
              break;
      }
  }
  </code></pre>