<template>
  <audio
    :src="src"
    controls="controls"
  />
</template>
<script type="text/javascript">

module.exports = {
  props: ['audioSrc', 'token', 'className'],

  data: function () {
    return {
      'src': '',
    };
  },
  methods: {
    loadAudio: function () {
      let _self = this;
      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      request.open('get', _self.audioSrc, true);
      request.setRequestHeader('token', (_self.token == null) ? localStorage.getItem('token') : _self.token);
      request.onload = function (e) {
        if (this.status == 200) {
          _self.src = URL.createObjectURL(this.response);
        }
      };
      request.send();
    },

    /**
         * 语音加载完毕，调用本方法，释放通过URL.createObjectURL()创建的对象URL
         */
    onload: function () {
      let _self = this;
      URL.revokeObjectURL(_self.src);
    },
  },

  watch: {
    'audioSrc': function (newValue, oldValue) {
      if (newValue != oldValue) {
        this.loadAudio(newValue);
      }
    },
  },

  mounted: function () {
    this.loadAudio(this.audioSrc);
  },
};
</script>