`
128kj
  • 浏览: 600118 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas学习笔记(3)加载游戏/动画音乐

阅读更多
   先要准备应付各种浏览器的声音文件,什么.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

本学习笔记实例代码请下载:
0
0
分享到:
评论

相关推荐

    基于HTML5 Canvas和Rebound动画的Loading加载动画特效

    项目中包含多个HTML文件(如index2.html、index.html、index5.html、index4.html、index3.html),这可能意味着提供了不同样式或功能的加载动画示例。这些文件可以作为参考,帮助开发者了解如何根据实际需求调整和...

    HTML5 Canvas学习笔记(4)游戏界面的淡入淡出

    在本篇"HTML5 Canvas学习笔记(4)游戏界面的淡入淡出"中,我们将深入探讨如何利用Canvas来创建游戏界面的淡入淡出效果,这是一个增强用户体验的重要技巧,尤其在游戏加载、场景切换或过渡效果中。 首先,淡入淡出...

    HTML5 Canvas学习笔记(6)拼图游戏(数字版)

    在“HTML5 Canvas学习笔记(6)拼图游戏(数字版)”这篇博文中,作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**: - Canvas是一个基于矢量图形的画布元素...

    html5 canvas粒子动画进度条加载特效.zip

    在这个“html5 canvas粒子动画进度条加载特效.zip”中,我们看到的是一种利用Canvas API实现的粒子动画进度条加载效果,通常用于网站内容加载时提供用户反馈,提升用户体验。 首先,我们要理解Canvas的基本概念。...

    HTML5 canvas趣味飞船捡金币小游戏

    总的来说,这个项目不仅展示了HTML5 Canvas的游戏开发能力,还体现了JavaScript编程技巧,以及对CSS3和Web资源管理的理解。对于想要学习或提升HTML5游戏开发技能的人来说,这是一个极好的实践案例。

    html5 canvas科技感网状3D空间动画特效.zip

    总之,这个压缩包提供的资源是一个基于HTML5 Canvas和jQuery的3D空间动画特效实例,通过学习和理解这些代码,开发者可以掌握如何在网页上创建科技感十足的3D动画,同时也可以了解到Canvas与jQuery的结合使用,以及...

    html5 canvas网页底部圆点气泡悬浮上升动画特效.zip

    对于开发者来说,这是一个很好的学习案例,可以深入理解Canvas API和JavaScript动画机制,同时也提供了二次开发的可能性,可以根据需求调整气泡的样式、速度和行为,以适应各种网页设计的需求。

    html5 canvas时光隧道3D粒子动画特效.zip

    总之,“html5 canvas时光隧道3D粒子动画特效”是一个展示HTML5 Canvas和JavaScript强大能力的实例,它结合了CSS3动画,提供了一种创新的视觉呈现方式,可广泛应用于网站背景、互动展示或游戏设计等领域。...

    HTML5高级程序设计学习笔记

    ### HTML5高级程序设计学习笔记 #### 一、HTML5新增结构标签 在HTML5中,为了更好地组织页面内容并增强语义性,引入了一系列新的结构标签,这些标签不仅能够帮助开发者更清晰地定义页面的不同部分,同时也为搜索...

    HTML5 Canvas扑克牌花式发牌动画特效.zip

    总的来说,这个压缩包提供了一个实际的HTML5 Canvas与jQuery结合的实例,帮助开发者学习如何在网页上实现复杂的动画效果,特别是与游戏相关的视觉特效。通过研究和修改这些代码,你可以进一步提升自己的前端开发技能...

    html5 canvas蓝天白云背景动画特效.zip

    在这个"html5 canvas蓝天白云背景动画特效"中,我们可以学习到如何使用Canvas API来创建交互式的背景动画。 首先,Canvas是一个HTML元素,通过JavaScript可以对它的像素进行直接操作。`&lt;canvas&gt;`标签在网页中定义了...

    html5 canvas全屏科幻粒子闪烁背景动画特效.zip

    这个“html5 canvas全屏科幻粒子闪烁背景动画特效.zip”文件提供了一个利用Canvas实现的全屏粒子闪烁背景动画效果,适合用于网站背景或者各种视觉展示。 在HTML5中,Canvas是一个矩形区域,开发者可以通过...

    HTML5 Canvas酷炫烟花庆祝动画特效.zip

    这个“HTML5 Canvas酷炫烟花庆祝动画特效.zip”压缩包包含了一个使用HTML5 Canvas元素创建的烟花动画特效,它能为网站增添节日氛围或者用于各种庆祝场合。 首先,我们来详细了解一下HTML5 Canvas。Canvas是HTML5的...

    html5 canvas全屏模糊烟雾背景色变化动画特效.zip

    HTML5 Canvas技术是一种在网页上绘制图形的API,它允许开发者直接在浏览器中进行动态图形渲染,无需依赖任何外部...对于想要学习Canvas动画、粒子系统、颜色动画和jQuery集成的开发者来说,这是一个很好的实践案例。

    Html5原生游戏开发学习笔记.zip

    这篇学习笔记将深入探讨HTML5游戏开发的关键技术和实践方法。 首先,我们要理解HTML5的基础。HTML5是超文本标记语言的最新版本,它增强了网页的结构化和语义化能力,引入了新的元素如`&lt;canvas&gt;`、`&lt;audio&gt;`和`...

    形状加载动画Canvas特效.zip

    3. **CSS特效**:虽然主要的动画效果由Canvas实现,但CSS也可能用于辅助样式设定,如容器的布局、背景颜色、边框等,以确保整个加载动画与网页设计的和谐统一。 4. **网页特效**:形状加载动画属于网页特效的一种,...

    html5 canvas纸飞机跟随鼠标飞行动画特效.zip

    总的来说,这个压缩包提供了一个使用HTML5 Canvas和jQuery创建互动动画的实例,对于学习者来说,这是一个很好的实践项目,可以理解如何将这两个技术结合起来创建动态的网页效果。同时,有能力的开发者还可以通过修改...

    html5 canvas人物跑步运动场景动画特效.zip

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上...对于学习Canvas动画和游戏开发的初学者来说,这是一个很好的实践案例。通过研究和修改这个项目,可以深入理解Canvas API和动画原理,提升Web开发技能。

Global site tag (gtag.js) - Google Analytics