H5音乐项目总结刚刚完成一个H5项目，途中使用音频遇到了很多坑，所以写一个项目总结。项目要求必须微信授权才能进入。所以只能在微信上打开。流程：一开始有个小过渡效果，有bgm然后显示连续两张图片，有第二张自己的bgm图片，有文字，文字显示应该有打字的效果，主要bgm场景有各种小物品，时钟，猫，电脑，手机，杂志，杜蕾斯等等，点击每个物品，对应的图片会切换，会播放声音，最后会出现一个确认框。时钟也会旋转并点击熄灯，进入下一画面，接着是图片显示。图片会根据时钟的时间显示不同的画面。也是简单的图片渐变展示，打字效果，弹幕和bgm，最后是结果页。结果页面有三个按钮，重试，生成截图。这是外链的一般需求，比较简单。遇到的问题是微信ios无法自动播放声音，这个不难处理。//微信配置后wx.ready(()=>{audio.play()})//ordocument.addEventListener("WeixinJSBridgeReady",()=>{WeixinJSBridge.invoke('getNetworkType',{},()=>{audio.play()})},false)这将自动播放。但是，在加载当前资源之前它不会播放。因为我的项目有很多资源，所以在播放音乐之前加载需要相当长的时间。如何在非微信ios上自动播放声音？这似乎不起作用。只有当用户与应用程序交互时才能播放音乐。例如，有一个开始按钮。用户点击该按钮后，可以执行事件回调播放音乐。播放音乐时，会有延迟效果。比如资源还没有加载，不能立即播放。//html//jsfunctionplay(dom){constoAudio=document.querySelector(dom)oAudio.play()oAudio.muted=true}我们可以让它先播放，像这样会提前加载资源，并设置静音，这样就听不到声音了。并且DOM节点必须始终存在，除非您不再需要播放音乐。至于什么时候提前加载资源，就看你的项目需求来判断了。ios不能设置音量，真是蛋疼。..项目开始的bgm要比较响亮，过程中后期音量要小一些。audio.volume=0.5安卓没问题，但是ios无效，即使在dom中设置了音量也是无效的。苹果官网文档上有一句话说到这个问题：ThevolumepropertyisnotsettableinJavaScript。读取volume属性总是返回1。最后。..只能用两个bgm相同但音量不同的文件来解决。但是这个bgm的文件大小是500kb。..无法快速加载的图片可以在项目启动前提前加载constloadImg=(img)=>{constisArray=Array.isArray(img)if(!isArray){constoImg=newImage()oImg.src=imgreturnnewPromise(resolve=>{oImg.onload=()=>{resolve()}})}constarr=[]img.forEach(v=>{constoImg=newImage()oImg.src=varr.push(newPromise(resolve=>{oImg.onload=()=>{resolve()}}))})returnPromise.all(arr)}接受单个字符串或数组参数并用promise处理它。加载图片后，触发动画加载完图片，再触发动画this.loadImg([img,img_1,img_2_1,img_2_2]).then(()=>{setTimeout(()=>{this.playMusic()this.setOne()},500)})这样动画就结束了，没有任何图片。截图功能本来打算用canvas根据dom渲染到canvas，然后toDataURL生成图片，后来找了个比较好的库html2canvas，简单快速，一键生成。html2canvas(document.querySelector('.app')).then(canvas=>{//...})有个坑，截图不能有跨域图片，否则会空白。因为项目最终截图的效果只有一张图片，所以我先把图片转成base64，然后截图。createBase64(){constimg=newImage()img.crossOrigin=trueimg.src=this.bgnewPromise(resolve=>{img.onload=()=>{resolve()}}).then(()=>{constoc=document.createElement('canvas')oc.width=img.widthoc.height=img.heightconstctx=oc.getContext('2d')ctx.drawImage(img,0,0)这个.bg=oc.toDataURL()})}页面布局使用rem开发。最外层的div直接是：#app{position:absolute;顶部：0；左：0；宽度：100%；高度：100vh；overflow:hidden;}没有出现滚动条。对于背景图像，使用background.bg{background-size:cover;background-position:centercenter;}而对于其他分散的，使用绝对定位。cat{位置：绝对；顶部：50%；左：50%；}先将对象定位在整个页面的中间，然后使用margin/transform调整位置。水平位置相同。这些个体物体的定位策略是以中心点为标准进行定位。而不是左上角或左下角。因为背景图片也直接显示中心部分，所以单个对象也应该以中心点定位。限制资源大小静态资源有css、js、image、audio。css还行，没用ui库。对于js，只使用了vue和html2canvas。Vue-router、vuex、mint-ui全部移除。图片是用gulp和tinypng压缩的=gulpLoadPlugins()gulp.task('tinypng',function(cb){gulp.src('src/assets/**/*.{jpg,jpeg,png,gif}').pipe(tiny()).pipe(plugins.rename(function(path){path.dirname=`/assets/${path.dirname}`})).pipe(gulp.dest('./src'))})这是原始文件将被覆盖。如有必要，在执行前一定要对音乐文件进行备份，因为被客户端找到了，可以压缩，或者剪掉不会播放的部分。作为裁剪工具，我使用Mac的QuickTimeplayer.app进行裁剪。简单裁剪是没有问题的。如果你想增加或减少音乐的音量，我使用这个网站，它非常有用。最后是格式转换，使用MediaHumanAudioConverter.app，最后把稍微大点的资源丢给七牛这样的云服务器，既可以加快加载速度，又可以减轻服务器压力。总结这次H5的发展，比较头疼的就是音频。特别是，大多数音频问题都来自ios。..还好有iphone可以开发测试，不然调试起来真的很麻烦。把静态资源丢给七牛后，加载速度就快多了。至于网页和代码，就不放了。还没上线，客户还在调整细节~~
