(前端项目实战) 微信 H5音乐项目总结

(前端项目实战) 微信 H5音乐项目总结刚刚完成了一个 H5 项目，途中使用 audio 的时候遇到不少坑，所以写篇项目总结。

项目需求

要经过微信授权才能进入。所以只能在微信打开。

流程：

开场有个小的过渡效果，有 bgm
接着连续两张图片显示，有各自的 bgm
第二张图片，有文字，文字的显示要有打字的效果，附带 bgm
主场面
拥有各个小物品，像时钟、猫、电脑、手机、杂志、durex 等等
点击各个物品，对应的图片会切换，并且播放声音，最后显示一个确认框。时钟也会转动
点击关灯，进入下一个画面
接着又是图片的显示。图片会根据时钟的时间，显示不同的图片。也是简单的图片渐变显示、打字效果、弹幕和 bgm
最后是结果页，结果页有三个按钮，重新来一次，生成截图，外链

大概的需求就是这样，挺简单的。

遇到的问题

微信 ios 无法自动播放声音

这个处理起来不难。

// 微信配置后
wx.ready(() => {
audio.play()
})
// 或者
document.addEventListener("WeixinJSBridgeReady", () =>{
WeixinJSBridge.invoke('getNetworkType', {}, () => {
audio.play()
})
}, false)

这样就会自动播放起来了。不过会等当前资源加载完毕的时候才播放。我这个项目因为资源挺多的，所以加载了相当一段时间，然后才会播放音乐。

非微信 ios 如何自动播放声音？

这个好像就处理不了了。只能通过用户对应用触发了交互，才能播放起音乐。

比如有个开始按钮，用户点击了这个按钮后，你就可以执行事件回调播放音乐。

音乐播放，会有延迟的效果

比如资源还没加载到，不能立刻播放。

// html
<audio src='xxx' />
//js
function play(dom) {
const oAudio = document.querySelector(dom)
oAudio.play()
oAudio.muted = true
}

我们可以先让它播放起来，这样资源就会提前加载了，设置了静音，这样就能保证声音不会被听到。而且 DOM 节点是要一直存在的，除非你不需要再播放这个音乐。

至于在什么时候提前加载资源，就要看你的项目需求去判断了。

ios 无法设置音量大小

这个真的是蛋疼。。。项目一开始的 bgm 是要比较大声的，后面的流程要降低音量

audio.volume = 0.5

安卓是没问题的，但是 ios 是无效的，就算在 dom 设置 volume 也是无效的。

苹果官网文档

在上面有一句话是说到这个问题：The volume property is not settable in JavaScript. Reading the volume property 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 进行开发测试，不然调试起来真的是麻烦大了。

静态资源扔到七牛后，加载速度快了很多。

至于网页和代码就不放出来了，现在还没上线，客户那边还在调细节~~

源自：segmentfault

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

感谢 · 转发欢迎大家留言