需求：
1.自定义设置音频播放组件的样式
2.音频播放器可点击任意进度播放
3.音频播放器可拖动进度条播放
完成效果如图所示：
左侧为播放按钮，中间为进度条，右侧显示已播放时间/总时长
下面为实现代码：
<template>
<div>
<div v-if="showAudio">
<div
:
@click="audioStart"
></div>
<div @click="turnPosition($event)">
<div :style="{ width: translateX }"></div>
<div @mousedown.stop="mousedown($event)"></div>
</div>
<div >{
{ time }}/{
{ duration }}</div>
</div>
<audio
:controls="false"
:autoplay="false"
:loop="false"
preload="auto"
ref="audio"
@loadstart="loadstart"
@timeupdate="timeupdate"
@canplay="canplay"
@loadedmetadata="loadedmetadata"
>
<!-- <source src="../../assets/audio/xx.mp3" type="audio/mpeg" /> -->
<!-- <source src="" type="audio/mpeg" /> -->
</audio>
</div>
</template>
<script>
export default {
data() {
return {
//音频
s发布者：admin，转转请注明出处：http://www.yc00.com/web/1754990432a5224585.html
评论列表（0条）