摘要：音樂項目總結剛剛完成了一個項目，途中使用的時候遇到不少坑，所以寫篇項目總結。項目需求要經過微信授權才能進入。所以只能在微信打開。遇到的問題微信無法自動播放聲音這個處理起來不難。只能通過用戶對應用觸發了交互，才能播放起音樂。

剛剛完成了一個 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 進行開發測試，不然調試起來真的是麻煩大了。

靜態資源扔到七牛后，加載速度快了很多。

至于網頁和代碼就不放出來了，現在還沒上線，客戶那邊還在調細節~~