music toggle in jquery

[turpentyne]

I've got a simple toggle function for music that is playing when a page loads. The user can press the "music off" button, and it clears out the div. If they press "music on" to bring the music back, i get the "your browser doesn't support audio" message. Which is odd... considering it was just playing???

Here's the html:

<div id="music">

<audio autoplay loop> 
   <source src="http://site.com/music/0132.ogg" type="audio/ogg" />
   <source src="http://site.com/music/0132.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

</div>
<a href="#" id="music_control" class="">MUSIC OFF</a>

and here's the javascript:

$(document).ready(function() {

    var playing = true;

    $("#music_control").click(function(){

        if (playing == false) {
        playing = true;

          $('#music').html("  <source src='http://site.com/music/0132.ogg' type='audio/ogg' /><source src='http://site.com/music/0132.mp3' type='audio/mpeg' />Your browser does not support the audio element. ");
          $("#music_control").text("MUSIC OFF"); 

        } else if (playing == true) {
          playing = false;

          $('#music').html("<!-- music -->");
          $("#music_control").text("MUSIC ON"); 

        } 
      }); 
});

[pritaeas]

You remove the audio tag, but do not put it back (or so it appears).