评论

小程序[InnerAudioContext]监听事件规则探索

小程序事件监听使用踩坑日记

结果

function loopVoice(srcs,maxtimes) {
  let secondIAC = wx.createInnerAudioContext()
  secondIAC.obeyMuteSwitch = false
  secondIAC.onError(() => {
    showToast({
      icon: 'none',
      title: '加载失败',
    })
  })
  let times = 0
  secondIAC.src = src[times]
  secondIAC.onPlay(() => {
    times++
  })
  secondIAC.onEnded(() => {
    if (times === maxtimes) {
      secondIAC.destroy()
    }
    secondIAC.src = src[times]
    secondIAC.play()
  })
  secondIAC.play()
}

起因

今天我在社区发了一个帖子小程序播放同一音频两次要怎么写?想要跟大家探讨一下怎么写好这个功能。目前还是0回复,大家快去抢沙发说出自己的想法(请注意回复质量)。

由于我对需求的错误理解,误以为要连续播放两次相同的音频,我踏上了探索之路。

经过与探索

在写网页脚本的过程中,时间监听是我非常喜欢的一系列接口(谁还没个特殊癖好呢),原因当然是因为这些事件一旦触发必有回应,让人觉得非常给力!

有一位前辈曾经指导过我,小程序里的种种功能不过是对网页接口的优化封装与扩充,往往在Web API中都有对应的功能存在,那么我们先来了解一下网页中的监听事件吧!

学习资料:

同一个 EventTarget 注册了多个相同的 EventListener,那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次,也不需要用 removeEventListener 手动清除多余的EventListener ,因为重复的都被自动抛弃了,前提是options中的capture的参数值一致,如果capture的值不一致,此时就算重复定义,也不会被抛弃掉。

// 改变t2的函数
function modifyTextPlus() {
  console.log("plus")
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    console.log('plus +1')
    t2.firstChild.nodeValue = "two";
  } else {
    console.log('plus -1')
    t2.firstChild.nodeValue = "three";
  }
}// 改变t2的函数
function modifyTextMinus() {
  console.log('minus')
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "one") {
    console.log('minus +1')
    t2.firstChild.nodeValue = "two";
  } else {
    console.log('minus -1')
    t2.firstChild.nodeValue = "one";
  }
}

// 为table添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", modifyTextPlus, false);
el.addEventListener("click", modifyTextMinus, false);

猜猜这段代码的执行结果是什么样呢?CodePen:点击查看答案

看完了Web API,我们来看一下小程序的API,此处以InnerAudioContext的接口为例。小程序:API文档

可以看到,InnerAudioContext的接口包含了一些基本的控制功能,此外还有一些看着就成双成对的功能函数(这年头代码都要喂狗粮),此处以onEnded和offEnded为例,他们分别代表“监听音频自然播放至结束的事件”和“取消监听音频自然播放至结束的事件”。

一开始呢,我是这样实现目标功能的:

  innerAudioContext.src = "xxxx"
  innerAudioContext.onEnded(() => {
    innerAudioContext.onPlay(() => {
      innerAudioContext.offEnded()
    })
    innerAudioContext.play() 
  })

  innerAudioContext.play()

想要用一个已经定义的全局变量不断得调用play方法来实现多次播放,但是一旦调用了offEnded()之后想重新添加onEnded()就不行了,这样导致了这段代码只能一次使用。

小程序的监听接口与Web API有一点相反,当我添加了多个监听事件后触发时它们都会执行回调。

写到这里我的探索也到了终点,因为终于发现是自己理解错了交互了!

点赞 2
收藏
评论

3 个评论

  • 明明
    明明
    2019-04-15

    innerAudioContext.onEnded( ()=> {

       //监听音频自然播放至结束的事件

     innerAudioContext.src = '新的音频地址'

    })

    innerAudioContext.onPlay( ()=> {

     //监听音频播放事件

    })



    2019-04-15
    赞同
    回复
  • 钟远平
    钟远平
    2019-04-11

    多看文档

    和哈

    2019-04-11
    赞同
    回复 1
    • 给窝一个口罩
      给窝一个口罩
      2019-04-11

      ??

      请问你这个引用的效果怎么输入的?

      2019-04-11
      回复
  • 可乐
    可乐
    2019-04-11

    大佬你好。最近在开发小程序 碰到了很多问题 可以请教一下吗 我QQ67491898

    2019-04-11
    赞同
    回复 1
    • 钟远平
      钟远平
      2019-04-11

      大佬没在

      2019-04-11
      回复
登录 后发表内容