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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

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

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

  1. 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"
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值