Question

我在网页中有多个音频文件。我希望所有这些都可以在页面加载后立即播放，但它太沉重而且无用，无法立即完全预加载所有页面。所以我想只预加载一定数量的音频，并在播放时加载其余音频（类似于我们在YouTube上看到的行为）。

如何在HTML5页面上执行此操作（可能使用Javascript）？

Answer 1

你可以尝试一些hacky，比如在onload监听器中播放文件的前10％。

然而，根据经验，我发现浏览器只会预加载音频内容的开头。（如果他们预加载任何：例如iOS，移动Chrome都拒绝预加载。）例如，在Firefox中，您可以检查HTTP请求，并且您会看到它们是parital内容请求覆盖整个文件。

Answer 2

您可以编辑文件，以便拥有剪辑版本。在页面加载时加载那些，然后通过ajax调用加载完整大小的文件。

HTML: 
<div id="myAudioFilesDiv">
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 
</div>


js: 
//(document.ready) code
var refresh = true;
    data = {
        'action': 'manage_reports'
        }; 
    var url = 'includes/ajax_reports.php';
    $.ajax({
        type: 'post', 
        cache: false, 
        url: url, 
        data: data, 
        error:function(result)
        {
            $("#myAudioFilesDiv").html('failed to load full sized music files');
        },
        success:function(result)
        {
//load full sizes music files here
            $("#myAudioFilesDiv").html('<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> ');
            if(refresh) location.reload(); 
        }

    });

另请参阅此文章：http://msdn.microsoft.com/en-us/library/ie/gg589489%28v=vs.85%29.aspx。

如何预加载html5 / JS中的部分音频文件？

2 个答案: