<template>
  <div class="comp-canvas" ref="domCanvas" />
</template>
<script>
import SiriWave from "@/vendor/comp/siriwave.umd";

export default {
  name: "comp-siriwave",
  props: {
    voiceSize: {
      default: 0
    }
  },
  data() {
    return {
      wave: ""
    };
  },
  methods: {
    init() {
      this.wave = new SiriWave({
        container: this.$refs.domCanvas,
        amplitude: 0.7,
        speed: 0.1,
        // width: 375,
        // height: 80,
        color: "22, 334, 1",
        // speedInterpolationSpeed: 0,
        frequency: 2, //波的个数
        autostart: true,
        cover: true,
        ratio: 1,
        style: "ios",
        curveDefinition: [
          {
            attenuation: -0.6,
            lineWidth: 3,
            opacity: 1
          },
          {
            attenuation: 0.4,
            lineWidth: 3,
            opacity: 1
          },
          {
            attenuation: 0.8,
            lineWidth: 3,
            opacity: 1
          }
        ]
      });
    }
  },
  watch: {
    voiceSize(newValue, oldValue) {
      this.wave.setAmplitude(this.voiceSize);
    },
    getAverageVolume(data) {
      var values = 0;
      var length = data.length;
      for (var i = 0; i < length; i++) {
        values += data[i];
      }
      return values / length;
    }
  },
  mounted() {
    this.init();
    this.ctx = this.wave.ctx;
    var gradient = this.ctx.createLinearGradient(0, 0, 710, 0);
    gradient.addColorStop(0, "rgba(255,249,50,1)");
    gradient.addColorStop(1, "rgba(76,228,253,1)");
    gradient.width = "900px";
    this.ctx.fillRect(-200, 20, 1500, 1000);
    this.ctx.strokeStyle = gradient;
    this.ctx.stroke();
    // var ctx = new (window.AudioContext || window.webkitAudioContext)();
    // var analyser = ctx.createAnalyser();
    // analyser.connect(ctx.destination);
    // analyser.fftSize = 2048;
    // var bufferLength = analyser.frequencyBinCount;
  }
};
</script>
<style lang="stylus" scoped>
.comp-canvas
  margin 50px 0
  width 100%
  height 80px
  z-index 99
</style>
