vue项目中报警声音结束之后怎么重新进行报警？

Question

vue项目，页面有·超标报警功能，就是后台传值isExceeding= ‘1’就报警，现在完成了按顺序依次报警
就是判断设备有没有超标，超标了就按照第几台设备对应报警，从第一台开始，按顺序一台一台判断并报警。

<template>
  <div class="shore-power-general">
    <el-card>
      <div style="margin-right:2%; display: flex;align-items: center; justify-content: flex-end;">
        <div class="switch">是否开启声音报警：</div>
        <el-switch v-model="startAudio" />
      </div>
    </el-card>
    <div class="equipment-list">
      <div
        v-for="(i, idx) in equipmentList"
        :key="idx"
        class="equipment-list-item align-center"
      >
        <div class="equipment-list-item-bottom">
          <div v-if="startAudio === true">
            <div v-if="audios === '0'">
              <div v-if="idx === 0">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao1.mp3"
                />
              </div>
              <div v-if="idx === 1">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao2.mp3"
                />
              </div>
              <div v-if="idx === 2">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao3.mp3"
                />
              </div>
              <div v-if="idx === 3">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao4.mp3"
                />
              </div>
              <div v-if="idx === 4">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao5.mp3"
                />
              </div>
              <div v-if="idx === 5">
                <audio
                  v-if="i.isExceeding == '1'"
                  id="audiosStart"
                  src="./newjingbao6.mp3"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { getEquipmentInfo } from '@/api/IntelligentIOT'
export default {
  data() {
    return {
      // 报警声音
      startAudio: false,
      audios: '1',
      clockInterval: null,
      form: {
        currentPage: 1,
        pageSize: 100
      },
      equipmentList: [],
      timer: null
    }
  },
  watch: {
    startAudio: function() {
      if (this.audios === '0') {
        var timer = setTimeout(() => {
          this.playAudio()
          clearTimeout(timer)
        }, 500)
      }
    }
  },
  created() {
    this.init()
    this.timer = setInterval(() => {
      // console.error("11111");
      this._getEquipmentInfo()
      this.audios = '0'
    }, 9000)
  },
  methods: {
    async init() {
      await this._getEquipmentInfo()
      this.startAudio = true
      this.audios = '0'
    },
    // 语音播放
    playAudio() {
      var audios = document.getElementsByTagName('audio')
      for (var i = 0; i < audios.length; i++) {
        var current = audios[i]
        current.addEventListener('ended', function() {
          console.log(`${this.src} ended`)
          var audioArr = document.getElementsByTagName('audio')
          for (var j = 0; j < audioArr.length; j++) {
            if (this === audioArr[j]) {
              var nextAudio = audioArr[j + 1]
              nextAudio.play()
              console.log(`${nextAudio.src} started.`)
              break
            }
          }
        }, false)
      }
      audios[0].play()
    },
    // 设备清单
    async _getEquipmentInfo() {
      this.currentTime = 30
      const res = await getEquipmentInfo({
        companyFid: this.$store.getters.companys.companyFid
      })
      if (res.code === '0') {
        this.equipmentList = res.data
      }
    }
  }
}
</script>

现在想报警完成之后从头开始判断当前设备是否超标，再来一轮报警，这要怎么办?

Answer 1

audio有loop属性，可以循环播放，不需要你自己取操作播放