javascript 在 Mobile Safari 中预加载 HTML5 音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5758719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preloading HTML5 Audio in Mobile Safari
提问by TJ Kirchner
I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it.
我在预加载 HTML5 音频内容然后使用缓存中的内容时遇到问题，而不是每次尝试重播时都尝试重新下载音频。
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/
The experience is suppose to be that when someone clicks on the banner, it pops up an ad with a loading bar. THe loading bar is loading all the images necessary for the animation. In the meantime, the audio is also getting loaded via audio tags already on in the DOM (which is fine). After all the images are loaded, the loading bar disappears and the user can continue on. There are 4 buttons on the bottom of the screen that they can click. Clicking one of them plays the audio file and images do a flipbook-style animation thats synced to the audio.
体验假设是当有人点击横幅时，它会弹出一个带有加载栏的广告。加载栏正在加载动画所需的所有图像。同时，音频也通过 DOM 中已有的音频标签加载（这很好）。加载完所有图像后，加载栏消失，用户可以继续。屏幕底部有 4 个可以单击的按钮。单击其中一个播放音频文件，图像执行与音频同步的翻书式动画。
Audio Tags:
音频标签：
<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>
Play Button Event Listeners:
播放按钮事件监听器：
button.addEventListener('click',function(){
if ( f.playing ) return false;
f.playing = true;
button.audio.play();
},false);
button.audio.addEventListener('playing', function(){
animate();
}, false);
The problem is, in javascript, everytime I click play(), it reloads the audio file and then plays it. I can't seem to get it to load the audio once in the beginning and go off of whats stored in memory rather than try to reload the audio every single time I click the button.
问题是，在 javascript 中，每次我单击 play() 时，它都会重新加载音频文件然后播放它。我似乎无法让它在开始时加载一次音频并关闭存储在内存中的内容，而不是每次单击按钮时都尝试重新加载音频。
I've tried experimenting with the preload and autobuffer properties, but it seems that mobile safari ignores those properties, because no matter what I set them too, the behavior is always the same. I've tried experimenting with source tags and different file formats... nothing.
我尝试过使用 preload 和 autobuffer 属性进行试验，但似乎 mobile safari 忽略了这些属性，因为无论我如何设置它们，行为总是相同的。我试过尝试使用源标签和不同的文件格式……什么都没有。
Any ideas?
有任何想法吗？
采纳答案by TJ Kirchner
Alright, so the solution was a bit of a hack, cheat, workaround, whatever you want to call it.
好吧，所以这个解决方案有点像黑客、欺骗、变通方法，不管你想怎么称呼它。
What I noticed is that if I hit the play button on an audio file that I just played, it doesn't reload itself. It could be because I paused the audio after it finished playing through, but I'm not 100% sure on that. In any case, what I did is I combined all 4 audio files into one large audio file (yay Audacity~!). Then, every time I hit one of the play buttons I would set the currentTime property of the audio object to whatever the starting point of that track and then play the track until it hit its ending point, and then pause it again. Mission accomplished! Loaded once in the beginning and never again for each play.
我注意到的是，如果我在刚刚播放的音频文件上点击播放按钮，它不会自行重新加载。可能是因为我在播放完后暂停了音频，但我并不确定 100%。无论如何，我所做的是将所有 4 个音频文件合并为一个大音频文件（是的，Audacity~！）。然后，每次我点击播放按钮之一时，我都会将音频对象的 currentTime 属性设置为该曲目的任何起点，然后播放曲目直到到达终点，然后再次暂停。任务完成！开始时加载一次，每次播放时不再加载。
Not crazy about the idea that I had to combine all the different audio tracks, but hey it works.
对我必须结合所有不同音轨的想法并不感到疯狂，但嘿它有效。
Oh, also. To get the audio track to load and fire a "canplaythrough" event, I attached this function to a user click event:
哦，还有。为了让音轨加载并触发“canplaythrough”事件，我将此函数附加到用户点击事件：
var track;
function addHTMLAudio() {
track = document.createElement('audio');
track.id = 'mm_audio'
track.autoplay = false;
track.preload = false;
track.addEventListener('canplaythrough',function(){
track.removeEventListener('canplaythrough');
audioLoaded = true;
},false);
document.getElementById('body').appendChild(track);
track.src = f.trackURL;
track.play();
setTimeout(function(){ track.pause(); },1);
}
playButton.addEventListener('click',function(e){
if ( playStatus > 0 ) return;
playStatus = 1;
var myId = e.target.parentNode.id;
var myClip = findClip( myId );
myClip.state = 'active';
track.currentTime = myClip.tIndex.start;
track.play();
runAnimation(myClip);
},false);
