vue 音频播放 Audio 不使用插件

<template>
  <img :src="audio_icon" class="icon_audio" @click="audioClick" />
</template>

<script>
export default {
  props: ['adcd'],
  name: '',
  data() {
    return {
      canPlay: false,
      audio_icon: require('../images/audio/icon_close.png'),
      musicAudio: new Audio(require('./warn.mp3')),
      timerOut: null,
    };
  },
  methods: {
    // 告警语音
    audioClick() {
      this.canPlay = !this.canPlay;
      switch (this.canPlay) {
        case true:
          if (this.audio_icon == require('../images/audio/icon_open.png')) {
            this.audio_icon = require('../images/audio/icon_mute.png');
            this.playAudio(false);
          } else {
            this.audio_icon = require('../images/audio/icon_open.png');
            this.playAudio(true);
          }
          break;
        case false:
          if (this.audio_icon == require('../images/audio/icon_close.png')) {
            this.audio_icon = require('../images/audio/icon_mute.png');
            this.playAudio(false);
          } else {
            this.audio_icon = require('../images/audio/icon_close.png');
            this.playAudio(false);
          }
          break;
      }
    },
    playAudio(isP) {
      if (isP) {
        this.musicAudio.play();
        this.musicAudio.loop = true;
      } else {
        this.musicAudio.pause();
      }
    },
    // 关闭
    audioPause() {
      this.canPlay = true;
      this.audioClick();
    },
  },
  created() {},
  mounted() {
    this.getWarnData();
  },
  beforeDestroy() {
    clearInterval(this.timerOut);
  },
};
</script>

<style lang="less" scoped></style>