我遇到了一个问题,无法预加载HTML5音频内容并使用缓存中的内容,而不是每次尝试重新下载音频。
音频标签:
问题是,在JavaScript中,每次我点击play(),它都会重新加载音频文件,然后播放它。我似乎无法让它在开始时仅加载一次音频并从存储在内存中的内容进行操作,而不是每次单击按钮时尝试重新加载音频。
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忽略了这些属性,因为无论我将它们设置为什么,行为始终相同。我尝试过尝试源标签和不同的文件格式......没有任何想法?
must-revalidate
或过期时间在过去? - Boldewyn