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-columnprop="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.你会发现可以成功播放~~~

vue+element 播放mp3音频（只有播放按钮）相关推荐

Python播放MP3音频文件
Python播放MP3音频文件(转载) 按推荐顺序排列 ①使用playsound库 from playsound import playsoundplaysound('xx.mp3') ②使用pyga ...
Android获取mp3音频文件播放总时长
Android获取mp3音频文件播放总时长一般是需要文件的绝对路径,需要读取文件,转成媒体类解析,最好获取播放时长,然后关闭资源. /** * 获取音频文件的总时长大小 * * @param fil ...
ios端无法播放mp3音频 ffmpeg mp3 转aac
最近用到ffmpeg,需要把mp3转成aac,调用以下命令参数: 如果不加 -strict experimental ios端可能播放MP3音频失败 ffmpeg -i xxx.mp3 -acodec ...
记录-java如何播放mp3音频的
原文链接: https://blog.csdn.net/xietansheng/article/details/85056358 使用JLayer类来播放mp音频 (Java Layer)是一个用于播 ...
SoundPool播放.mp3音频
之前做了一个需求是在接收到推送时给一个自定义的提示音,比较了一下MediaPlayer.SoundPool等几种播放方式,最终选择了SoundPool. 但是遇到了坑,在此记录一下,12s的音频在大 ...
php 音频顺序播放,html5 Audio多个mp3音频顺序播放
我现在用的就是单个音频一直循环播放,就想着能不能更加多样化点,于是就有了这篇文章实现多个html5音频顺序播放,div+js window.onload = function(){ var arr ...
【代码】Python播放MP3音频文件
按推荐顺序排列 ①使用playsound库 from playsound import playsoundplaysound('xx.mp3') ②使用pygame库 from pygame impo ...
解决nw.js中无法播放mp3音频问题
最近有个项目使用nw.js开发的桌面应用,在开发中发现nw.js默认不能播放mp3,我是用的版本是最新的nwjs-v0.16.1-win-64版本的.由于MP3编码属于专利编码,非开源授权的,所以在n ...
h5 播放.mp3 音频
效果图如下要实现的功能是一个音频列表点击对应的音频进行播放暂停操作 1. html代码 <div onclick="bf('${srtList.commentContent} ...
html4播放mp3,在网页播放MP3、WMA音乐的代码
一.在网页播放MP3.WMA音乐的代码(极速模式和兼容模式都显示) border="0" width="460" height="68" t ...

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

vue+element 播放mp3音频（只有播放按钮）相关推荐

最新文章

热门文章