<template>
  <message-bubble :isMine="isMine" :message="message">
    <div class="sound-element-wrapper" title="单击播放" @click="play">
      <i class="iconfont icon-voice"></i>
      {{ second + '"' }}
    </div>
    <!--  <audio :ref="audioEl" crossOrigin="anonymous" :src="url"></audio>-->
    <audio :ref="audioEl" crossOrigin="anonymous"></audio>
  </message-bubble>
</template>

<script>
import messageBubble from "@/components/timApp/message/message-bubble.vue";
import flvjs from "flv.js";

export default {
  name: "SoundElement",
  props: {
    payload: {
      type: Object,
      required: true,
    },
    message: {
      type: Object,
      required: true,
    },
    isMine: {
      type: Boolean,
    },
  },
  components: {
    messageBubble,
  },
  data() {
    return {
      amr: null,
      autoplay: false,
    };
  },
  computed: {
    audioEl() {
      return `audio-${this.message.id}`;
    },
    url() {
      return this.payload.url;
    },
    size() {
      return this.payload.size;
    },
    second() {
      return this.payload.second;
    },
  },
  methods: {
    async play() {
      // 目前移动端的语音消息采用 aac 格式，以前用 amr 格式。默认先用 audio 标签播放，若无法播放则尝试 amr 格式播放。
      // const audio = document.createElement('audio')
      // audio.crossOrigin = "anonymous"
      // audio.addEventListener('error', this.tryPlayAMR) // 播放出错，则尝试使用 AMR 播放
      // audio.src = this.url
      // console.log(this.url)
      // // debugger
      // const promise = audio.play()
      // if (promise) {
      //   promise.catch(() => {})
      // }
      if (flvjs.isSupported()) {
        const videoElement = this.$refs[this.audioEl];
        const flvPlayer = flvjs.createPlayer({
          type: "aac",
          url: this.url,
          hasAudio: true,
          hasVideo: false,
          cors: true,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        // flvPlayer.play();
        setTimeout(function () {
          flvPlayer.play(); // 播放数据流
        }, 0);
      }
      // this.$refs[this.audioEl].play()
      // const arrayBuffer = await fetchAudioFile(this.url);
      // console.log(arrayBuffer)
      // window.AudioContext = window.AudioContext || window.webkitAudioContext;
      // const context = new window.AudioContext();
      // const sourceBuffer = context.createBufferSource(); // creates a sound source
      //
      // fetch('test.amr')
      //   .then(res => res.arrayBuffer())
      //   .then(buffer => {
      //     console.log(buffer)
      //     context.decodeAudioData(buffer,audioBuffer => {
      //       sourceBuffer.buffer = audioBuffer
      //       sourceBuffer.connect(context.destination)
      //       sourceBuffer.start(0)
      //     },err=>{
      //       console.log(err)
      //     })
      //   })
    },
    tryPlayAMR() {
      try {
        const isIE = /MSIE|Trident|Edge/.test(window.navigator.userAgent);
        // amr 播放组件库在 IE 不支持
        if (isIE) {
          this.$store.commit("showMessage", {
            message: "您的浏览器不支持该格式的语音消息播放，请尝试更换浏览器，建议使用：谷歌浏览器",
            type: "warning",
          });
          return;
        }
        // 动态插入 amr 播放组件库
        if (!window.BenzAMRRecorder) {
          const script = document.createElement("script");
          script.addEventListener("load", this.playAMR);
          script.src = "BenzAMRRecorder.js";
          const firstScript = document.getElementsByTagName("script")[0];
          firstScript.parentNode.insertBefore(script, firstScript);
          return;
        }
        this.playAMR();
      } catch (error) {
        this.$store.commit("showMessage", {
          message: "您的浏览器不支持该格式的语音消息播放，请尝试更换浏览器，建议使用：谷歌浏览器",
          type: "warning",
        });
      }
    },
    playAMR() {
      if (!this.amr && window.BenzAMRRecorder) {
        this.amr = new window.BenzAMRRecorder();
      }
      if (this.amr.isInit()) {
        this.amr.play();
        return;
      }
      this.amr.initWithUrl(this.url).then(() => {
        this.amr.play();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sound-element-wrapper {
  padding: 0 10px;
  cursor: pointer;
}
</style>
