项目中利用html标签＜audio＞添加音效

<template>
  <div id="app">
    <router-view />
    <div class="warningConfirm">
      <audio controls="controls" id="audio" style="display: none">
        <source
          src="./assets/audio/urgency_voice_level_1.mp3"
          type="audio/ogg"
        />
        <source
          src="./assets/audio/urgency_voice_level_1.mp3"
          type="audio/mpeg"
        />
      </audio>
    </div>
  </div>
</template>

<script>
  import {
    getLog
  } from '@/api'
  import { Message } from 'element-ui'

  export default {
    name: 'App',
    data() {
      return {
      }
    },
    metaInfo() {
      return {
        title:
          this.$store.state.settings.dynamicTitle &&
          this.$store.state.settings.title,
        titleTemplate: (title) => {
          return title
            ? `${title} - ${process.env.VUE_APP_TITLE}`
            : process.env.VUE_APP_TITLE
        }
      }
    },
    created() {
      this.getWarning()
    },
    mounted() {
      this.$store.state.timer = setInterval(() => {
        this.getWarning()
      }, 10000)
    },
    methods: {
      async getWarning() {
        await getLog({ pageSize: 1 })
          .then((res) => {
            var audioCmp = document.getElementById('audio')
            if (res.total != 0) {
              this.id = res.rows[0].id
              const data = res.rows[res.rows.length - 1]
              this.dialogVisible = true
              console.log(audioCmp, 1)
              audioCmp.play()
            } else {
              this.dialogVisible = false
              console.log(audioCmp, 0)
              audioCmp.pause()
            }
          })
          .catch((err) => {
            console.log(err)
          })
      },
    }
  }
</script>
<style>
  .warningConfirm .el-dialog {
    background-color: #991e1e;
  }
  .pointer {
    cursor: pointer;
  }
</style>
<style lang="scss" scoped>
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>