vue+element 播放mp3音频（只有播放按钮）

最新推荐文章于 2024-05-30 11:31:14 发布

Tz.

最新推荐文章于 2024-05-30 11:31:14 发布

阅读量4.1k

点赞数

分类专栏： vue element ui 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_42551369/article/details/114269290

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

element ui

2 篇文章 0 订阅

订阅专栏

1.需求：最近遇到一个问题，列表中存在录音地址，需要在list列表中添加播放按钮，可以随时播放录音。话不多少，先看效果
在这里插入图片描述

2.创建一个a.vue文件，编写播放和暂停逻辑，此文件作为子组件。

<template>
  <i slot="reference" :style="isPlay==false?'':'color: red;'" :class="isPlay==false?'el-icon-video-play':'el-icon-video-pause'" @click="autoPlay" style="cursor: pointer;margin-right: 10px;margin-top: 3px;font-size: 25px"></i>

</template>

<script>
export default {
  props: {
    recordFile: {
      type: String
    }
  },
  name: 'audioplay',
  data() {
    return {
      isPlay: false,
      myAuto: new Audio(this.recordFile)
    };
  },
  methods: {
    autoPlay() {
      this.isPlay = !this.isPlay;
      if (this.isPlay) {
        this.myAuto.play();
        this.palyEnd();
      } else {
        this.myAuto.pause();
        this.palyEnd();
      }
    },
    palyEnd() {
      this.myAuto.addEventListener('ended', () => {
        this.isPlay = false;
      });
    }
  }
};
</script>

<style scoped>

</style>

3.在b.vue文件的播放列表中将b.vue组件插入。（父组件引入子组件，未看懂的同学请自行百度^_^）

	<el-table 
		:data="tableData"
        v-loading="tableLoading"
        stripe>
		<el-table-column
            prop="address"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.recordFile" class="divs">
                <div class="audio">
                  <audioplay :recordFile="scope.row.recordFile"></audioplay>
                </div>
                <div class="download">
                  <el-button type="text"><a :href="scope.row.recordFile" style="text-decoration: none;color: #409eff">下载</a></el-button>
                </div>
              </div>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>