vue + element ui实现播放器功能的实例代码

没有效果图的展示都是空口无凭

1.基于audio并结合elementUI 的进度条实现
2.实现了播放器基本的功能，播放/暂停、快进、静音、调节声音大小、下载等功能

html代码，关键部分已加注释

   
   

   

     

       
       {{ audio.currentTime | formatSecond}}

       
       
       
       {{ audio.maxTime | formatSecond }}
     
     

       
       {{audio.playing | transPlayPause}}
       
       {{audio.speed | transSpeed}}
       
       {{audio.muted | transMutedOrNot}}
       
       

         音量
         
       

       
       下载
     
   
 

js代码

CSS代码用的是SCSS

另附一首优美测试音乐
https://wdd.js.org/element-audio/static/falling-star.mp3

到此这篇关于vue + element ui实现播放器功能的文章就介绍到这了,更多相关vue element ui播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！