在Mobile Safari中预加载HTML5音频

Question

我在预加载HTML5音频内容的问题,然后使用我有什么在缓存中,而不是试图每次我试着重播时间重新下载音频.

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

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

音频标签:

<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(),它都会重新加载音频文件,然后播放它.我似乎无法让它在开始时加载一次音频并关闭存储在内存中的内容,而不是每次单击按钮时尝试重新加载音频.

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

有任何想法吗？

Answer 1

好吧，所以这个解决方案有点像黑客、作弊、变通办法，无论你怎么称呼它。

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

我对必须结合所有不同音轨的想法并不疯狂，但是嘿，它有效。

哦，还有。为了让音轨加载并触发“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);