预加载HTML5项目中的音频文件

-1

对于我的HTML5项目，我想预先加载音频文件。我希望它们被预加载和缓存。这样我就可以在需要时播放它们。我用jquery预加载了内容和图像（http://www.gayadesign.com/scripts/queryLoader/），但我无法预载音频文件。预加载HTML5项目中的音频文件

<音频控件= “控制”> <源SRC = “song.ogg” 类型= “音频/ OGG”/> <源SRC = “song1.mp3” 类型= “音频/ MPEG”/ > 您的浏览器不支持音频元素。 < /音频>

请帮我这个。

来源

2012-03-14 Bruno

[被回答过了几次...]（http://stackoverflow.com/questions/2810779/pre-load-audio-files-at-the-client - 侧换后使用） – keltor 2012-03-14 19:40:46

HTML5规范描述了三种可能的值的预压性能：

“无”：提示用户代理，要么笔者并不希望用户所需要的媒体资源，或服务器想要以尽量减少不必要的流量。如果您的场景是播客博客，并且每个帖子都有一个音频文件，则此选项的作用尤其是，因为它减少了初始预载带宽。一旦用户播放该文件（通过默认的视觉控件或JavaScript方法加载（）或播放（）），浏览器将开始获取音频流。
“元数据”：提示给笔者并不指望用户所需要的媒体资源的用户代理，但获取的资源元数据（尺寸，持续时间等）是合理的。如果您正在构建音频播放器控件，并且您需要有关音频剪辑的基本信息，但不需要再播放，则建议使用此选项。
“自动”：提示，用户代理可以把用户的需求放在首位，而不针对服务器的危险，直至并包括乐观下载整个资源的用户代理。如果您正在构建一款游戏，则此方法可能是最好的方法，因为它允许您在实际开始游戏体验之前预加载所有音频剪辑。请注意，当您以编程方式设置音频元素的src属性时，除非另有说明，浏览器会将预加载属性 - 设置为“auto”。因此，如果您的方案需要不同的值，请确保指定它在设置src之前在代码行中。

通过使用F12开发工具（网络选项卡）运行此页面，您可以预览这三个选项对网络的影响。出于调试目的，您可以通过选中“始终从服务器刷新”菜单来模拟新调用并禁用本地缓存。

虽然此属性适用于初始化阶段，但您可能还需要知道浏览器何时实际下载了音频剪辑并准备播放它。您可以通过听“canplaythrough”事件来获取这些信息;一旦用户代理估计如果现在开始播放，则该事件被用户代理调用，媒体资源可以以当前回放速率一直呈现到其结束，而不必停止进一步缓冲。

var audio = document.createElement("audio"); 
audio.src = "audio/sample.mp3"; 
audio.addEventListener("canplaythrough", function() { 
    alert('The file is loaded and ready to play!'); 
}, false);

从msdn

来源

2012-03-14 19:52:07 j08691

预加载HTML5项目中的音频文件

回答

相关问题