vue实现audio进度拖拽播放及拖拽播放问题解决

最新推荐文章于 2025-04-12 13:46:47 发布

原创

最新推荐文章于 2025-04-12 13:46:47 发布 · 5.1k 阅读

9 ·

CC 4.0 BY-SA版权

本文介绍了如何使用Vue和ElementUI来实现音频拖拽播放功能，并解决了在拖动进度条时出现的播放位置回退的bug。通过分析问题原因，即`audio`的`timeupdate`事件在拖动过程中不断更新slider模型，解决方案是在拖动时设置一个标志位，阻止`timeupdate`在拖动期间修改slider状态，确保拖放结束后正确显示当前位置。

vue+elementUi简单实现audio拖拽播放

前言： 很久之前做过的一个录音播放功能，当时播放拖拽进度的时候出现了进度条拖到目标位置松手后又退回去的bug，现在想起来把实现过程和解决方法简单再写一遍，希望能给需要帮助的同学提供一份参考。

本次小demo使用了elementUi中的slider，font-awesome中的播放图标，vue中安装及使用方法如下：

npm i element-ui font-awesome -S
然后在main.js中使用

引入elementUi:
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
Vue.use(ElementUI);
引入font-awesome:
import ‘font-awesome/css/font-awesome.css’;

使用原audio标签加载音频，不显示原音频控件，通过DIY控件控制audio标签API即可。

DIY控件部分代码

<audio ref="audio" @play="playFunc" @pause="pauseFunc" @timeupdate="timeupdateFunc" @canplay="canplayFunc" @error="errorFunc">
   <source src="../summerWind.mp3" type="audio/mpeg">   
</audio>
<div class="audioControl">
    <div class="errorMask" v-show="isError">{
   
   {
   
   errorMsg}}</div>
    <p>{
   
   {
   
   musicName}}</p>
    <div style="display:flex;align-items: center;">
       <el-slider v-model="playProcess" class="sliderClass" style="width: 95%;" @change="setProcessFunc" :format-tooltip="formatTooltip"></el-slider>
       <div style="color:white;width: 120px;text-align: right;">{
   
   {
   
   formatCurrentTime}} / {
   
   {
   
   formatDuration}}</div>
    </div>
    <div class="playControl">
       <span