html5音频- Chrome正在加载整个mp3播放之前寻找的位置

html5 audio - Chrome is loading entire mp3 before playing a seeked position

本文关键字：播放 mp3 寻找 位置 音频 Chrome 加载 html5      更新时间：2023-09-26

由于某些原因，Chrome在播放currentTime设置之前加载了整个mp3文件。我想要的是Chrome从currentTime位置开始播放，并跳过下载currentTime之前的mp3文件的其余部分。

Chrome 36在ogg文件中成功查找，但在mp3文件中不成功。

Firefox 30以这种方式成功搜索ogg文件和mp3文件。

在Plnkr代码下面，谁能解释Chrome下载mp3从一开始就寻求currentTime，但适当地跳过与ogg寻求的位置?

还有，这个可以修复吗?我可以改变这个Plnkr代码，使下载mp3从寻找的位置，而不是从开始下载每次?谢谢你

http://plnkr.co/edit/VQUgEUp7vnhyJbHRdNGP?p = info

script.py 

$(window).load(function () {
    var i = 0;
    var PVstartButtons = document.getElementsByClassName('start-button', i);
    var PVaudioSources = [];
    var PVstartTimes = [];
    var PVendTimes = [];
    var playerWrapper = document.getElementById('player-wrapper');
    for (i = 0; i < PVstartButtons.length; ++i) {
        PVstartButtons[i].addEventListener("click", PVplayMedia(i));
        PVaudioSources[i] = PVstartButtons[i].getAttribute('audioSource');
        PVstartTimes[i] = PVstartButtons[i].getAttribute('timeBegins');
        PVendTimes[i] = PVstartButtons[i].getAttribute('timeEnds');
    }
    window.playerWrapper = playerWrapper;
    window.PVstartButtons = PVstartButtons;
    window.PVaudioSources = PVaudioSources;
    window.PVstartTimes = PVstartTimes;
    window.PVendTimes = PVendTimes;
});
function PVplayMedia(i) {
    return function () {
        if (playerWrapper.hasAttribute("haschild") === true) {
            var child = playerWrapper.children[0];
            $(child).remove();
        } else {
            playerWrapper.setAttribute("haschild", "true");
        }
        var audio = document.createElement('audio');
        audio.setAttribute('controls', '');
        audio.setAttribute('preload', 'metadata');
        playerWrapper.appendChild(audio);
        var source = document.createElement('source');
        source.setAttribute('src', PVaudioSources[i]);
        audio.appendChild(source);
        audio.load();
        audio.onloadedmetadata = function() { 
            audio.currentTime = PVstartTimes[i];
            audio.play();
        };
        audio.addEventListener('timeupdate', function() {
            if (PVendTimes[i] && audio.currentTime >= PVendTimes[i]) {
                audio.pause();
                audio.currentTime = PVstartTimes[i];
            }
        },false);
    }
}

index . html 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="player-wrapper">
    </div>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://media.blubrry.com/burr/traffic.libsyn.com/billburr/MMPC_7-21-14.mp3"
            timeBegins="105"
            timeEnds="110">
        Start MMP - mp3 - 1:45 to 1:50
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://media.blubrry.com/burr/traffic.libsyn.com/billburr/MMPC_7-21-14.mp3"
            timeBegins="3600"
            timeEnds="3605">
        Start MMP - mp3 - 1:00:00 to 1:00:05
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://media.blubrry.com/burr/traffic.libsyn.com/billburr/MMPC_7-21-14.mp3"
            timeBegins="1800"
            timeEnds="1805">
        Start MMP - mp3 - 30:00 to 30:05
    </button>
    <br><br>
    <button class="btn btn-primary start-button"
            audioSource="http://traffic.libsyn.com/joeroganexp/p523.mp3"
            timeBegins="100"
            timeEnds="105">
        Start JRE #523 - mp3 - 1:40 to 1:45
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://traffic.libsyn.com/joeroganexp/p523.mp3"
            timeBegins="3600"
            timeEnds="3605">
        Start JRE #523 - mp3 - 1:00:00 to 1:00:05
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://traffic.libsyn.com/joeroganexp/p523.mp3"
            timeBegins="1800"
            timeEnds="1805">
        Start JRE #523 - mp3 - 30:00 to 30:05
    </button>
    <br><br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.tuxradar.com/files/podcast/tuxradar_s06e02.ogg"
            timeBegins="200"
            timeEnds="205">
        TuxRadar Linux Podcast - ogg - 3:20 to 3:25
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.tuxradar.com/files/podcast/tuxradar_s06e02.ogg"
            timeBegins="1000"
            timeEnds="1005">
        TuxRadar Linux Podcast - ogg - 16:40 to 16:45
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.tuxradar.com/files/podcast/tuxradar_s06e02.ogg"
            timeBegins="1500"
            timeEnds="1505">
        TuxRadar Linux Podcast - ogg - 25:00 to 25:05
    </button>
    <br><br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.linuxvoice.com/episodes/lv_s02e13.ogg"
            timeBegins="200"
            timeEnds="205">
        Linux Voice - ogg - 3:20 to 3:25
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.linuxvoice.com/episodes/lv_s02e13.ogg"
            timeBegins="3600"
            timeEnds="3605">
        Linux Voice - ogg - 1:00:00 to 1:00:05
    </button>
    <br>
    <button class="btn btn-primary start-button"
            audioSource="http://www.linuxvoice.com/episodes/lv_s02e13.ogg"
            timeBegins="1000"
            timeEnds="1005">
        Linux Voice - ogg - 16:40 to 16:45
    </button>

  </body>
</html>

经过大量调查，我确定这只是Chrome中的一个bug(或未实现的功能)。我已经检查了多个服务器配置(nginx, apache, IIS)，出于某种原因，他们支持做字节范围请求Ogg，但不是MP3 或 AAC，即使服务器正确处理范围请求(HTTP 206, Accept-Ranges: bytes头)。

其他人已经通过使用Flash回退解决了这个问题。不是一个很好的解决方案，但可能是你唯一的选择。

我注意到你在一个答案中说你正在使用jPlayer -在jPlayer组中至少有十个线程和一个关于这个问题的jPlayer错误票。还有一个关于这个的Chrome bug tracker ticket。

事实证明，jPlayer和Soundcloud等其他网站实际上并没有坚持RFC 3003规范，当Chrome收紧他们的代码时，这就破坏了它。Chrome现在已经回滚了这个更改，但是在过滤通过之前，您可以立即对jquery.jplayer.js文件的696行进行以下更改，使其看起来像这样:

mp3: {
    codec: new Audio().canPlayType('audio/mpeg; codecs="mp3"') ? 'audio/mpeg; codecs="mp3"' : 'audio/mpeg',
    flashCanPlay: true,
    media: 'audio'
},

请让我知道这是否解决了问题。

相关文章：