Vue实现音频文件播放功能

目录

 

1、定义播放按钮

2、定义弹出层组件

3、JavaScript代码

---

1、定义播放按钮

 <el-button type="text" @click="handlePlay(scope.row)">播放</el-button> 

 

2、定义弹出层组件

    <el-dialog title="录音播放" :visible.sync="dialogVisible" width="20%" :before-close="stop">
      <template>
        <center>
          <audio
            :src="src"
            autoplay="autoplay"
            controls="controls"
            ref="audio"
          >Your browser does not support the audio element.</audio>
        </center>
      </template>
    </el-dialog>

3、JavaScript代码

<script>
  data() {
    return {
      src: "",
      dialogVisible: false,
    }

  methods: {
    //播放组件
    handlePlay(row) {
      this.src = row.filePath;
      this.play();
      });
    },
    //播放
    play() {
      this.dialogVisible = true;
      this.$refs.audio.play();
    },
    //音频暂停
    stop() {
      this.dialogVisible = false;
      this.$refs.audio.pause();
      this.$refs.audio.currentTime = 0;
    }
}

</script>