在Mobile Safari中预加载HTML5音频 [英] Preloading HTML5 Audio in Mobile Safari

问题描述

我在预加载HTML5音频内容时遇到问题，然后使用缓存中的内容，而不是每次尝试重播时都尝试重新下载音频。

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.

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/

体验是，当有人点击横幅广告时，会弹出带有加载栏的广告。加载栏正在加载动画所需的所有图像。与此同时，音频也通过DOM中已有的音频标签加载（很好）。加载完所有图像后，加载栏消失，用户可以继续。屏幕底部有4个按钮，可以单击。单击其中一个播放音频文件，图像执行与音频同步的翻书式动画。

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.

音频标签：

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

播放按钮事件监听器：

button.addEventListener('click',function(){
    if ( f.playing ) return false;
    f.playing = true;
    button.audio.play();
},false);

button.audio.addEventListener('playing', function(){
    animate();
}, false);

问题是，在javascript中，每次点击play（），它都会重新加载音频文件然后玩它。我似乎无法在开始时加载音频一次并关闭存储在内存中的内容，而不是每次单击按钮时都尝试重新加载音频。

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.

我尝试过preload和autobuffer属性，但似乎移动safari忽略了那些属性，因为无论我设置它们，行为总是相同的。我尝试过使用源标签和不同的文件格式......没有。

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.

任何想法？

推荐答案

好吧，所以解决方案有点像黑客，作弊，解决方法，无论你想叫什么。

Alright, so the solution was a bit of a hack, cheat, workaround, whatever you want to call it.

我注意到的是，如果我点击我刚播放的音频文件上的播放按钮，它就不会重新加载。这可能是因为我在完成播放后暂停了音频，但我并不是100％肯定。无论如何，我所做的是将所有4个音频文件合并为一个大型音频文件（yay Audacity~！）。然后，每次我按下其中一个播放按钮时，我会将音频对象的currentTime属性设置为该轨道的起点，然后播放该轨道直到它到达终点，然后再次暂停。任务完成！在开始时加载一次，并且每次播放都不会再次加载。

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.

对于我必须组合所有不同音频轨道的想法并不疯狂，但是它可以工作。

Not crazy about the idea that I had to combine all the different audio tracks, but hey it works.

哦，也。为了让音轨加载并触发canplaythrough事件，我将此函数附加到用户点击事件：

Oh, also. To get the audio track to load and fire a "canplaythrough" event, I attached this function to a user click event:

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

这篇关于在Mobile Safari中预加载HTML5音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！