canvas 音频频谱 和 坐标轴刻度

获取音频文件，通过audioContent创建分析器

init (url) {
      if (!window.AudioContext) {
        alert('您的浏览器不支持AudioContext')
      } else {
        // 创建上下文
        this.audioContent = new window.AudioContext()
        // var source = null
        // 使用Ajax获取音频文件
        var request = new XMLHttpRequest()
        request.open('GET', url, true)
        request.responseType = 'arraybuffer'// 配置数据的返回类型
        request.onload = () => {
          var arraybuffer = request.response
          this.audioContent.decodeAudioData(arraybuffer, (buffer) => {
            // 创建分析器
            var analyser = this.audioContent.createAnalyser()
            this.source = this.audioContent.createBufferSource()
            // 将source与分析器链接
            this.source.connect(analyser)
            // 将分析器与destination链接，这样才能形成到达扬声器的通路
            // analyser.connect(this.audioContent.destination)
            // 将解码后的buffer数据复制给source
            this.source.buffer = buffer
            // 播放
            this.source.start(0)
            this.source.addEventListener('ended', (e) => {
              this.getInit()
              // media.pause();
            }, false)
            this.draw(analyser) // 这儿是画图的方法，
          }, function (e) {
            console.info('处理出错')
          })
        }
        request.send()
        console.log()
      }
    }