当前位置:首页 > 开发 > Web前端 > Html5 > 正文

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

发表于: 2014-06-25   作者:128kj   来源:转载   浏览:
摘要:    先要准备应付各种浏览器的声音文件,什么.mp3,.ogg,.wav等格式。还是看例子吧 <body> <div id="progressText"></div> </body> <script>   //音频播放     &
   先要准备应付各种浏览器的声音文件,什么.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

本学习笔记实例代码请下载:

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
效果图: 点击查看效果: http://www.108js.com/article/canvas/5/exam.html 欢迎访问博主的网站: h
接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)》: http://128kj.iteye.com/blog/20
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csd
效果图: 点击看效果: http://www.108js.com/article/canvas/4/inout.html 欢迎访问博主的网站: ht
在网上看到一个俄罗斯方块游戏: http://www.108js.com/article/article11/b0044.html 感觉还不错,学
接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)》 http://128kj.iteye.com/blog/2088
《HTML5 Canvas核心技术:图形.动画与游戏开发》 基本信息 原书名:Core HTML5 Canvas: Graphics, An
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csd
canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px
网站找了一个视频教程,看了看Canvas还挺好玩的。越看越觉得这东西实在是牛逼好玩。 下面是今天学的
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号