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"