出于某种原因，Chrome浏览器会在以currentTime设置播放之前加载整个mp3文件。我想让Chrome从currentTime位置开始播放，并跳过下载当前时间之前的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>
最佳答案
经过大量调查，我确定这只是Chrome中的错误(或未实现的功能)。我已经检查了多种服务器配置(nginx，apache，IIS)，由于某些原因，即使服务器正确处理了范围请求(HTTP 206，Accept-Ranges: bytes header )，它们也支持对Ogg的字节范围请求，但不支持MP3或AAC。
其他人通过使用Flash fallback在Chrome上解决了此问题。这不是一个很好的解决方案，但可能是您唯一的选择。
关于javascript - html5音频-Chrome在播放所需位置之前会加载整个mp3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24899375/