刚刚完成了一个 H5 项目，途中使用 audio 的时候遇到不少坑，所以写篇项目总结。
项目需求
要经过微信授权才能进入。所以只能在微信打开。
流程：
开场有个小的过渡效果，有 bgm
接着连续两张图片显示，有各自的 bgm
第二张图片，有文字，文字的显示要有打字的效果，附带 bgm
主场面
拥有各个小物品，像时钟、猫、电脑、手机、杂志、durex 等等
点击各个物品，对应的图片会切换，并且播放声音，最后显示一个确认框。时钟也会转动
点击关灯，进入下一个画面
接着又是图片的显示。图片会根据时钟的时间，显示不同的图片。也是简单的图片渐变显示、打字效果、弹幕和 bgm
最后是结果页，结果页有三个按钮，重新来一次，生成截图，外链
大概的需求就是这样，挺简单的。
遇到的问题
微信 ios 无法自动播放声音
这个处理起来不难。
// 微信配置后
wx.ready(() => {
audio.play()
})
// 或者
document.addEventListener("WeixinJSBridgeReady", () =>{
WeixinJSBridge.invoke('getNetworkType', {}, () => {
audio.play()
})
}, false)
这样就会自动播放起来了。不过会等当前资源加载完毕的时候才播放。我这个项目因为资源挺多的，所以加载了相当一段时间，然后才会播放音乐。
非微信 ios 如何自动播放声音？
这个好像就处理不了了。只能通过用户对应用触发了交互，才能播放起音乐。
比如有个开始按钮，用户点击了这个按钮后，你就可以执行事件回调播放音乐。
音乐播放，会有延迟的效果
比如资源还没加载到，不能立刻播放。
// html
//js
function play(dom) {
const oAudio = document.querySelector(dom)
oAudio.play()
oAudio.muted = true
}
我们可以先让它播放起来，这样资源就会提前加载了，设置了静音，这样就能保证声音不会被听到。而且 DOM 节点是要一直存在的，除非你不需要再播放这个音乐。
至于在什么时候提前加载资源，就要看你的项目需求去判断了。
ios 无法设置音量大小
这个真的是蛋疼。。。项目一开始的 bgm 是要比较大声的，后面的流程要降低音量
audio.volume = 0.5
安卓是没问题的，但是 ios 是无效的，就算在 dom 设置 volume 也是无效的。
苹果官网文档
在上面有一句话是说到这个问题：Thevolumeproperty is not settable in JavaScript. Reading thevolumeproperty always returns 1.
最后。。。只能用两个相同的 bgm 但是不同音量的文件解决。但是这个 bgm 的文件大小有 500kb 。。。
图片无法快速加载
可以在项目开始前，提前加载
const loadImg = (img) => {
const isArray = Array.isArray(img)
if (!isArray) {
const oImg = new Image()
oImg.src = img
return new Promise(resolve => {
oImg.onload = () => {
resolve()
}
})
}
const arr = []
img.forEach(v => {
const oImg = new Image()
oImg.src = v
arr.push(new Promise(resolve => {
oImg.onload = () => {
resolve()
}
}))
})
return Promise.all(arr)
}
接受单个字符串或者数组参数，使用 promise 处理。
加载图片后，再触发动画
让图片加载完了，再触发动画
this.loadImg([img, img_1, img_2_1, img_2_2]).then(() => {
setTimeout(() => {
this.playMusic()
this.setOne()
}, 500)
})
这样就不会图都没有出来，动画就播完了。
截图功能
原本打算自己用 canvas 根据 dom 渲染到画布上，再 toDataURL 生成图片的，然后找到了一个比较好的库， html2canvas，简单快捷，一键生成。
html2canvas(document.querySelector('.app')).then(canvas => {
// ...
})
里面还有个坑，，截图是不能有跨域的图片存在，否则会空白一片。因为项目最后截图的效果，只有一张图片，所以我先把图片转成 base64，再截屏就可以了。
createBase64() {
const img = new Image()
img.crossOrigin = true
img.src = this.bg
new Promise(resolve => {
img.onload = () => {
resolve()
}
}).then(() => {
const oc = document.createElement('canvas')
oc.width = img.width
oc.height = img.height
const ctx = oc.getContext('2d')
ctx.drawImage(img, 0, 0)
this.bg = oc.toDataURL()
})
}
页面布局
使用 rem 进行开发。
最外层 div 直接：
#app {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
不出现滚动条。
背景图就用 background
.bg {
background-size: cover;
background-position: center center;
}
然后其他一些比较散乱的，就用绝对定位
.cat {
position: absolute;
top: 50%;
left: 50%;
}
先把对象定位到整个页面的中间，再用 margin / transform 进行调整位置。水平位置同理。
这些单个对象的，定位的策略就是已中心点为标准，进行定位。而不是以左上点或者左下点。
因为背景图也是直接显示中心部分的，所以单个对象的也要以中心点去定位。
限制资源大小
静态资源是 css, js, image, audio。css 还好，没用什么 ui 库。js 的话，只用了 vue 和 html2canvas。vue-router、vuex、mint-ui 这些都是统统去掉。
图片就用 gulp 配合 tinypng 进行压缩图片
const gulp = require('gulp')
const tiny = require('gulp-tinypng-nokey')
const gulpLoadPlugins = require('gulp-load-plugins')
// 还要安装 gulp-rename
const plugins = 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 的QuickTime player.app进行裁剪的。简单地裁剪是没问题的。如果像增加或者降低音乐的声音大小，用的是 这个网站，挺好用的。最后就是格式的转换，用的是MediaHuman Audio Converter.app
最后再把稍微大点的资源扔到类似七牛这种云服务器上，这样既能加快加载速度，又能减低服务器的压力。
总结
这次 H5 的开发，遇到比较麻烦的是 audio 这块。特别大部分 audio 问题是出自 ios 的。。。幸好有 iphone 进行开发测试，不然调试起来真的是麻烦大了。
静态资源扔到七牛后，加载速度快了很多。
至于网页和代码就不放出来了，现在还没上线，客户那边还在调细节~~
网友评论