real47LEBJ 2022-05-16 18:01 采纳率: 93.8%
浏览 319
已结题

Vue如何根据条件播放本地MP3文件

以下是对话框JS,对话框默认隐藏,目的是根据条件弹出对话框的同时播放MP3音频


 <div style="position: absolute">
        <el-dialog class="el-card__body" title="AAAA" :visible.sync="form.t1.dialogFormVisible"
                   @closed="handleClose1">
        </el-dialog>
      </div>

以下是对话框绑定的方法,会根据条件改变form.t1.dialogFormVisible为true从而显示对话框。
目的是在if判断条件成立后触发播放音频

watch: {
    list1: function (value) {
         for (const a of value) {
              if (a.alarmLevel == 0) {
          this.form.t1.dialogFormVisible = true
}}}}

下图是音频和本页面的结构

img

  • 写回答

2条回答 默认 最新

  • web修理工 2022-05-17 12:13
    关注

    判断条件已经知道 只要把 判断条件和你的音频对应即可实现

    import audio form './xx.MP3'
    data(){
     return {
     audio:audio
     }
    }
    <audio ref='audio' :src='audio '></audio>
    
    // 通过 this.$refs.audio.paly() 播放
    // 通过 this.$refs.audio.pause() 暂停
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月25日
  • 已采纳回答 5月17日
  • 创建了问题 5月16日