Javascript html5音频-Chrome在播放搜索位置之前加载整个mp3_Javascript_Html_Google Chrome_Audio

Javascript html5音频-Chrome在播放搜索位置之前加载整个mp3

javascript html google-chrome audio

Javascript html5音频-Chrome在播放搜索位置之前加载整个mp3,javascript,html,google-chrome,audio,Javascript,Html,Google Chrome,Audio,由于某些原因，Chrome在当前时间设置播放之前加载了整个mp3文件。我想让Chrome从当前时间位置开始播放，并跳过下载当前时间之前的mp3文件的其余部分 Chrome36以这种方式成功地搜索ogg文件，但不能搜索mp3文件 Firefox30以这种方式成功地搜索ogg文件和mp3文件在下面的Plnkr代码中，有人能解释一下Chrome在查找currentTime时从一开始就下载mp3，但使用ogg正确地跳到查找的位置吗还有，这个问题可以解决吗？我是否可以更改此Plnkr代码以允许从搜索位

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

Chrome36以这种方式成功地搜索ogg文件，但不能搜索mp3文件

Firefox30以这种方式成功地搜索ogg文件和mp3文件

在下面的Plnkr代码中，有人能解释一下Chrome在查找currentTime时从一开始就下载mp3，但使用ogg正确地跳到查找的位置吗

还有，这个问题可以解决吗？我是否可以更改此Plnkr代码以允许从搜索位置下载MP3，而不是每次都从开始下载？多谢各位

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

    }
}

$（窗口）。加载（函数（）{
var i=0；
var PVstartButtons=document.getElementsByClassName（'start-button'，i）；
var-PVaudioSources=[]；
变量PVstartTimes=[]；
var PVendTimes=[]；
var playerWrapper=document.getElementById（'player-wrapper'）；
对于（i=0；i=PVendTimes[i]）{
audio.pause（）；
audio.currentTime=PVstartTimes[i]；
}
}，假）；
}
}

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>




启动MMP-mp3-1:45到1:50


启动MMP-mp3-1:00:00至1:00:05


启动MMP-mp3-30:00至30:05



启动JRE#523-mp3-1:40到1:45


启动JRE#523-mp3-1:00:00至1:00:05


启动JRE#523-mp3-30:00至30:05



TuxRadar Linux播客-ogg-3:20至3:25


TuxRadar Linux播客-ogg-16:40至16:45


TuxRadar Linux播客-ogg-25:00至25:05



Linux语音-ogg-3:20至3:25


Linux语音-ogg-1:00:00至1:00:05


Linux语音-ogg-16:40至16:45

经过大量调查，我确定这只是Chrome中的一个bug（或未实现的功能）。我已经检查了多个服务器配置（nginx、apache、IIS），出于某种原因，它们支持对Ogg执行字节范围请求，但不支持MP3或AAC，即使服务器正确处理范围请求（HTTP 206，

Accept Ranges:bytes

header）

其他人已经在Chrome上通过使用。这不是一个很好的解决方案，但可能是您唯一的选择。

我注意到在一个回答中，您说您正在使用jPlayer-over，至少有十个线程和一个关于此问题的解决方案。关于这一点，也有很多不同的看法

事实证明，jPlayer和Soundcloud等其他网站实际上并没有遵守RFC3003规范，而当Chrome收紧其代码时，这就打破了RFC3003规范。Chrome现在已经回滚了此更改，但在该更改生效之前，您可以立即对第696行附近的jquery.jplayer.js文件进行如下更改：

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

请告诉我这是否解决了问题。

我不完全理解您所描述的问题。它在Chrome36上试用过，它的工作方式和我预期的一样。如果有什么不同的话，MP3的加载、查找和播放速度都比Ogg文件快。另外，不要使用

var source=document.createElement（'source'）设置源代码；setAttribute（'src'，PVaudioSources[i]）您实际上可以执行audio.setAttribute（'src'，PVaudioSources[i]）。如果您想为一首曲目提供多种格式（MP3、AAC和/或Ogg），只需使用
子元素。感谢您签出pseudosavant。你点击了1:00:00开始的mp3按钮了吗？很有趣。这肯定发生在我身上了。延误是非常明显的。让我想想。你有没有机会在Mac或Linux上的Chrome上测试一下？我只有视窗盒子。我很好奇Chrome是否使用系统提供的MP3解码器，因为这是专利权负担，但对于Ogg来说，他们包括自己的解码器。显然，如果是MP3，Chrome只对整个文件发出一个请求，但是如果是Ogg，它会发出多个字节范围的请求。用oggs搜索效果很好，但用MP3就不行了。谢谢你侦查这个@pseudosavant。我在谷歌论坛和wil上发布了一条消息