vue+element 播放mp3音频(只有播放按钮)

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>

在这里插入图片描述
4.你会发现可以成功播放~~~

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
你可以使用 Element UI 提供的 Upload 组件来实现音频文件上传功能。以下是一个简单的示例代码: ``` <template> <div> <el-upload class="upload-demo" action="/uploadAudio" :headers="{ Authorization: 'Bearer ' + token }" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :limit="1" :accept="'audio/*'" :show-file-list="false" > <el-button type="primary">点击上传音频文件</el-button> </el-upload> </div> </template> <script> export default { data() { return { token: '', }; }, methods: { beforeUpload(file) { // 验证文件类型和大小 const isAudio = file.type.startsWith('audio/'); const isLt10M = file.size / 1024 / 1024 < 10; if (!isAudio) { this.$message.error('只能上传音频文件'); } if (!isLt10M) { this.$message.error('上传音频文件大小不能超过 10MB'); } return isAudio && isLt10M; }, onSuccess(response, file, fileList) { // 上传成功后的处理逻辑 console.log('上传成功'); }, onError(error, file, fileList) { // 上传失败后的处理逻辑 console.log('上传失败'); }, }, }; </script> ``` 在上面的示例代码中,我们使用了 Element UI 的 Upload 组件来实现音频文件上传功能。其中,主要的配置项包括: - `action`:上传文件的接口地址 - `headers`:上传请求的头部信息,需要传递用户的身份认证信息 - `before-upload`:上传前的钩子函数,用于验证文件类型和大小等信息 - `on-success`:上传成功后的回调函数 - `on-error`:上传失败后的回调函数 - `limit`:限制上传的文件数量为 1 个 - `accept`:限制上传的文件类型为音频文件 - `show-file-list`:不显示上传成功的文件列表,只显示上传按钮 需要注意的是,在上传文件时需要传递用户的身份认证信息,可以将用户的 token 存储在组件的 data 中,并在 headers 配置项中传递。另外,需要在上传前使用 before-upload 钩子函数验证文件类型和大小等信息,避免上传无效的文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值