简单利用vue2和elementUI自界说audio支持拖拽进度

1. <template>
2.   <div class="music-player">
3.     <audio ref="audio" :src="src" @timeupdate="updateTime" @loadedmetadata="loadedmetadata" @ended="onAudioEnded"></audio>
4.     <!-- 播放暂停按钮 -->
5.     <div class="cm-btn-left" @click="togglePlay">
6.       <img src="../../../../public/img/icon/play.png" v-show="!isPlaying">
7.       <img src="../../../../public/img/icon/pause.png" v-show="isPlaying">
8.     </div>
9.     <!-- 时间 -->
10.     <div class="cm-time">
11.       <span>{{ currentTimeShow }}</span> / <span>{{ durationShow }}</span>
12.     </div>
13.     <!-- 播放进度条 -->
14.     <div class="cm-progress" @mousedown="handleMouseDown">
15.       <el-slider v-model="progress" :max="duration" :format-tooltip="formatTime" @change="progressChange"></el-slider>
16.     </div>
17.     <!-- 倍速控制 -->
18.     <div class="playback-rate-wrapper">
19.       <el-select v-model="playbackRate" @change="changePlaybackRate">
20.         <el-option
21.           v-for="item in speed"
22.           :key="item.value"
23.           :label="item.label"
24.           :value="item.value">
25.         </el-option>
26.       </el-select>
27.     </div>
28.     <!-- 音量控制 -->
29.     <div class="volumn-wrapper">
30.      <el-popover
31.         popper-class="volumn-popover"
32.         placement="right"
33.         width="30px"
34.         trigger="click">
35.         <el-slider
36.           v-model="volumnValue"
37.           vertical
38.           tooltip-class="volumn-tooltip"
39.           height="80px"
40.           @change="volumnChange">
41.         </el-slider>
42.         <el-button slot="reference" type="text"><img src="../../../../public/img/icon/volumn.png"></el-button>
43.       </el-popover>
44.     </div>
45.   </div>
46. </template>
48. <script>
50. export default {
51.   props: {
52.     src: String,
53.   },
54.   data() {
55.     return {
56.       isPlaying: false,
57.       currentTime: 0,
58.       progress: 0,
59.       duration: 0,
60.       playbackRate: 1,
61.       speed: [
62.         {
63.           label: '0.5x',
64.           value: 0.5
65.         },
66.         {
67.           label: '0.75x',
68.           value: 0.75
69.         },
70.         {
71.           label: '1x',
72.           value: 1
73.         },
74.         {
75.           label: '1.5x',
76.           value: 1.5
77.         },
78.         {
79.           label: '2x',
80.           value: 2
81.         }
82.       ],
83.       volumnValue: 50,
84.       lastTimeUpdate: null
85.     };
86.   },
87.   computed: {
88.     currentTimeShow: function () {
89.       return this.formatTime(this.currentTime);
90.     },
91.     durationShow: function () {
92.       return this.formatTime(this.duration);
93.     }
94.   },
95.   mounted() {
97.   },
98.   beforeDestroy() {
99.    
100.   },
101.   methods: {
102.     // 外部点击暂停播放
103.     resetAudio() {
104.       this.$refs.audio.pause();
105.       this.isPlaying = false;
106.       this.playbackRate = 1;
107.       this.volumnValue = 50;
108.       this.duration = 0;
109.       setTimeout(() => {
110.         this.currentTime = 0;
111.       }, 50);
112.     },
113.     // 播放暂停按钮点击事件
114.     togglePlay() {
115.       if (!this.src || this.src.length === 0) {
116.         return
117.       }
118.       if (this.isPlaying) {
119.         this.$refs.audio.pause();
120.         this.isPlaying = false;
121.       } else {
122.         this.$refs.audio.play();
123.         this.$refs.audio.volume = this.volumnValue / 100;
124.         this.isPlaying = true;
125.       }
126.     },
127.     // 格式化播放时间
128.     formatTime(seconds) {
129.       const minutes = Math.floor(seconds / 60);
130.       const secondsRemainder = Math.round(seconds % 60);
131.       return `${minutes}:${secondsRemainder < 10 ? '0' : ''}${secondsRemainder}`;
132.     },
133.     // 倍速控制
134.     changePlaybackRate() {
135.       this.$refs.audio.playbackRate = this.playbackRate;
136.     },
137.     // 更新播放时间
138.     updateTime() {
139.       this.currentTime = this.$refs.audio.currentTime;
140.       this.progress = this.currentTime;
141.     },
142.     // 获取播放总时长
143.     loadedmetadata() {
144.       this.duration = this.$refs.audio.duration;
145.     },
146.     // 播放结束
147.     onAudioEnded() {
148.       this.isPlaying = false;
149.     },
150.     // 进度条鼠标按下事件
151.     handleMouseDown() {
152.       this.$refs.audio.pause();
153.     },
154.     // 设置进度
155.     progressChange(e) {
156.       this.$refs.audio.currentTime = e;
157.       this.progress = e;
158.       this.$refs.audio.play();
159.       this.isPlaying = true;
160.     },
161.     // 设置音量
162.     volumnChange(e) {
163.       this.$refs.audio.volume = e / 100;
164.     },
165.   },
166. };
167. </script>
169. <style lang="scss" scoped>
170.   .music-player {
171.     display: flex;
172.     align-items: center;
173.     justify-content: space-between;
174.     padding: 0px 20px;
175.     background-color: #f5f5f5;
176.     border-radius: 27px;
177.     height: 54px;
178.     width: 100%;
180.     .cm-btn-left {
181.       cursor: pointer;
182.       width: 22px;
183.       height: 22px;
184.       img {
185.         width: 22px;
186.         height: 22px;
187.       }
188.     }
190.     .volumn-wrapper {
191.       img {
192.         width: 20px;
193.         height: 18px;
194.       }
195.     }
197.     .cm-time {
198.       font-size: 14px;
199.       color: #404040;
200.       margin: 0 10px;
201.     }
203.     .cm-progress {
204.       flex: 1;
205.       margin: 0 15px 0 10px;
207.       ::v-deep .el-slider__button {
208.         border-color: #404040 !important;
209.       }
211.       ::v-deep .el-slider__bar {
212.         background-color: #404040 !important;
213.       }
214.     }
216.     .playback-rate-wrapper {
217.       margin-right: 10px;
218.       ::v-deep .el-input__suffix {
219.         display: none;
220.       }
222.       ::v-deep .el-input__inner {
223.         height: 28px;
224.         width: 45px;
225.         text-align: center;
226.         padding: 0px !important;
227.         font-size: 12px;
228.       }
229.     }
230.   }
232.   ::v-deep .el-slider__button {
233.     width: 12px;
234.     height: 12px;
235.   }
237.   ::v-deep .el-popover {
238.     min-width: auto !important;
239.   }
240. </style>

复制代码

app.vue中或者其他全局变量中修改下样式
.volumn-popover {
  min-width: auto !important;
}
.volumn-tooltip {
  z-index: 99999 !important;
}


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。