vue 实现简单的audio播放器（带倍速播放）

 

滑块使用的事vant组件的slider  https://youzan.github.io/vant/#/zh-CN/slider

图标使用的是iconfont字体库

使用原生audio属性，实现播放各个环节的统计和不同状态的展示，界面简洁

    
    

        
        

            

                

                    {{audioCurrentTime}}
                
                

                    
                
                

                    {{audioAllTime}}
                
                

            
            

                
                
                
                
                
                

                    
{{multipleArray[multipleIndex]}}X
                    
倍速播放
                
            

        


    

    
{{audioDetail.title}}
    

testJson数据

const testJson={"code":0,"msg":"success","data":{"id":"a_59ba3d1444f58_7yTX18hD","title":"\u300a7\u5929\u7efd\u653e\u5973\u6027\u9b45\u529b\u300b\u514d\u8d39\u5fae\u8bfe | \u7b2c\u4e00\u5929","desc":"
<\/span><\/p>
\u4eb2\u7231\u7684\u5f20\u5fb7\u82ac\u7a7a\u95f4\u00b7\u5c0f\u65f6\u7a7a\u7684\u670b\u53cb<\/span><\/p>
<\/span><\/p>
\u4eca\u5929\u662f<\/span><\/p>
<\/span><\/p>
\u300a7\u5929\u7efd\u653e\u5973\u6027\u9b45\u529b\u300b\u5fae\u8bfe<\/span><\/p>
<\/span><\/p>
\u7b2c\u4e00\u5929<\/span><\/p>
<\/span><\/p>
\u4eca\u65e5\u5fae\u8bfe\u4e3b\u9898<\/span><\/strong><\/p>
<\/p>
\u7b2c\u4e00\u5929\uff1a<\/span>\u539f\u751f\u5bb6\u5ead\u518d\u7cdf\u7cd5\u8fd8\u6709\u4e00\u6761\u8def\u901a\u5f80\u5e78\u798f<\/span><\/strong><\/span><\/p>
<\/span><\/strong><\/span><\/p>
\u7f3a\u4e4f\u8868\u626c\u548c\u9f13\u52b1\u7684\u73af\u5883\uff0c\u666e\u904d\u7f3a\u4e4f\u5e78\u798f\u611f<\/span><\/p>
<\/span><\/p>
\u5229\u7528\u5185\u759a\u6765\u63a7\u5236\u5b69\u5b50\uff0c\u9020\u6210\u7684\u4f4e\u81ea\u6211\u4ef7\u503c<\/span><\/p>
<\/span><\/p>
\u91cd\u7537\u8f7b\u5973\u7684\u89c2\u5ff5\uff0c\u65e0\u6cd5\u6d3b\u51fa\u5973\u6027\u7279\u8d28<\/span><\/p>
<\/strong><\/span><\/p>
\u7b2c\u4e00\u5929\u5c0f\u529f\u8bfe<\/span><\/strong><\/span><\/p>
<\/span><\/strong><\/p>
\u542c\u4e86\u4eca\u65e5\u5fae\u8bfe<\/span><\/p>
\u4f60\u89c9\u5f97\u81ea\u5df1\u901a\u5f80\u5e78\u798f\u7684\u8def\u5728\u54ea\u91cc\u5462\uff1f<\/span><\/p>
\u4f60\u6709\u54ea\u4e9b\u8d44\u6e90\u53ef\u4ee5\u534f\u52a9\u4f60\u8d70\u5411\u5e78\u798f\uff1f<\/span><\/p>
<\/p>
\u3010\u5bfc\u5e08\u4ecb\u7ecd\u3011<\/strong><\/span><\/p>
<\/p>
\u5468\u4f9d\u6167<\/strong><\/p>
<\/span><\/p>
\u5fc3\u7406\u7763\u5bfc\u3001\u4f01\u4e1a\u57f9\u8bad\u5e08\u3001\u821e\u8e48\u6cbb\u7597\u5e08\u3001NLP\u4e13\u4e1a\u6559\u7ec3\u3001NLP\u9ad8\u7ea7\u6267\u884c\u5e08\u3001\u7ec4\u7ec7\u7cfb\u7edf\u6392\u5217\u5bfc\u5e08\u3001\u7f8e\u56fdACHE\u50ac\u7720\u5e08\u3001\u73af\u7403\u592b\u4eba\u5fc3\u7075\u5bfc\u5e08\u3001\u56fd\u9645\u5973\u6027\u8bba\u575b\u5341\u4f73\u6770\u51fa\u5973\u6027\u3001\u77e5\u540d\u5927\u5b66\u5973\u6027EMBA\u7279\u8058\u5bfc\u5e08\u3001\u5973\u4f01\u4e1a\u5bb6\u534f\u4f1a\u8054\u76df\u7279\u8058\u5fc3\u7406\u4e13\u5bb6\u3002<\/span><\/p>
<\/span><\/p>
<\/p>
<\/p>","img_url":"http:\/\/wechatapppro-1252524126.file.myqcloud.com\/appG1VMUALC2470\/image\/46cff040af0c42fb3e4ea4198b8e2413.jpg","img_url_compressed":"http:\/\/wechatapppro-1252524126.file.myqcloud.com\/appG1VMUALC2470\/image\/compress\/46cff040af0c42fb3e4ea4198b8e2413.jpg","price":0,"state":0,"comment_count":421,"summary":"\u4eb2\u7231\u7684\u5f20\u5fb7\u82ac\u7a7a\u95f4\u00b7\u5c0f\u65f6\u7a7a\u7684\u670b\u53cb\u4eca\u5929\u662f\u300a7\u5929\u7efd\u653e\u5973\u6027\u9b45\u529b\u300b\u5fae\u8bfe\u7b2c\u4e00\u5929\u4eca\u65e5\u5fae\u8bfe\u4e3b\u9898\u7b2c\u4e00\u5929\uff1a\u539f\u751f\u5bb6\u5ead\u518d\u7cdf\u7cd5\u8fd8\u6709\u4e00\u6761\u8def\u901a\u5f80\u5e78\u798f\u7f3a\u4e4f\u8868\u626c\u548c\u9f13\u52b1\u7684\u73af\u5883\uff0c\u666e\u904d\u7f3a\u4e4f\u5e78\u798f\u611f\u5229\u7528\u5185\u759a\u6765\u63a7\u5236\u5b69\u5b50\uff0c\u9020\u6210\u7684\u4f4e\u81ea\u6211\u4ef7\u503c\u91cd\u7537\u8f7b\u5973\u7684\u89c2\u5ff5\uff0c\u65e0\u6cd5\u6d3b\u51fa\u5973\u6027\u7279\u8d28\u7b2c\u4e00\u5929\u5c0f\u529f\u8bfe\u542c\u4e86\u4eca\u65e5\u5fae\u8bfe\u4f60\u89c9\u5f97\u81ea\u5df1\u901a\u5f80\u5e78\u798f\u7684\u8def\u5728\u54ea\u91cc\u5462\uff1f\u4f60\u6709\u54ea\u4e9b\u8d44\u6e90\u53ef\u4ee5\u534f\u52a9\u4f60\u8d70\u5411\u5e78\u798f\uff1f\u3010\u5bfc\u5e08\u4ecb\u7ecd\u3011","audio_length":2682,"start_at":"2017-12-31 22:35:00","created_at":"2017-09-14 16:25:56","is_stop_sell":0,"recycle_bin_state":0,"is_available":1,"audio_url":"http:\/\/wechatapppro-1252524126.file.myqcloud.com\/appG1VMUALC2470\/audio_compressed\/1505377565_4fd15d83213bceb23a97ad6af45f1dae.mp3","payment_type":1,"products":[{"product_id":"p_5ad844dd39259_dGgElaLz","product_name":"\u65f6\u7a7a\u5fc3\u7075\u5b66\u9662 \u00b7 100\u5802\u7cbe\u534e\u8bfe\u514d\u8d39\u9886"}],"can_select":1,"view_count":90994,"in_recycle":0,"product_groups":[]},"request_params":{"app_id":"appG1VMUALC2470","data":{"resource_id":"a_59ba3d1444f58_7yTX18hD","user_id":"u_5c2ecc10e1080_ejPPDgjgjO"},"use_type":"11"}}