摘要：音樂(lè)項(xiàng)目總結(jié)剛剛完成了一個(gè)項(xiàng)目，途中使用的時(shí)候遇到不少坑，所以寫(xiě)篇項(xiàng)目總結(jié)。項(xiàng)目需求要經(jīng)過(guò)微信授權(quán)才能進(jìn)入。所以只能在微信打開(kāi)。遇到的問(wèn)題微信無(wú)法自動(dòng)播放聲音這個(gè)處理起來(lái)不難。只能通過(guò)用戶(hù)對(duì)應(yīng)用觸發(fā)了交互，才能播放起音樂(lè)。

剛剛完成了一個(gè) H5 項(xiàng)目，途中使用 audio 的時(shí)候遇到不少坑，所以寫(xiě)篇項(xiàng)目總結(jié)。

要經(jīng)過(guò)微信授權(quán)才能進(jìn)入。所以只能在微信打開(kāi)。

流程：

開(kāi)場(chǎng)有個(gè)小的過(guò)渡效果，有 bgm

接著連續(xù)兩張圖片顯示，有各自的 bgm

第二張圖片，有文字，文字的顯示要有打字的效果，附帶 bgm

主場(chǎng)面

擁有各個(gè)小物品，像時(shí)鐘、貓、電腦、手機(jī)、雜志、durex 等等

點(diǎn)擊各個(gè)物品，對(duì)應(yīng)的圖片會(huì)切換，并且播放聲音，最后顯示一個(gè)確認(rèn)框。時(shí)鐘也會(huì)轉(zhuǎn)動(dòng)

點(diǎn)擊關(guān)燈，進(jìn)入下一個(gè)畫(huà)面

接著又是圖片的顯示。圖片會(huì)根據(jù)時(shí)鐘的時(shí)間，顯示不同的圖片。也是簡(jiǎn)單的圖片漸變顯示、打字效果、彈幕和 bgm

最后是結(jié)果頁(yè)，結(jié)果頁(yè)有三個(gè)按鈕，重新來(lái)一次，生成截圖，外鏈

大概的需求就是這樣，挺簡(jiǎn)單的。

這個(gè)處理起來(lái)不難。

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

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

這樣就會(huì)自動(dòng)播放起來(lái)了。不過(guò)會(huì)等當(dāng)前資源加載完畢的時(shí)候才播放。我這個(gè)項(xiàng)目因?yàn)橘Y源挺多的，所以加載了相當(dāng)一段時(shí)間，然后才會(huì)播放音樂(lè)。

這個(gè)好像就處理不了了。只能通過(guò)用戶(hù)對(duì)應(yīng)用觸發(fā)了交互，才能播放起音樂(lè)。

比如有個(gè)開(kāi)始按鈕，用戶(hù)點(diǎn)擊了這個(gè)按鈕后，你就可以執(zhí)行事件回調(diào)播放音樂(lè)。

比如資源還沒(méi)加載到，不能立刻播放。

// html

我們可以先讓它播放起來(lái)，這樣資源就會(huì)提前加載了，設(shè)置了靜音，這樣就能保證聲音不會(huì)被聽(tīng)到。而且 DOM 節(jié)點(diǎn)是要一直存在的，除非你不需要再播放這個(gè)音樂(lè)。

至于在什么時(shí)候提前加載資源，就要看你的項(xiàng)目需求去判斷了。

這個(gè)真的是蛋疼。。。項(xiàng)目一開(kāi)始的 bgm 是要比較大聲的，后面的流程要降低音量

audio.volume = 0.5

安卓是沒(méi)問(wèn)題的，但是 ios 是無(wú)效的，就算在 dom 設(shè)置 volume 也是無(wú)效的。

蘋(píng)果官網(wǎng)文檔

在上面有一句話(huà)是說(shuō)到這個(gè)問(wèn)題：The volume property is not settable in JavaScript. Reading the volume property always returns 1.

最后。。。只能用兩個(gè)相同的 bgm 但是不同音量的文件解決。但是這個(gè) bgm 的文件大小有 500kb 。。。

可以在項(xiàng)目開(kāi)始前，提前加載

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)
}

接受單個(gè)字符串或者數(shù)組參數(shù)，使用 promise 處理。

讓圖片加載完了，再觸發(fā)動(dòng)畫(huà)

this.loadImg([img, img_1, img_2_1, img_2_2]).then(() => {
  setTimeout(() => {
    this.playMusic()
    this.setOne()
  }, 500)
})

這樣就不會(huì)圖都沒(méi)有出來(lái)，動(dòng)畫(huà)就播完了。

原本打算自己用 canvas 根據(jù) dom 渲染到畫(huà)布上，再 toDataURL 生成圖片的，然后找到了一個(gè)比較好的庫(kù)， html2canvas，簡(jiǎn)單快捷，一鍵生成。

html2canvas(document.querySelector(".app")).then(canvas => {
  // ...
})

里面還有個(gè)坑，，截圖是不能有跨域的圖片存在，否則會(huì)空白一片。因?yàn)轫?xiàng)目最后截圖的效果，只有一張圖片，所以我先把圖片轉(zhuǎn)成 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 進(jìn)行開(kāi)發(fā)。

最外層 div 直接：

#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

不出現(xiàn)滾動(dòng)條。

背景圖就用 background

.bg {
  background-size: cover;
  background-position: center center;
}

然后其他一些比較散亂的，就用絕對(duì)定位

.cat {
  position: absolute;
  top: 50%;
  left: 50%;
}

先把對(duì)象定位到整個(gè)頁(yè)面的中間，再用 margin / transform 進(jìn)行調(diào)整位置。水平位置同理。

這些單個(gè)對(duì)象的，定位的策略就是已中心點(diǎn)為標(biāo)準(zhǔn)，進(jìn)行定位。而不是以左上點(diǎn)或者左下點(diǎn)。

因?yàn)楸尘皥D也是直接顯示中心部分的，所以單個(gè)對(duì)象的也要以中心點(diǎn)去定位。

靜態(tài)資源是 css, js, image, audio。css 還好，沒(méi)用什么 ui 庫(kù)。js 的話(huà)，只用了 vue 和 html2canvas。vue-router、vuex、mint-ui 這些都是統(tǒng)統(tǒng)去掉。

圖片就用 gulp 配合 tinypng 進(jìn)行壓縮圖片

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"))
})

這樣是會(huì)把原文件給覆蓋掉的，如果你有必要的話(huà)，執(zhí)行前要做好備份

音樂(lè)文件的話(huà)，因?yàn)槭强蛻?hù)那邊找的，可以進(jìn)行壓縮下，或者把不會(huì)播放到的部分給裁剪到。

裁剪的工具，我用的是 mac 的 QuickTime player.app 進(jìn)行裁剪的。簡(jiǎn)單地裁剪是沒(méi)問(wèn)題的。如果像增加或者降低音樂(lè)的聲音大小，用的是 這個(gè)網(wǎng)站，挺好用的。最后就是格式的轉(zhuǎn)換，用的是 MediaHuman Audio Converter.app

最后再把稍微大點(diǎn)的資源扔到類(lèi)似七牛這種云服務(wù)器上，這樣既能加快加載速度，又能減低服務(wù)器的壓力。

這次 H5 的開(kāi)發(fā)，遇到比較麻煩的是 audio 這塊。特別大部分 audio 問(wèn)題是出自 ios 的。。。幸好有 iphone 進(jìn)行開(kāi)發(fā)測(cè)試，不然調(diào)試起來(lái)真的是麻煩大了。

靜態(tài)資源扔到七牛后，加載速度快了很多。

至于網(wǎng)頁(yè)和代碼就不放出來(lái)了，現(xiàn)在還沒(méi)上線(xiàn)，客戶(hù)那邊還在調(diào)細(xì)節(jié)~~