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

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

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

      今天给大家讲解的是官方最新维护的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

高人啊，真是好东西啊！！












精品软件：www.kubuku.net

沙发沙发