HTML5 音频的最大套接字数答案

【问题标题】：Max sockets for HTML5 audioHTML5 音频的最大套接字数
【发布时间】：2018-06-05 15:04:20
【问题描述】：

我正在构建一个从 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 应用程序。

【问题讨论】：

标签： javascript php jquery html sockets

【解决方案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>

^^^ 运行 sn-p 以查看它的实际效果。

【讨论】：