关灯
开启左侧

微信小程序-音乐播放器详解

[复制链接]
油腻大叔 发表于 2018-7-13 22:05:53 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
本帖最后由 油腻大叔 于 2018-7-13 22:05 编辑

      大家好,上一篇分享了如何获取酷狗的音乐资源,今天给大家聊一下微信小程序中音乐播放器的制作。

      微信小程序中关于音频方面的东西很多,但是因为版本的关系,很多组件和接口已经不维护了。

      今天给大家讲解的是官方最新维护的wx.createInnerAudioContext()接口,也是现在小程序中功能最全的接口。        
      
      详细文档还请查看官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/createInnerAudioContext.html
        
      在这里就不说文档了,主要根据常见功能把涉及到的知识点和易错点给大家介绍一下。
        
1、如何声明一个微信audio对象

      const audio = wx.createInnerAudioContext();
         
    注:如果你的播放器比较复杂,有许多功能,建议把对象放在data中方便维护。
         
    data:{
       audio:null
    }
        在onload的时候,或者适当的时候初始化;
   
    this.setData({
       audio: wx.createInnerAudioContext()
    })

2、进度条功能
      
        进度条设计可以用到小程序中的组件progress,可以通过percent属性来控制进度条的百分比。
               
        百分比=当前的时间/歌曲总时间*100
              
        当前的时间:currentTime属性
        歌曲总时间:duration属性             
              
3、可以拖拽进度条改变歌曲进度的功能

        如果想要让进度条可以拖拽,并且改变歌曲的进度可以利用组件movable-area
              
        movable-area组件使用: horizontal 横方向拖拽
        
        <movable-area style="width:100%">
               <movable-view  direction="horizontal">  
               </movable-view>
          </movable-area>
              
         可拖动滑块在拖动的时候,想让进度条进度发生改变做法如下:
              
         当拖动的时候:百分比=拖动的X值/movable-area组件的宽度*100
           
         拖动进度条的时候想让歌曲也改变进度需要用到seek(制定位置的时间,单位秒)方法
              
         this.data.audio.seek(歌曲总时间*(进度条的百分比值/100))

4播放循序功能

         播放方式一般包括顺序播放,单曲循环,随机播放,这些模式主要就是在一首歌曲播放完毕后选择适当歌曲
            
         主要介绍的函数为:onEnded,大家需要在这个函数中完成不同方式的播放

5、 音量功能

         在小程序之前是没有音量控制功能,音量的变化主要是通过手机的音量键来控制的。1.9.0的新版本增加了volume属性

         在使用的时候需要注意的是:volume属性的范围值为0-1,大家在控制音量增大或者减小的时候不能用volume++或者volume--应该是volume+=0.1或者volume-=0.1,还有一个问题就是大叔在测试的时候pc端每次音量发生改变,歌曲都会从新播放,但是在手机上不会出现

6、加载数据不足和加载失败
            
             onWaiting事件,音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
           offError事件,当程序发生错误的时候会触发
               
           this.data.audio.onError((res)=>{
                  console.log(res.errMsg) //错误信息
                  console.log(res.errCode)//错误代码   
            })
            这两事件也是在小程序中不可缺少的哦。

分享就到这里,觉得有用的可以点赞,关注我哦,也欢迎留言吐槽,也可以添加QQ群详细讨论:622730703




4.png
3.png
2.png
1.png
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  安仔IT技术交流论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )