Question

出于某种原因，Chrome正在加载整个mp3文件，然后再以currentTime设置播放。我想要的是Chrome从当前时间位置开始播放，并跳过下载当前时间之前的其余mp3文件。

Chrome 36以这种方式成功搜索ogg文件，但没有使用mp3文件。

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

在下面的Plnkr代码中，任何人都可以解释Chrome在寻找currentTime时从头开始下载mp3，但是正确地使用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>

Answer 1

经过大量调查后，我确定这只是Chrome中的一个错误（或未实现的功能）。我检查了多个服务器配置（nginx，apache，IIS），由于某种原因，它们支持对Ogg但不支持MP3 或 AAC的字节范围请求，即使服务器正确处理范围请求（HTTP 206， Accept-Ranges: bytes标题）。

其他人使用Flash fallback在Chrome上解决了这个问题。不是一个很好的解决方案，但可能是你唯一的选择。

Answer 2

我在一个答案中注意到你说你正在使用jPlayer - 在jPlayer group处有至少十个线程和一个jplayer bug ticket关于此问题。关于此，还有一个Chrome bug tracker ticket。

事实证明，jPlayer和Soundcloud等其他网站实际上并没有遵守RFC 3003规范，当Chrome收紧代码时，这就打破了它。 Chrome现已回滚此更改，但在此过滤之前，您可以对第696行周围的jquery.jplayer.js文件进行以下立即更改，以便它看起来像这样：

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

如果有问题，请告诉我。

html5 audio - Chrome在播放搜索位置之前正在加载整个mp3

2 个答案: