有了之前的原理，现在我们只需要拿到音频的数据即可。

模板

添加一个 canvas 来承载音频图像。

<div class="music-page { $music ?'show':'hidden' } ">
    <Back/>
    <div>
        <ul class="main {list?'hidden':'show'}">
            {#each files as file, index}
            <li on:click="$set({index})">{handleName(file)}</li>
            {/each}
        </ul>
        <div class="main play-canvs {list?'show':'hidden'}" on:click="toggleList()">
            <canvas ref:box width="400" height="400"></canvas>
        </div>
        <div class="control">
            <div class="title" on:click="toggleList()">{title}</div>
            <div class="flex">
                <button on:click="file()"><img src="{staticPath + "plus-circle.png"}" width="25" height="25" alt="add"></button>
                <button on:click="play()"><img src="{staticPath + "play-circle.png"}" width="25" height="25" alt="play"></button>
                <button on:click="pause()"><img src="{staticPath + "time-out.png"}" width="25" height="25" alt="stop"></button>
                <button on:click="prev()"><img src="{staticPath + "left-circle.png"}" width="25" height="25" alt="prev"></button>
                <button on:click="next()"><img src="{staticPath +"right-circle.png"}" width="25" height="25" alt="next"></button>
            </div>
        </div>
    </div>
</div>

修改 oncreate 钩子函数，创建音频编辑器，和分析器。

this.ac = new AudioContext()
this.analyser = this.ac.createAnalyser()

读取音频数据

修改播放和停止方法，这里我就没有对音量进行处理了，对于音量需要另外一个 GainNode 处理器。通过编辑器的 createMediaElementSource 从 dom 里面读取音频数据，连接 analyser 最终连接到 this.ac.destination 目的地。

this.analyser.frequencyBinCount 是数据长度。 this.analyser.getByteFrequencyData(this.datas) 读取数据到 this.datas 中，由于 this.datas 是 Uint8 所以是 0 - 255 的范围。

 在停止的时候要通过 requestAnimationFrame 取消动画帧。

play() {
      if (!this.player.currentSrc) {
          const {
              files,
              index
          } = this.store.get()
          this.set({
              title: handleName(files[index])
          })
          this.player.src = "file://" + files[index]
      }
      this.player.play()
      this.audioSource = this.ac.createMediaElementSource(this.player)
      this.audioSource.connect(this.analyser)
      this.analyser.connect(this.ac.destination)
      const animate = () => {
          this.datas = new Uint8Array(this.analyser.frequencyBinCount)
          this.analyser.getByteFrequencyData(this.datas)
          this.animation()
          this.rid = requestAnimationFrame(animate)
      }
      animate()
  },
  pause() {
      this.audioSource.disconnect(this.analyser);
      this.audioSource.disconnect(this.ac.destination);
      if(this.rid) {
          cancelAnimationFrame(rid)
      }
      this.player.pause()
  },

核心

代码基本都是从上一节来的，加了一个 step 步进，即取值间的距离，然后又计算了一下列数。

animation(){
    const cvs = this.refs.box
    const ctx = cvs.getContext('2d')
    const height = cvs.height
    const width = cvs.width
    let w = 20
    let h = 10
    let margin = 5 // 间隔
    let maxSize = 24 // 最高方块
    let widthSize = Math.ceil(width / w + margin) // 列数
    let GreenHightArray = new Array(widthSize + 1).fill(height)
    let v = (h + margin) * 1 // 下降速度
    let lines = Math.ceil(height / (h + margin)) // 计算行数
    const step = 10 // 步进，按比例取其中的值
    const Run = () => {
      ctx.clearRect(0, 0, width, height)
      for (let j = 0; j <= widthSize; j++) {
        let val = (this.datas[j * step])
        let currentSize = Math.ceil( (val / 255 ) * maxSize)
        let g = ctx.createLinearGradient(0, height, 0 , 0)
        g.addColorStop(0, '#233142')
        g.addColorStop(0.6, '#455d7a')
        g.addColorStop(0.8, '#f95959')
        ctx.fillStyle = g
        ctx.fillRect(j * w + margin * j, height - (h + margin) * currentSize, w, (h + margin) * currentSize)
        // 绿块逻辑
        ctx.fillStyle = '#08c299'
        let currentGreenHight = height - currentSize * (h + margin)  // 制高点 y 坐标。
        if (GreenHightArray[j] + v > currentGreenHight) {
          GreenHightArray[j] = currentGreenHight
          ctx.fillRect(j * w + margin * j, GreenHightArray[j], w, h + margin)
        } else {
          GreenHightArray[j] += v
          ctx.fillRect(j * w + margin * j, GreenHightArray[j], w, h + margin)
        }
      }
      for (var i = 0; i <= lines; i++) {
        ctx.clearRect(0, height - i * (h + margin) , width, margin)
      }
      setTimeout(Run, 500)
    }
    Run()
},