先要准备应付各种浏览器的声音文件，什么.mp3,.ogg,.wav等格式。还是看例子吧
<body>
<div id="progressText"></div>
</body>
<script>
//音频播放
var loadAudioLen=0;//已加载的声音数
var AudioList={};//缓存已加载的声音
var audiolen=2;//要加载的声音总数
function audioOnload(Audio){
loadAudioLen++;
AudioList[Audio.playname] = Audio;
document.getElementById('progressText').innerHTML = '正在加载音乐...(' + Audio.playname;
if(loadAudioLen==audiolen){//所有声音加载完成后执行init()
init();
}
}
function init(){
document.getElementById('progressText').innerHTML = '正在播放音乐...' + AudioList["bg"].playname;
AudioList["bg"].play();//要播放声音，只要这样做就行了。
}
//支持声音的类型
(function(){
var types= {
'mp3' : 'audio/mpeg',
'ogg' : 'audio/ogg',
'wav' : 'audio/wav',
'aac' : 'audio/aac',
'm4a' : 'audio/x-m4a'
}
//获取文件的扩展名
function getExt(filename) {
return filename.split('.').pop();
}
var audioList = { //要加载的清单
bg: ["audio/bg.ogg","audio/bg.wav","audio/bg.mp3"],
click: ["audio/click.ogg","audio/click.wav","audio/click.mp3"]
};
//循环上面的清单
for(name in audioList){
var Audio = document.createElement('audio');//创建audio元素
var source = document.createElement('source');//创建source元素
var srcArray = audioList[name];//取到要加载的各种声音文件数组
for(var i=0;i<srcArray.length;i++){
source.src=srcArray[i];
source.type = types[getExt(source.src)];
Audio.appendChild(source);
}
Audio.playname = name;
Audio.onloadeddata=audioOnload(Audio);
Audio.onerror = function(e){
alert("资源加载时发生错误！"+this.playname);
}
}
})();
</script>
欢迎访问博主的网站：
http://www.108js.com
本学习笔记实例代码请下载：
分享到：
相关推荐
项目中包含多个HTML文件（如index2.html、index.html、index5.html、index4.html、index3.html），这可能意味着提供了不同样式或功能的加载动画示例。这些文件可以作为参考，帮助开发者了解如何根据实际需求调整和...
在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中，我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果，这是一个增强用户体验的重要技巧，尤其在游戏加载、场景切换或过渡效果中。 首先，淡入淡出...
在“HTML5 Canvas学习笔记(6)拼图游戏（数字版）”这篇博文中，作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**： - Canvas是一个基于矢量图形的画布元素...
在这个“html5 canvas粒子动画进度条加载特效.zip”中，我们看到的是一种利用Canvas API实现的粒子动画进度条加载效果，通常用于网站内容加载时提供用户反馈，提升用户体验。 首先，我们要理解Canvas的基本概念。...
总的来说，这个项目不仅展示了HTML5 Canvas的游戏开发能力，还体现了JavaScript编程技巧，以及对CSS3和Web资源管理的理解。对于想要学习或提升HTML5游戏开发技能的人来说，这是一个极好的实践案例。
总之，这个压缩包提供的资源是一个基于HTML5 Canvas和jQuery的3D空间动画特效实例，通过学习和理解这些代码，开发者可以掌握如何在网页上创建科技感十足的3D动画，同时也可以了解到Canvas与jQuery的结合使用，以及...
对于开发者来说，这是一个很好的学习案例，可以深入理解Canvas API和JavaScript动画机制，同时也提供了二次开发的可能性，可以根据需求调整气泡的样式、速度和行为，以适应各种网页设计的需求。
总之，“html5 canvas时光隧道3D粒子动画特效”是一个展示HTML5 Canvas和JavaScript强大能力的实例，它结合了CSS3动画，提供了一种创新的视觉呈现方式，可广泛应用于网站背景、互动展示或游戏设计等领域。...
### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中，为了更好地组织页面内容并增强语义性，引入了一系列新的结构标签，这些标签不仅能够帮助开发者更清晰地定义页面的不同部分，同时也为搜索...
总的来说，这个压缩包提供了一个实际的HTML5 Canvas与jQuery结合的实例，帮助开发者学习如何在网页上实现复杂的动画效果，特别是与游戏相关的视觉特效。通过研究和修改这些代码，你可以进一步提升自己的前端开发技能...
在这个"html5 canvas蓝天白云背景动画特效"中，我们可以学习到如何使用Canvas API来创建交互式的背景动画。 首先，Canvas是一个HTML元素，通过JavaScript可以对它的像素进行直接操作。`<canvas>`标签在网页中定义了...
这个“html5 canvas全屏科幻粒子闪烁背景动画特效.zip”文件提供了一个利用Canvas实现的全屏粒子闪烁背景动画效果，适合用于网站背景或者各种视觉展示。 在HTML5中，Canvas是一个矩形区域，开发者可以通过...
这个“HTML5 Canvas酷炫烟花庆祝动画特效.zip”压缩包包含了一个使用HTML5 Canvas元素创建的烟花动画特效，它能为网站增添节日氛围或者用于各种庆祝场合。 首先，我们来详细了解一下HTML5 Canvas。Canvas是HTML5的...
HTML5 Canvas技术是一种在网页上绘制图形的API，它允许开发者直接在浏览器中进行动态图形渲染，无需依赖任何外部...对于想要学习Canvas动画、粒子系统、颜色动画和jQuery集成的开发者来说，这是一个很好的实践案例。
这篇学习笔记将深入探讨HTML5游戏开发的关键技术和实践方法。 首先，我们要理解HTML5的基础。HTML5是超文本标记语言的最新版本，它增强了网页的结构化和语义化能力，引入了新的元素如`<canvas>`、`<audio>`和`...
3. **CSS特效**：虽然主要的动画效果由Canvas实现，但CSS也可能用于辅助样式设定，如容器的布局、背景颜色、边框等，以确保整个加载动画与网页设计的和谐统一。 4. **网页特效**：形状加载动画属于网页特效的一种，...
总的来说，这个压缩包提供了一个使用HTML5 Canvas和jQuery创建互动动画的实例，对于学习者来说，这是一个很好的实践项目，可以理解如何将这两个技术结合起来创建动态的网页效果。同时，有能力的开发者还可以通过修改...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上...对于学习Canvas动画和游戏开发的初学者来说，这是一个很好的实践案例。通过研究和修改这个项目，可以深入理解Canvas API和动画原理，提升Web开发技能。