title: Max sockets for HTML5 audio
body: <p>I am building a php page that generates html5 audio elements from an rss feed. </p>
  
  <pre><code>&lt;? foreach($tracks as $track){ ?&gt;
  
      &lt;audio controls &gt;
          &lt;source src="&lt;?= $track['track_url'] ?&gt;" type="audio/mpeg"&gt;  
          &lt;source src="&lt;?= $track['track_url'] ?&gt;" type="audio/ogg"&gt;
          Your browser does not support the audio element.
      &lt;/audio&gt;
  
  &lt;? } ?&gt;
  </code></pre>
  
  <p>There are about 300 tracks in this case so I do not load them all at once (the above code is to illustrate the concept). </p>
  
  <p>I load a few tracks initially, then load additional tracks as the user scrolls down. </p>
  
  <p>You can check out the page here: <a href="http://canneconomy.com/podcast" rel="nofollow noreferrer">http://canneconomy.com/podcast</a></p>
  
  <p>The first few tracks load and play without issues. However, after 10 or so tracks are loaded, the user is no longer able to play the HTML5 audio elements. I believe this is because all of the sockets are occupied and no more can be used.</p>
  
  <p>My proposed solution is to prevent the HTML5 audio elements from automatically reserving sockets as they are generated and manage this process manually. A socket would only be used when a user clicks the play button. Hitting another play button would free all sockets and occupy only one. </p>
  
  <p>How would one go about managing socket connections manually? This is a PHP/jQuery app.</p>