收藏
回答

wx.createInnerAudioContext()自定义带滚动条的音频播放

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug wx.createInnerAudioContext() 客户端 6.7.1 2.2.3

- 当前 Bug 的表现(可附上截图)

在安卓正常播放




- 预期表现

在ios上正常播放


- 复现路径

点击播放没反应


- 提供一个最简复现 Demo

Page({

 data:{

   duration: 0,

   showduration:"",

   curTimeVal: 0,

   showcurTimeVal:"",

   audioSrc:"",

   obeyMuteSwitch: false,

   isplay:true,

   id:"",

 }, 

onLoad: function(options){


   var audioSrc = _this.data.audioSrc;

   innerAudioContext.src = audioSrc;

   innerAudioContext.obeyMuteSwitch = false;

 })

 

 innerAudioContext.onTimeUpdate(()=>{

   this.setData({

     curTimeVal:innerAudioContext.currentTime,

     showcurTimeVal:_this.formseconds(innerAudioContext.currentTime)

   })

   if(!this.data.showduration){

     _this.setData({

       duration: innerAudioContext.duration,

       showduration: _this.formseconds(innerAudioContext.duration)

     })

    }

 })

},

 

onShow(){

 innerAudioContext.onPlay(res=>{

   if(innerAudioContext.duration){

     _this.setData({

       duration: innerAudioContext.duration,

       showduration: _this.formseconds(innerAudioContext.showduration)

     })

   }

 })

},

//音频播放

play: function (e) {

 console.log(e)

 console.log(innerAudioContext.src)

 innerAudioContext.play();

   this.setData({

     isplay: false

   })

   // //没有这个事件触发,无法执行updatatime

   //innerAudioContext.play((res) => 

   //that.updateTime(that)

   // )              

},

pause: function() {

 this.setData({

   isplay: true

 })

 innerAudioContext.pause();

},

 

//拖动滑块

slideBar: function(e) {

 //this.pause();

 if(this.data.duration<=0){

   wx.showToast({

     title: '正在加载',

     icon: "none",

     duration: 2000

   })

   return

 }

 var curval = e.detail.value; //滑块拖动的当前值

 this.setData({

   showcurTimeVal:_this.formseconds(curval)

 })

 if(curval>=this.data.duration){

   /**此处为重置 */

   curval=0;

   wx.showToast({

     title: '即将重新播放',

     icon:"none",

     duration:2000

   })

 }

 //innerAudioContext.stop()//停止

 innerAudioContext.seek(curval); //让滑块跳转至指定位置

},

setStopState: function(that) {

 that.setData({

   curTimeVal: 0

 })

 innerAudioContext.stop()

},

/*** 时间秒数格式化

* @param s 时间戳(单位:秒)

* @returns {*} 格式化后的时分秒

 */

formseconds: function (s) {

 var t;

 if (s) {

   var hour = parseInt(s/3600)>9?parseInt(s/3600):"0"+parseInt(s/3600);

   var min = parseInt((s% 3600)/ 60)>9? parseInt((s %3600)/60) : "0" + parseInt((s% 3600)/60);

   var sec = parseInt((s%3600) % 60) > 9 ? parseInt((s % 3600) % 60) : "0" + parseInt((s % 3600) % 60);

  t=hour+":"+min+":"+sec

 }

 return t;

},

 


最后一次编辑于  2018-08-20  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

19 个回答