评论

小程序播放音频的坑

解决小程序音频中的小问题

小程序在媒体播放这块其实挺大的,最近正好做一个音频项目,跟大分享下经验
全局声明audio实例
let audioObj = wx.createInnerAudioContext();

  • 播放时长为0
    audioObj.duration 无论你是写在play按钮点事件,还是 onPlay监听事件,都返回0。这是个很郁闷的事,解决方法:
    在play按钮事件中加入如下代码
    setTimeout(function(){audioObj.duration } , 3000);
    这不是一个完美的解决方案,有时候还是无法在3秒后获取
    我用到另外一个事件onTimeUpdate

  • 真机调试下ios无声音
    这个坑有很大一部分原因是我自己对文档没有详细阅读,当iphone在静音模式下,默认音频是没有声音的,我在auddio初始化时加了如下代码:
    audioObj.obeyMuteSwitch = false;
    看到许多帖子都说能解决问题,但是我的不知道为啥没有解决,后面在文档里找到了解决方法,其实也挺适合我的需求。我在页面app.js,onLaunch事件中加入wx.setInnerAudioOption({obeyMuteSwitch : false});
    也可以把如下代码写在页面onLoad中
    这样可以解决静音模式播放音频问题

经过一天的折腾,音频这块小程序框架还有很大的优化空间
最近附送一个将播放时长转换成 00:00这种格式

timespanFormat : function(time){
var i = Math.floor(time / 60);
if(i <= 9){i = “0”+ i;} // 04
var s = Math.round(time % 60) ;
if(s <= 9 ){s = “0” + s;}
// return i + “:” + s;
return [i , s]; //两种模式,一种把分和秒拆开,有一个小bug,当i或s 大于9 的时候返回了的是整形,js弱类型语言这个可以忽略,解决方法也简单,在i和s输出时 ‘’+i ,’’ +s 这样自动转string类型
}

最后一次编辑于  07-12  
点赞 2
收藏
评论

1 个评论

  • 爱学习的罗包
    爱学习的罗包
    09-16

    写在onCanPlay里面无法获取duration吗?就算加了延迟

    09-16
    赞同
    回复 4
    • 廖丹
      廖丹
      09-18
      没办法获取
      09-18
      回复
    • 爱学习的罗包
      爱学习的罗包
      09-18回复廖丹
      这样的话 只有等音频播放了才能获取时长 不播放就显示不了时长 就很难受
      09-18
      回复
    • 廖丹
      廖丹
      09-18
      你写在onTimeUpdate 获取duration
      09-18
      回复
    • 爱学习的罗包
      爱学习的罗包
      09-18回复廖丹
      onTimeUpdate里 安卓是行的 iOS就不行了 只有点播放了才有
      09-18
      回复