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

我尝试过预加载和自动缓冲属性，但似乎移动safari忽略了这些属性，因为无论我设置它们，行为总是相同的。我尝试过使用源标签和不同的文件格式......没什么。

有什么想法吗？

Answer 1

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

我注意到，如果我点击我刚播放的音频文件上的播放按钮，它就不会重新加载。这可能是因为我在完成播放后暂停了音频，但我并不是百分之百确定。无论如何，我所做的是将所有4个音频文件合并为一个大型音频文件（yay 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);

在Mobile Safari中预加载HTML5音频

1 个答案: