您的足迹:首页 > WEB移动端 >微信小程序 音频播放功能createInnerAudioContext

微信小程序 音频播放功能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;
},
})


本博客所有文章如无特别注明均为原创。作者:cc复制或转载请以超链接形式注明转自 .NET程序员之路
原文地址《微信小程序 音频播放功能createInnerAudioContext

相关推荐

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)