jQuery의 오디오 글리치

Question

나는 라디오 방송국의 스트림을 재생하는 오디오 플레이어를 완전히 개발했습니다. 현재 StreamOn에서 오디오를 호스팅하고 스트리밍 위젯의 오른쪽 하단에있는 플레이어에서 재생 버튼을 클릭하면 버퍼링 후 오디오가 보이지 않는 스타일의 iframe을 삽입하여 재생됩니다. 그러나 직원들이 재생 버튼을 여러 번 클릭하면로드되는 것을 여러 번 재생합니다 (여기서는 Glitched Page). 따라서 테스트 페이지에서 이러한 시나리오가 발생하지 않도록 아래 코드를 시도했습니다. 그러나 오디오는 현재 요청시로드되지 않습니다 (여기에서 볼 수 있듯이 : Test Page). 도움말 크게 감사하겠습니다.

<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> 

Answer 1

코드를 약간 변경해야한다고 생각합니다. ,

• 당신이 그것을 할당합니다 값을 확인하지 않습니다 if ($playing =0) {했다 :

  $(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>'); 
  }); 
  

  사용이 대신 :

  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; 
      } 
  }); 
  

  내가 변경 무엇 당신의 Glitched 페이지에서이 있습니다 그들을 비교하려면 ==가 필요합니다. 또한 $을 제거했습니다. 자바 스크립트의 $는 변수에없는 것이 좋으며, 여기서는 jQuery도 사용합니다.

• if 문을 감싸기 위해 클릭 이벤트 리스너를 변경했습니다. 너는 다른 길을 가졌어. 이와 같이 재생 버튼을 클릭하면 if 문을 확인합니다. if 문이 페이지로드시 검사되고 있었고 함수가 다시 호출하지 않았습니다.
• 내 else 지금은 return false;입니다. 즉, playing == 1 일 경우 아무 것도하지 않습니다 (클릭 무시).