- 动态修改audio的src后，如何获取时长-----先load，然后在oncanplay中获取，看getXXInfo方法
html: <audio ref="mySummaryAudio" :src="summaryAudioUrl"></audio>
script:
data(){
return {
summaryAudioUrl:'https://xxxx/welcome.mp3', //音频地址，调用接口获取
summaryAudioStatus:'pause', //pause --当前停止播放状态;play--当前播放状态
summaryAudioDuration:0, //音频时长
}
}
getXXInfo(){
let _this = this;
_this.$refs.mySummaryAudio.load();
_this.$refs.mySummaryAudio.oncanplay = function () {
console.log('time ',_this.$refs.mySummaryAudio.duration);
_this.summaryAudioDuration = parseInt(_this.$refs.mySummaryAudio.duration);
}
}
- 如何修改audio原生样式？----audio不写controls即可
- 注意，在触发事件的时候，记得监听audio的ended事件
<div class="summary-audio">
<audio ref="mySummaryAudio" :src="summaryAudioUrl"></audio>
<div class="hsqin-arrow arrow-left" @click="summaryAudioClick">
<img class="audio-img" src="xxxxxx/audio.png" alt="">
<span class="audio-time">20"</span>
</div>
</div>
summaryAudioClick(){
let that = this;
if(that.summaryAudioStatus=='pause'){
that.$refs.mySummaryAudio.play();
that.summaryAudioStatus='play'; //当前播放状态,记得修改图片
that.$refs.mySummaryAudio.addEventListener("ended",function(){
console.log('ended')
that.$refs.mySummaryAudio.pause();
that.summaryAudioStatus='pause';
});
}else{
that.$refs.mySummaryAudio.pause();
that.summaryAudioStatus='pause';
}
},
修改之后的audio样式.png
有个问题，在ios下，得到的时间为0，必须点击一下，才会显示正确时间，求大神帮忙解决
