<template>
|
<div class="contentBox">
|
<div class="videoName">{{ $route.query.titleName }}</div>
|
|
<audio
|
@canplay="getDuration"
|
controls
|
v-if="audioSrc"
|
@timeupdate="updateTime"
|
ref="audio"
|
:src="audioSrc"
|
oncontextmenu="return false"
|
controlsList="nodownload"
|
></audio>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
audioSrc: "",
|
};
|
},
|
created() {
|
scrollTo(0, 0);
|
this.audioSrc =
|
this.config.requestCtx +
|
"/file/api/ApiDownload?md5=" +
|
this.$route.query.md5;
|
},
|
methods: {
|
getDuration() {
|
this.audio = this.$refs.audio;
|
this.duration = this.timeFormat(this.$refs.audio.duration);
|
},
|
|
updateTime() {
|
if (!this.$refs.progress) return;
|
this.currentDuration = this.timeFormat(this.audio.currentTime);
|
//如果不是正在移动 和 没有暂停播放就执行
|
if (!this.isMoveIn || !this.audio.paused) {
|
// 设置当前时间
|
let MoveX =
|
this.$refs.progress.clientWidth *
|
(this.audio.currentTime / this.audio.duration);
|
//播放时更新距离
|
this.$refs.currentProgress.style.width = MoveX + "px";
|
this.$refs.circle.style.left =
|
MoveX - this.$refs.circle.clientWidth / 2 + "px";
|
}
|
},
|
timeFormat(number) {
|
let minute = parseInt(number / 60);
|
let second = parseInt(number % 60);
|
minute = minute >= 10 ? minute : "0" + minute;
|
second = second >= 10 ? second : "0" + second;
|
return minute + ":" + second;
|
},
|
},
|
};
|
</script>
|
|
<style>
|
audio {
|
width: 100%;
|
height: 80px;
|
}
|
.videoName {
|
text-align: center;
|
margin-top: 20px;
|
font-size: 30px;
|
}
|
</style>
|
