微信小程序获取音频时长与实时获取播放进度问题

首先在没有播放音频之前，居然拿不到总时长

但是在播放之后也需要设置setTimeout来获取

所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度

按照官方的写法

audioPlayed: function () {
  myAudio.play()
  setTieout(() => {
    myAudio.onTimeUpdate(() => {
      console.log(myAudio.duration)  //总时长
      console.log(myAudio.currentTime)  //当前播放进度
    })
  }, 500)
}

但是这两个console都没有触发，很是神奇

增加延迟的时间也没有用

打断点都没有进去

但是！

audioPlayed: function () {
  myAudio.play()
  setTieout(() => {
    myAudio.currentTime
    myAudio.onTimeUpdate(() => {
      console.log(myAudio.duration)  //总时长
      console.log(myAudio.currentTime)  //当前播放进度
    })
  }, 500)
}

在里面写了一个

myAudio.currentTime  或者   myAudio.duration

断点就进去了，console也出来了

由于过于神奇，所以记录一下

下面看下微信小程序音频长度获取的问题

小程序推荐使用wx.createInnerAudioContext()创建的innerAudioContext，我们也通过这个接口创建音频。

音频的长度可以通过属性获取：

但是，给innerAudioContext赋值src后就能获取吗，请看下面的例子：

onLoad: function () {
    bgM = wx.createInnerAudioContext();
    bgM.src = 'https://upyun.lesson.bbwansha.com/dub/user/2.mp3';
    console.log(bgM.duration);//0
    bgM.onCanplay(()=>{
       console.log(bgM.duration)//0
    })
    bgM.play();
    bgM.onPlay(()=>{
       console.log(bgM.duration)//0
    })
    setTimeout(()=>{
      console.log(bgM.duration)//2.795102
    },1000)
},

赋值结束后不能获取能够理解，在onCanplay，onPlay没法获取有点难以理解。

还好，我们通过setTimeout可以获取到。

获取到之后，还有个问题，在开发工具里，音频播放完之后，duration不变。

偶尔出现的问题：但在真机上，duration变为0了，也就是第二遍播放的时候，获取不到duration了。这个可以声明个个变量解决。

总结

以上所述是小编给大家介绍的微信小程序获取音频时长与实时获取播放进度问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序用户授权、位置授权及获取微信绑定手机号

    微信小程序用户授权、位置授权及获取微信绑定手机号

    1.位置授权 位置授权相对简单,可以直接调用方法wx.getLocation()就可以弹出授权框, 在调用前需要在app.json中设置用途说明 Page({ "permission": { "scope.userLocation": { "desc": "你的位置信息将用于xxx" } } }) 授权框 但是存在不少用户会拒绝授权,如果拒绝授权就不会再弹窗,而是直接进入接口 fail 回调,就要手动授权,我们可以通过自定义弹

  • 详解微信小程序开发之formId使用（模板消息）

    基于微信小程序的模板消息: 官方文档 基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验. 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见下发条件说明 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面 使用案例 场景描述:前台获取 formId 送至后台,由后台实现模板消息的发送.(此处由于 formId 只能由用户触发表单提交操作产生,故前台需要将每次产生的formId发送至后台,由后台保

  • 基于Taro的微信小程序模板消息-获取formId功能模块封装实践

    基于Taro的微信小程序模板消息-获取formId功能模块封装实践

    前言 在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:"基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验." 看图说话: 下发模板消息效果图 这无疑又给小程序提供了与用户进行通知.反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩: 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个

  • 微信小程序判断用户是否需要再次授权获取个人信息

    一.index.js设置如下 //获取用户的授权信息,放到本地缓存中 wx.getSetting({ success: (res) => { if(res.authSetting['scope.userInfo']) { wx.setStorage({ key: 'can_getuserinfo', data: 1, }) } else { wx.setStorage({ key: 'can_getuserinfo', data: 0, }) } } }), //1:从本地缓存中获取数据,如果获

  • 小程序如何获取多个formId实现详解

    小程序如何获取多个formId实现详解

    很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次"提交",可以获取到多个formId 但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了 接下来给大家介绍另一种方法: 将form和button封装成组件模拟form submit,并把这个组件做成layout级,这样可以把整个页面包括在layout里面,利用事件自动冒泡的特性,只

  • 详解微信小程序获取当前时间及日期的方法

    详解微信小程序获取当前时间及日期的方法

    获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u

  • 微信小程序实现页面跳转传值以及获取值的方法分析

    本文实例讲述了微信小程序实现页面跳转传值以及获取值的方法.分享给大家供大家参考,具体如下: 在安卓中页面跳转传值都是通过bundle,现在研究一下小程序的列表跳转及页面传值. my.wxml <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" sr

  • 解决微信小程序云开发中获取数据库的内容为空的方法

    问题描述: 在前端想获取数据库某集合中的数据时,返回的参数data始终为空数组,如下: 相关代码如下: const db = wx.cloud.database(); const activityInfo = db.collection('activityInfo'); Page({ ...省略不相干代码... onLoad(){ activityInfo.get().then((res)=>{ console.log(res) }) } ...省略不相干代码... }) 解决方案: 数据库新建

  • 微信小程序如何获取用户手机号

    最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: public class MyHttpUrlConnection { private final i

  • 微信小程序获取音频时长与实时获取播放进度问题

    首先在没有播放音频之前,居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取.顺便获取当前播放进度 按照官方的写法 audioPlayed: function () { myAudio.play() setTieout(() => { myAudio.onTimeUpdate(() => { console.log(myAudio.duration) //总时长 console.log(myAudio.currentTime) //当前播放

  • 微信小程序 audio音频播放详解及实例

    微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序多音频播放进度条问题

    微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • 微信小程序  audio音频播放详解及实例

    微信小程序  audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序学习笔记之登录API与获取用户信息操作图文详解

    微信小程序学习笔记之登录API与获取用户信息操作图文详解

    本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面.传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法. [小程序登录]wx.login() app.js: App({ onLaunch: function () { // 登录 wx.login({ success: function (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://w

  • 微信小程序实现音频文件播放进度的实例代码

    问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示. .wxml中(播放进度结构的代码): <view class="content-play-progress"> <text>{{play.currentTime}}</text> <view> <slider a

  • 微信小程序登录方法之授权登陆及获取微信用户手机号

    微信小程序登录方法之授权登陆及获取微信用户手机号

    目录 先看一下小程序的登陆流程 第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器. ​​​​​第二步,获取用户信息,点击事件,获取用户授权,用户同意后然后返回信息 ​​第三步,获取用户手机号 结束语 先看一下小程序的登陆流程 使用说明注意: 调用 auth.code2Session 接口,换取 用户唯一标识 OpenID . 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_k

  • 微信小程序中插入激励视频广告并获取收益(实例代码)

    最近微信小程序后台发送通知,小程序激励式视频广告组件日前已全量上线,也就是说大家可以在小程序中插入激励视频广告了,之前只允许小游戏可以使用 . 激励式视频广告 用户在小程序中主动触发激励式广告,并达成奖励下发标准(完整播放视频广告,并手动点击 "关闭广告" 按钮),将获得该小程序下发的奖励.广告触发场景与奖励内容均由流量主自定义. 新建广告位 首先进入小程序后台点击流量主,点击广告位管理,点击新建广告位,就可以新建所需要的广告了,目前有三种 banner,激励视频,插屏广告. 插入广告

  • 微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    微信小程序城市定位的实现实例（获取当前所在国家城市信息）

    前言 在微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 实现方法 微信小程序中并没有提供这样的API,但是没关系,有wx.getLocation()得到的经纬度作为基础就够了,其他的,我们可以使用其他第三方地图服务可以来实现,比如腾讯地图或百度地图的API. 以腾讯地图为例,我们可以去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key).

随机推荐