van 自定义组件_vue自定义audio播放组件

在vue中使用原始的audio标签展示的界面并不美观，所以自己重新实现了audio功能，封装成了一个vue子组件，直接调用。

原始图片界面图:

一、vue audio组件代码

/components/audioplay.vue 封装。代码中使用的vant框架和自定义了icon，使用需更换。支持播放音频，音频加载提示、加载失败提示、加载完成提示、播放中提示、播放完成提示、时间倒计时和播放暂停音乐功能。

{ {audioStatus}}

00:{ {durations}}

import { Icon } from 'vant'

export default {

name: 'audioplay',

components: {

[Icon.name]: Icon

},

props: ['url', 'duration'],

data () {

return {

audioStatus: '播放',

durations: this.duration,

audio: ''

}

},

methods: {

// 播放语音

playThisAudio (e, url) {

var that = this

if (th