HTML5 오디오 용 최대 소켓

Question

RSS 피드에서 html5 오디오 요소를 생성하는 PHP 페이지를 작성합니다.

<? foreach($tracks as $track){ ?> 

    <audio controls > 
     <source src="<?= $track['track_url'] ?>" type="audio/mpeg"> 
     <source src="<?= $track['track_url'] ?>" type="audio/ogg"> 
     Your browser does not support the audio element. 
    </audio> 

<? } ?> 

이 경우 약 300 개의 트랙이 있으므로 전체를 한 번에로드하지 않습니다. 위의 코드는 개념을 설명하기위한 것입니다.

처음에는 몇 개의 트랙을로드 한 다음 사용자가 아래로 스크롤 할 때 추가 트랙을로드합니다.

는 현재 페이지에서 확인할 수 있습니다 : http://canneconomy.com/podcast

처음 몇 트랙 부하를하고 문제없이 재생할 수 있습니다. 그러나 10 개 정도의 트랙이로드 된 후 더 이상 HTML5 오디오 요소를 재생할 수 없습니다. 나는 모든 소켓이 점유되어 더 이상 사용할 수 없기 때문에 이것이라고 생각합니다.

내 제안 된 솔루션은 HTML5 오디오 요소가 생성 될 때 자동으로 소켓을 예약하지 않고이 프로세스를 수동으로 관리하지 못하도록하는 것입니다. 소켓은 사용자가 재생 버튼을 클릭 할 때만 사용됩니다. 다른 재생 버튼을 누르면 모든 소켓이 해제되고 하나만 차지합니다.

수동으로 소켓 연결을 관리하는 방법은 무엇입니까? 이것은 PHP/jQuery 응용 프로그램입니다.

Answer 1

사용자가 재생 버튼을 클릭 할 때까지 파일의 초기 다운로드를 방해하는 각 오디오 항목에 preload="none"을 추가하여 원하는 동작을 얻을 수 있습니다. 소스보고에서 또한

하여 사용자가 다음 항목 onplay="stop('trk2',300)"을 담당하고 있지만, 사용자 등 몇

을 건너 뛰는 대신 목록을 아래로 통과 것을 조금 낙관적 때 위의 플레이어를 중지 시도 이 문제는 재생 이벤트를 듣고 모든 플레이어를 반복 한 다음 대상 플레이어가 아닌 경우 일시 중지하여 해결할 수 있습니다. 예를 들어

아주 간단한 변화의 커플 :

<audio controls preload="none" id="trk1" class="ht5player" style="width:100%"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/mpeg"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/ogg"> 
 
    Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls preload="none" id="trk2" class="ht5player" style="width:100%"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/mpeg"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/ogg"> 
 
    Your browser does not support the audio element. 
 
</audio> 
 

 
<audio controls preload="none" id="trk3" class="ht5player" style="width:100%"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/mpeg"> 
 
    <source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/ogg"> 
 
    Your browser does not support the audio element. 
 
</audio> 
 

 
<script type="text/javascript"> 
 
    document.addEventListener('play', function(e){ 
 
     var audio_elms = document.getElementsByTagName('audio'); 
 
     for (var i = 0, length = audio_elms.length; i < length; i++) { 
 
      if (audio_elms[i] != e.target) { 
 
       audio_elms[i].pause(); 
 
      } 
 
     } 
 
    }, true); 
 
</script>

행동에 그것을 볼 수있는 미리보기를 실행 ^^^.