黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

最新推荐文章于 2019-04-03 11:44:52 发布

weixin_34395205

最新推荐文章于 2019-04-03 11:44:52 发布

阅读量263

点赞数

更新时间：2018/9/3 下午1:32:54

更新说明：添加音乐的loop设置和ended事件监听

loop为ture的时候不执行ended事件

 
         const wx =  
         new  
         WxAudio({ 
        
         ele:  
         '.wx-audio' 
         , 
        
         title:  
         '河山大好' 
         , 
        
         disc:  
         '许嵩' 
         , 
        
         src:  
         '。。。。' 
         , 
        
         width:  
         '320px' 
         , 
        
         loop:  
         true 
         , 
        
         ended:  
         function 
         () { 
        
         var  
         src =  
         '。。。。' 
        
         var  
         title =  
         '她说' 
        
         var  
         disc =  
         '林俊杰' 
        
         wx.audioCut(src, title, disc) 
        
         } 
        
         })

发布时间：2018-4-4 1:01

wx-audio

微信公众号音乐播放器

基于原生js写的一款仿微信公众号的音乐组件

实例化音乐组件

 
         var  
         wxAudio =  
         new  
         Wxaudio({ 
        
         ele:  
         '#textaudio1' 
         , 
        
         title:  
         '河山大好' 
         , 
        
         disc:  
         '许嵩' 
         , 
        
         src:  
         'http://.....mp3' 
         , 
        
         width:  
         '320px' 
        
         });

方法

 
         // 实例化的wxAudio可以这样操作 
        
         wxAudio.audioPlay()    
         // 播放  
        
         wxAudio.audioPause()    
         // 暂停  
        
         wxAudio.audioPlayPause()   
         // 播放暂停  
        
         wxAudio.showLoading(bool)   
         //显示加载状态  参数bool   
        
         wxAudio的audioCut(src,title,disc)  实现音频切换的效果

新增音乐组件切歌方法

通过实例化的wxAudio的audioCut(src,title,disc) 实现音频切换的效果示例代码如下

 
         var  
         src =  
         '.....mp3' 
        
         var  
         title =  
         '她说' 
        
         var  
         disc =  
         '林俊杰' 
        
         wxAudio.audioCut(src, title, disc)