微信小程序 音频播放功能createInnerAudioContext

微信小程序 音频播放功能createInnerAudioContext

前端代码：

<view class="cu-modal {{ModalName=='DialogModal'?'show':''}}">
  <view class="cu-dialog">
    <view class="cu-bar bg-white justify-end">
      <view class="content">播放器</view>
      <view class="action" bindtap="hideModal" data-value='cancel'>
        <text class="cuIcon-close text-red"></text>
      </view>
    </view>
    <view class='progress'>
      <text class="cuIcon-{{buttonPlay}} lg text-black" bindtap="PlayVideo"></text>
      <text >{{PlayStartTime}}/{{PlayEndTime}}</text>
      <slider class='bar' bindchange="sliderChange" bindchanging="sliderChanging" value="{{ProValue}}" step="1" min='{{ProMin}}' max='{{ProMax}}' activeColor="grey" block-size="10" block-color="grey" />
       </view>
  </view>

后端代码：

const innerAudioContext = wx.createInnerAudioContext(); 

Page({ 

  /** 
   * 页面的初始数据 
   */ 
  data: { 
    audioArr: [],//音频列表 
    ModalName:null,//弹出选择层 
    buttonPlay:"playfill",//播放按钮 
    PlayAudioUrl:"",//播放地址 
    PlayStartTime:"00:00",//播放开始时间 
    PlayEndTime:"00:00",//播放结束时间 
    ProMin:0,//进度条开始 
    ProMax:10,//进度条结束 
    ProValue:0,//进度条值 
  }, 

  /** 
   * 生命周期函数--监听页面加载 
   */ 
  onLoad: function (options) { 

  }, 

//点击查看图片 
clickImg:function(e){ 
  var imgUrl =  e.currentTarget.dataset.imgurl; 
  wx.previewImage({ 
    urls: [imgUrl], //需要预览的图片http链接列表，注意是数组 
    current: '', // 当前显示图片的http链接，默认是第一个 
    success: function (res) { }, 
    fail: function (res) { }, 
    complete: function (res) { }, 
  })
}, 

//弹出播放音频框 

audioPlay:function(e){ 
  var index=e.currentTarget.dataset.key; 
  var audio=e.currentTarget.dataset.audioarr[index]; 
  console.log(audio); 
  this.setData({ 
    ModalName: e.currentTarget.dataset.target 
  })

  console.log(this.data.ModalName); 
  innerAudioContext.autoplay = false 
  innerAudioContext.src = audio; 
  let that =this; 
  innerAudioContext.onPlay(() => { 
    console.log('开始播放')
  }); 

  innerAudioContext.onCanplay(()=> { 
    innerAudioContext.duration; 
    setTimeout(() => { 
      that.setData({ 
        PlayEndTime: that.formatTime(Math.ceil(innerAudioContext.duration))
      }); 
      console.log(innerAudioContext.duration); 
    }, 200)
  })  

  innerAudioContext.onTimeUpdate(()=>{ 
    console.log('更新播放')
    that.setData({ 
      PlayStartTime: that.formatTime(Math.ceil(innerAudioContext.currentTime)), 
      ProMax:innerAudioContext.duration.toFixed(0), 
      ProMin:0, 
      ProValue:innerAudioContext.currentTime.toFixed(0), 
    }); 
  }); 

  innerAudioContext.onEnded(()=>{ 
    console.log('播放结束')
    that.setData({ 
      buttonPlay: "playfill" 
    }); 
  }); 

  innerAudioContext.onError((res) => { 
    that.setData({ 
      buttonPlay: "playfill" 
    }); 
    console.log(res.errMsg)
    console.log(res.errCode)
  }); 
}, 

//拖动进度条中 
sliderChanging:function(){ 
  innerAudioContext.pause(); 
  this.setData({ 
    buttonPlay: "playfill" 
  }); 
}, 
//拖动进度条 
sliderChange:function(e){ 
  console.log(e.detail.value); 
  innerAudioContext.seek(e.detail.value); 
  innerAudioContext.play(); 
  this.setData({ 
    buttonPlay: "stop" 
  }); 
}, 

//分配
hideModal(e) { 
  var value=e.currentTarget.dataset.value; 
  console.log(value); 
  this.StopVideo(); 
},

//停止播放，退回开始状态 
StopVideo:function(){ 
  this.setData({ 
    ModalName: null, 
    buttonPlay: "playfill", 
    PlayStartTime:"00:00", 
    ProMin:0, 
    ProValue:0 
  }); 
  innerAudioContext.stop(); 
}, 

//开始播放/停止 
PlayVideo:function(){ 
  if(this.data.buttonPlay=="playfill"){ 
    innerAudioContext.play(); 
    this.setData({ 
      buttonPlay: "stop" 
    }); 
  }else{ 
    innerAudioContext.pause(); 
    this.setData({ 
      buttonPlay: "playfill" 
    }); 
  } 
}, 

//格式化时长 
formatTime: function(s) { 
  let t = ''; 
  s = Math.floor(s); 
  if (s > -1) { 
    let min = Math.floor(s / 60) % 60; 
    let sec = s % 60; 
    if (min < 10) { 
      t += "0"; 
    } 

    t += min + ":"; 
    if (sec < 10) { 
      t += "0"; 
    } 
    t += sec; 
  } 

  return t; 
}, 
})