<template>
<div id="customAudio">
<div class="audio-contain">
<div class="audio-img"
@click="playClick">
<img src="@/assets/img/icon_play.png"
alt="">
</div>
<div style="position:relative;">
<van-slider v-model="audio"
@change="onChange"
@drag-start="dragStart"
@drag-end="dragEnd"
active-color="#64d0a1"
:min="0"
:max="maxTime"
id="slider"
ref="slider">
<template #button>
<div class="custom-button"></div>
</template>
</van-slider>
<audio src="http://lstyty.oss-cn-hangzhou.aliyuncs.com/lstpems/audio/2021/4/25/3436c2f120db420ea30cda65cea003e6.mp3"
id="music"
@timeupdate="timeupdate"
@loadedmetadata="loadedmetadata"
ref="music"></audio>
</div>
<div class="atime">
<span>{{currentTime }} </span>/
<span>{{endTime}}</span>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { Slider } from 'vant';
import {formatSeconds} from '@/assets/js/common.js';
Vue.use(Slider);
export default {
name: "CustomAudio",
data () {
return {
val: 50,
onOff: false, // 控制播放暂停按钮
audio: 0, // 音频播放的位置和音频的时间
currentTime: '00:00', // 当前播放位置
endTime: '00:00', // 时间总长度
maxTime: 0, // van-slider的最大值
audioImg:'', // 播放暂停图片
};
},
mounted () {
this.audioImg = document.querySelector('.audio-img img');
},
methods: {
// 播放/暂停
playClick () {
if (this.$refs.music.paused) {
this.$refs.music.play()
this.onOff = true;
this.audioImg.src = require('@/assets/img/icon_stop.png');
} else {
this.$refs.music.pause()
this.onOff = false;
this.audioImg.src = require('@/assets/img/icon_play.png');
}
},
// 音频实时播放信息
timeupdate (e) {
let min = '0' + parseInt(e.target.currentTime / 60)
let sec = parseInt(e.target.currentTime) % 60
if (sec < 10) {
sec = "0" + sec
}
if (this.onOff) {
this.currentTime = min + ':' + sec
this.audio = e.target.currentTime
}
// 如果当前时间等于总时间按钮变成停止状态
if (e.target.currentTime === this.$refs.music.duration) {
this.onOff = false;
this.audioImg.src = require('@/assets/img/icon_play.png');
}
},
// 获取音频信息
loadedmetadata (e) {
this.endTime = formatSeconds(this.$refs.music.duration); // 音频时间转换
this.maxTime = e.target.duration;
},
// 拖拽开始
dragStart () {
this.onOff = false
},
// 改变位置
onChange (val) {
this.onOff = true;
this.$refs.music.currentTime = val;
this.$refs.music.play();
this.audioImg.src = require('@/assets/img/icon_stop.png');
},
// 拖拽结束
dragEnd () {
this.onOff = true;
this.audioImg.src = require('@/assets/img/icon_stop.png');
},
},
}
</script>
<style>
#customAudio {
width: 61.22vw;
height: 4.23vw;
margin-left: 8.79vw;
margin-top: 0.97vw;
}
.audio-contain {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: start;
}
.van-slider {
width: 38.76vw;
height: 1.269vw;
background: #c7c7c7;
}
.van-slider__button {
width: 2.248vw;
height: 2.248vw;
background: #ffffff;
border: 0.195vw solid #64d0a1;
border-radius: 50%;
}
.atime {
margin-left: 1.55vw;
color: #c7c7c7;
font-size: 1.955vw;
}
.audio-img {
margin-right: 1.8797vw;
width: 4.23vw;
height: 4.23vw;
border-radius: 50%;
background-color: #64d0a1;
line-height: 4.23vw;
text-align: center;
}
.audio-img img {
height: 1.955vw;
width: 1.564vw;
}
</style>
音频时间转换函数
// 音频时间转换
export function formatSeconds (value) {
var secondTime = parseInt(value); // 秒
var minuteTime = 0; // 分
if (secondTime > 60) {
minuteTime = parseInt(secondTime / 60);
secondTime = parseInt(secondTime % 60);
}
var result = "" + parseInt(secondTime)
if (minuteTime > 0) {
result = "" + parseInt(minuteTime) + ":" + result;
}
return result;
}