在弹窗中使用了aplayer播放器,但是发现.mp3格式音频显示和播放正常,.wav格式无法显示音频总时长,于是想到做以下改造:
1、由于在点击播放后,可以显示总时长,所以想到打开页面后,自动播放,先把时长展示出来:
:autoplay="autoplay"
其中autoplay初始化为true
2、在打开弹窗后,使用ref绑定页面元素的办法,调用音频播放器的pause(暂停)方法,让自动播放的音频暂停播放,这样用户的体验就是打开音频可以显示时长,也没有自动播放了:
ref="aplayer"
this.$nextTick(() => {
this.$refs.aplayer.pause()
})
贴一下完整代码:
<template>
<a-modal
v-if="visible"
:title="title"
:width="720"
:maskClosable="false"
:visible="visible"
@cancel="handleCancel"
>
<aplayer
ref="aplayer"
:autoplay="autoplay"
:music="audio[0]"
:list="audio"
:showLrc="true"
></aplayer>
<template slot="footer">
<a-button
type="primary"
@click="handleCancel"
>返回</a-button>
</template>
</a-modal>
</template>
<script>
import aplayer from "vue-aplayer";
export default {
name: 'Audio',
components: {
aplayer
},
data () {
return {
visible: false,
autoplay: true, // 组建改造:默认播放,解决.wav格式的时长问题
audio: [
{
title: ' ',
artist: ' ',
url: ' ',
pic: ' ',
lrc: ' ',
}
]
}
},
computed: {
title () {
return '音频'
}
},
methods: {
show (audioItem) {
this.audio[0].url = audioItem.src
this.audio[0].title = audioItem.name
this.visible = true
this.$nextTick(() => {
this.$refs.aplayer.pause()
})
},
handleCancel () {
this.visible = false
},
},
}
</script>
后记:
还想过用api中提供的duration获取音频时长,但是失败了,没发现原因:
方法一:this.$refs.aplayer.duration
方法二:var videoTime = document.getElementById("video");
console.log('当前媒体的时长:' + videoTime.duration)
这两个方法获取duration都是undefined,有知道原因的小伙伴可以讨论下~