微信 H5 音乐项目总结

摘要：音乐项目总结刚刚完成了一个项目，途中使用的时候遇到不少坑，所以写篇项目总结。项目需求要经过微信授权才能进入。所以只能在微信打开。遇到的问题微信无法自动播放声音这个处理起来不难。只能通过用户对应用触发了交互，才能播放起音乐。

刚刚完成了一个 H5 项目，途中使用 audio 的时候遇到不少坑，所以写篇项目总结。

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

流程：

开场有个小的过渡效果，有 bgm

接着连续两张图片显示，有各自的 bgm

第二张图片，有文字，文字的显示要有打字的效果，附带 bgm

主场面

拥有各个小物品，像时钟、猫、电脑、手机、杂志、durex 等等

点击各个物品，对应的图片会切换，并且播放声音，最后显示一个确认框。时钟也会转动

点击关灯，进入下一个画面

接着又是图片的显示。图片会根据时钟的时间，显示不同的图片。也是简单的图片渐变显示、打字效果、弹幕和 bgm

最后是结果页，结果页有三个按钮，重新来一次，生成截图，外链

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

这个处理起来不难。

// 微信配置后
wx.ready(() => {
   audio.play()
})

// 或者
document.addEventListener("WeixinJSBridgeReady", () =>{  
  WeixinJSBridge.invoke("getNetworkType", {}, () => {
    audio.play()
  })
}, false)

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

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

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

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

// html

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

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

这个真的是蛋疼。。。项目一开始的 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 进行开发测试，不然调试起来真的是麻烦大了。

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

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