最近用createjs完成了一个H5需求，体验二维码如下。音频接入有点坑，不过……好在坑还是可以填的。本文可以为您解决：微信音频自动播放问题Audiopreloadingproblem（解决网络不佳的环境下由于音频未缓冲导致音频和动画不同步的问题IOS设备系统不允许视频和音频自动播放进行播放，只有在用户明确指定播放（通过某种交互）的情况下，才能加载相关的音频或视频。解决方法（推荐方法一方法一：使用微信提供的sdk//importsdkvaraudio=(function(){var_audio=newAudio();_audio.src='xxx';_audio.load();return_audio;})()//微信配置信息（即使不正确Problemwx.config({debug:false,appId:'',timestamp:1,nonceStr:'',signature:'',jsApiList:[]});//就绪时触发相关事件wx.ready(function(){//触发播放事件audio.play();});方法二：野法varaudio=(function(){var_audio=newAudio();_audio.src='xxx';_audio.load();return_audio;})()document.addEventListener("WeixinJSBridgeReady",function(){WeixinJSBridge.invoke('getNetworkType',{},function(e){//触发播放事件audio.play();});},false);解释1.为什么推荐方法1，经验证方法2会在微信浏览器准备好后立即执行回调函数，如果我们使用第三方库预加载音频，我们可以监听WeixinJSBridgeReady事件，因为音频还没有加载，所以获取不到。2.只要我们在WeixinJSBridgeReadyORready时触发audio.play()事件，浏览器就会识别出音频对象已经开启，这样我们就可以在任何地方使用audio.play()和audio.pause()H5动画，而不是听用户操作来触发音频播放。音频预加载上面说到为什么需要音频预加载？在动画和音效丰富的H5中，bgm的音频可能不止一个。同时，我们还需要根据场景的变化播放不同的音效。如果在我们的动画播放过程中，音频没有被缓冲，或者只缓冲了一部分，那么音频就不会播放或者停止播放。这样就会造成动作和音效不同步的问题。（在叙事H5动画中使用audio标签属性preload尤为重要（不推荐，很简单，直接在标签中使用preload，烧鹅方式兼容性不是很好，不同机型差别很大，以及有些机型会有Preload和没有preload一样的性能，对音频缓冲不会带来太大的提升。也需要配合soundjs使用，官方文档给出的预加载原因和上面说的类似。如果没有CreateJS，大多数现代浏览器都可以很好地加载足够的音频数据来连续播放声音，直到使用HTML标签结束。canplaythrough事件将在缓冲区已满时触发，并且将开始播放声音。这对于点击播放声音或随时可以启动的背景声音来说已经足够了——但为了播放游戏、应用程序和网站的点播音频，必须首先预加载声音。使用1、preloadjs+soundjsvarqueue=newcreatejs.LoadQueue();//添加声音支持queue.installPlugin(createjs.Sound)queue.addEventListener("fileload",handleFileLoad);queue.addEventListener("完成",handleComplete);queue.loadFile({id:"bgm",src:"assets/bgm.mp3"});//ORqueue.loadManifest([{id:"bgm",src:"assets/bgm.mp3"},{id:"myImage2",src:"assets/image2.jpg"}]);//当所有资源加载完成时触发varhandleComplete=function(){//再次调用weixinReady事件让浏览器获取音频对象/*注意：音频实例是varbgmInstance=createjs.Sound.play("bgm")然后之后，您可以通过控制bgmInstance.play()或bgmInstance.stop()*/...}播放和暂停音效2.仅使用soundjs//createjs.Sound.alternateExtensions=["mp3"];控制音频类型createjs.Sound。registerSound({id:"bgm",src:"assets/bgm.mp3"});createjs.Sound.play("bgm");使用preloadjs会在preload时调用createjs.Sound.registerSound事件注册声音，所以不需要显示和调用*Audioinstancetype选择preloadjs默认加载的音频实例为AudioBuffer，即解码后的音频流。有兴趣的同学可以看看api。我对它了解不多，所以我不会误导你。即：console.log(createjs.Sound.play('bgm'))//返回AudioBuffer实例所以我们不能通过音频api来操作它，soundjs给我们提供了一个api来控制它：AbstractSoundInstance。那我们还能不能通过audiodom来控制呢？答案是可以，但是官方不推荐，而且我也遇到了移动端无法获取实例对象的问题，所以稍微提一下：//注册HTMLAudioPlugin，然后再注册声音作为原生音频domcreatejs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);//预加载varqueue=newcreatejs.LoadQueue();//添加声音支持queue.installPlugin(createjs.Sound);queue.addEventListener("fileload",handleFileLoad);queue.addEventListener("complete",handleComplete);queue.loadFile({id:"bgm",src:"assets/bgm.mp3"});//获取varhandleComplete=function(){varbgmAudioDom=queue.getResult('bgm');//console.log(bgmAudioDom)returns
