Max Buchsen für HTML5 Audio

Question

Ich baue eine PHP-Seite, die html5 Audio-Elemente aus einem RSS-Feed generiert.

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

<? } ?> 

Es gibt etwa 300 Spuren in diesem Fall, so dass ich sie nicht alle auf einmal geladen werden (der obigen Code ist das Konzept zu erläutern).

Ich lade zuerst ein paar Tracks und lade dann weitere Tracks, wenn der Benutzer runterscrollt.

Hier können Sie die Seite an: http://canneconomy.com/podcast

Die ersten Lastspuren und ohne Probleme spielen. Nachdem jedoch 10 Tracks geladen wurden, kann der Benutzer die HTML5-Audioelemente nicht mehr wiedergeben. Ich glaube, das liegt daran, dass alle Steckdosen belegt sind und nicht mehr verwendet werden können.

Meine vorgeschlagene Lösung besteht darin, zu verhindern, dass die HTML5-Audioelemente automatisch Sockets reservieren, wenn sie generiert werden, und diesen Prozess manuell verwalten. Ein Socket wird nur verwendet, wenn ein Benutzer auf die Wiedergabeschaltfläche klickt. Durch das Drücken einer anderen Wiedergabetaste würden alle Steckplätze freigegeben und nur eine belegt.

Wie würde man manuell mit Socket-Verbindungen umgehen? Dies ist eine PHP/jQuery App.

Answer 1

Sie können Ihr gewünschtes Verhalten erreichen, indem Sie jedem Audiomaterial preload="none" hinzufügen, wodurch der erste Download der Datei verhindert wird, bis ein Benutzer auf die Schaltfläche Abspielen klickt.

von Auch zu Ihrer Quelle suchen, um Ihren Versuch, den Spieler über zu stoppen, wenn der Benutzer spielt das nächste Element onplay="stop('trk2',300)", aber das ist ein wenig optimistisch, dass der Benutzer die Liste durchlaufen wird nach unten anstatt ein paar Überspringen usw.

Sie können dieses Problem beheben, indem Sie auf ein Spielereignis warten und dann über alle Spieler iterieren und sie dann anhalten, wenn es sich nicht um den Zielspieler handelt.

Ein paar sehr einfache Änderungen, zum Beispiel:

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

^^^ das Snippet führen Sie es in Aktion zu sehen.