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 (this.audioStatus === '播放中...') {
if (this.audio) {
毕福剑的现任老婆this.audio.pause()
this.audioStatus = '暂停'
return false
}
}
if (this.audioStatus === '暂停') {
if (this.audio) {
this.audio.play()
this.audioStatus = '播放中...'
return false
}
}
this.audio = new Audio(url)
this.audio.autoplay = true
this.audio.play()
var sumDuration = this.duration
var audioI = 0
this.audio.addEventListener('loadstart', function () { that.audioStatus = '⼼声加载中...'
})
this.audio.addEventListener('loadeddata', function () { that.audioStatus = '加载完成...'
})
this.audio.addEventListener('error', function () {
that.audioStatus = '加载失败...'
})
this.audio.addEventListener('timeupdate', function () { audioI++
if (audioI <= 1) {
that.audioStatus = '播放中...'
}
let du = parseInt(sumDuration - that.audio.currentTime) if (du
that.durations = '00'
} else if (du
that.durations = '0' + du
} else {
that.durations = du
}
})
this.audio.addEventListener('ended', function () {
that.durations = that.duration
that.audioStatus = '播放完成'
setTimeout(() => {
this.audio = ''
}, 150)
})
}
}
}
.audio-user{
唐宁 加拿大模特身高181width: 3rem;
height: 0.5rem;
line-height: 0.5rem;
background-color: #eee;
border-radius: 0.5rem;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 0.2rem;
color: green;
}
index.vue⽗组件中的调⽤⼦组件audioplay。
传值：
url : ⾳频地址
duration : ⾳频时长import audioplay from '@/components/audioplay.vue' export default {
name: 'index',
components: {
'audioplay': audioplay
},
}
⼆、组件预览效果
Audio事件参考：
audio事件事件描述
durationchange当指定⾳频/视频的时长数据发⽣变化时，发⽣ durationchange 事件
loadedmetadata当指定的⾳频/视频的元数据已加载时，会发⽣ loadedmetadata 事件
progress当浏览器正在下载指定的⾳频/视频时，会发⽣ progress 事件
suspend该事件在媒体数据被阻⽌加载时触发。 可以是完成加载后触发，或者因为被暂停的原因
loadeddata当当前帧的数据已加载，但没有⾜够的数据来播放指定⾳频/视频的下⼀帧时，会发⽣ loadeddata 事件
canplay当浏览器能够开始播放指定的⾳频/视频时，发⽣ canplay 事件
canplaythrough当浏览器预计能够在不停下来进⾏缓冲的情况下持续播放指定的⾳频/视频时，会发⽣ canplaythrough 事件play开始播放时触发
playing开始回放
timeupdate播放时间改变 这个会⼀直打印
pause暂停时会触发，当播放完⼀⾸歌曲时也会触发
ended当播放完⼀⾸歌曲时也会触发
abort客户端主动终⽌下载(不是因为错误引起)
error请求数据时遇到错误
周笔畅长发stalled⽹速失速北京行程卡已带星对出行有影响吗
waiting等待数据，并⾮错误
seeking寻中
seeked寻完毕
ratechange播放速率改变
volumechange⾳量改变
发布评论