微信小程序音频播放

野性酷女 2022-06-08 09:50 382阅读 0赞

今天做微信小程序涉及到播放音频文件：

![Center][]

使用audio标签来绑定音频路径

目前没有做到播放下一首的功能，只有暂停和播放。

最上面的播放条是通过progress的percent来实现的，

通过currtRate来实现播放条的已播放长度

界面：

<view class="ub-ver info-container" style="height:5em;">
      
          <view class='ub fonts12 align-items-center' >
          <view>{
       {currentTime}}</view>
          <view class="umw-6"></view>
          <view class='ub-f1'>
            <progress percent="{
       {currtRate}}" stroke-width="2" activeColor="#ffd200" backgroundColor="#bcbcbc"  />
               
          </view>
          <view class="umw-6"></view>
          <view>{
       {duration}}</view>
        </view>  
      <audio id='audioid' src='{
       {vidioUrl}}' binderror="audioError" bindplay="audioPlay" bindeneded="playEnd" bindtimeupdate="timeUpdate"> </audio>
        
        <view class='ub ub-f1 align-items-center' style="justify-content:center">
    
            <view  class="icon-bofanglist align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/bofanglist.png') no-repeat;background-size: contain" bindtap="listClick">
              </view>
              <view class="umw1-5"></view>
              <view wx:if="{
       {flags}}" class="icon-play align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/pause.png') no-repeat;background-size: contain" bindtap="pause"> 
              </view>
               <view wx:if="{
       {flagp}}" class="icon-next align-items-center" style="background:url('../../images/zanting@3x.png') no-repeat;background-size: contain" bindtap="play">
              </view>
              <view class="umw1-5"></view>
              <view  class="icon-next align-items-center" style="background:url('http://inheater-bbs.oss-cn-shenzhen.aliyuncs.com/xcx/icons/next.png') no-repeat;background-size: contain">
              </view>
        </view>
      </view>

js文件：

onLoad: function (options) {
        var that = this;
        console.log("topicID" + options.infoId);
        wx.request({
          url: 'https://***********/' + *******,
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            that.setData({
               vidioUrl: res.data.data.videoUrl
            })
         
          }
        })
        //时间戳转换为时间日期格式
        function transDate(mescStr) {
          var n = mescStr;
          var date = new Date(n);
          var Y = date.getFullYear() + '-';
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
          var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
          return (Y + M + D)
        }
      },
      //以下是状态监听
      audioError: function (resp) {
        console.log(resp);
      },
      audioPlay: function (resp) {
        console.log(resp);
        console.log('开始播放');
      },
      playEnd: function (resp) {
        console.log(resp);
        console.log('播放结束');
      },
      timeUpdate: function (resp) {
        this.setData({
          currtRate: (100 * resp.detail.currentTime / resp.detail.duration),
          duration: (resp.detail.duration / 60).toPrecision(2),//总时长 保留两位
          currentTime: (resp.detail.currentTime / 60).toFixed(2)//toPrecision和toFixed的区别
        });
        // this.currentTime = resp.detail.currentTime;//当前时长
        // console.log(resp);
      },
      //以下是操作
      play: function () {
        this.audioContext.play();
        this.setData({
        flags:true,
        flagp:false
        })
      },
      pause: function () {
        this.audioContext.pause();
        this.setData({
          flags: false,
          flagp: true
        })
      },
      audioStart: function () {
        this.audioCtx.seek(0)//重新播放
      },

实现了音频的播放，对于下一首播放，目前没有头绪，刚接触两天，明天继续做

[Center]: /images/20220608/0575010202a341e2a0917a05b8975ce5.png