javascript - Audio Glitch in jQuery -

i've developed audio player plays radio station's stream. host audio on streamon , when click play button in player in lower right of streaming widget audio, after buffering, plays via inserting iframe styled invisible. however, people on staff have complained if click on play button multiple times whilst it's loading, play multiple streams (as can seen here: glitched page). so, on test page attempted below code prevent such scenarios occuring. however, audio isn't being loaded on requested (as can seen here: test page). appreciated.

<script>                 $playing = 0;                  $(document).on("click", "button#mute", function(){                     $('iframe#audiostreamon').remove();                     $playing = 0;                 });                  if ($playing =0) {                     $(document).on("click", "button#play", function(){                         $(this).after('<iframe id="audiostreamon" class="hidden" src="http://wpov.streamon.fm"></iframe>');                         $playing = 1;                     });                 }                  else {                     $(document).on("click", "button#play", function(){                     });                 }         </script> 

i think should change code bit. on glitched page have this:

$(document).on("click", "button#mute", function () {     $('iframe#audiostreamon').remove(); }); $(document).on("click", "button#play", function () {     $(this).after('<iframe id="audiostreamon" class="hidden" src="http://wpov.streamon.fm"></iframe>'); }); 

use instead:

var playing = 0; $(document).on("click", "button#mute", function () {     $('iframe#audiostreamon').remove();     playing = 0; }); $(document).on("click", "button#play", function () {     if (playing == 0) {         $(this).after('<iframe id="audiostreamon" class="hidden" src="http://wpov.streamon.fm"></iframe>');         playing = 1;     } else {         return false;     } }); 

what changed:

• you had if ($playing =0) { not check value assign it, need == compare them. removed $, $ in javascript practise not have in variables, , here it's used jquery.
• i changed click event listeners wrap if statement. had other way around. this, when play button clicked check if statement. if statement being checked on page load , no function calling again.
• in else have return false; now, means if playing == 1, don't (ignore click).