小程序开发API之音频 InnerAudioContext

版权声明:欢迎转载,可Chat交流,写博不易请标明出处: https://blog.csdn.net/JackJia2015/article/details/86712533

旧API:wx.playVoice、wx.pauseVoice、wx.stopVoice、wx.createAudioContext但依然可以使用,为了更好地兼容性请使用 wx.createInnerAudioContext代替

wx.playVoice(Object object)

开始播放语音。同时只允许一个语音文件正在播放,如果前一个语音文件还没播放完,将中断前一个语音播放。本接口停止维护,请使用 wx.createInnerAudioContext 代替
playVoice参数在这里插入图片描述

wx.pauseVoice(Object object)

暂停正在播放的语音。再次调用 wx.playVoice 播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用 wx.stopVoice。本接口停止维护,请使用 wx.createInnerAudioContext 代替
pauseVoice参数在这里插入图片描述

wx.stopVoice(Object object)

结束播放语音。本接口停止维护,请使用 wx.createInnerAudioContext 代替

stopVoice参数在这里插入图片描述

wx.createAudioContext(string id, Object this)

创建 audio 上下文 AudioContext 对象。
参数string id
组件的 id

Object this
在自定义组件下,当前组件实例的this,以操作组件内 组件
返回值
AudioContext

AudioContext

AudioContext 实例,可通过 wx.createAudioContext 获取。
audioContext 通过 id 跟一个 组件绑定,操作对应的 组件。

方法

AudioContext.setSrc(string src)
设置音频地址
string src
音频地址

AudioContext.play()
播放音频。

AudioContext.pause()
暂停音频。

AudioContext.seek(number position)
跳转到指定位置。
跳转位置,单位 s

旧音频API示例
效果展示


在这里插入图片描述

代码
index.wxml

<audio   
  poster="http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000"
  name="此时此刻"
  author="许巍"
  id="myAudio"
  controls
  loop>
</audio>

<button type="primary" bindtap="btnClick1">AudioContext.play()播放</button>
<button type="primary" bindtap="btnClick2">.pause()暂停</button>
<button type="primary" bindtap="btnClick3">.seek(number position)跳转到指定位置</button>
<button type="primary" bindtap="btnClick4">录音播放</button>
<button type="primary" bindtap="btnClick5">wx.playVoice()</button>
<button type="primary" bindtap="btnClick6">wx.pauseVoice()</button>
<button type="primary" bindtap="btnClick7">wx.stopVoice()</button>

index.wxss

button{
  margin: 20rpx;
  font-size: 30rpx;
}
audio{
  margin-left: 60rpx;
}

index.js

Page({
  data: {
    tempFilePath:''
  },
  //自定义提示框
  alertView: function(text){
    wx.showToast({
      title: text,
      icon:'none'
    })
  },
  onReady(e) {
    //使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
    this.audioCtx.setSrc('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46')
  },
  //AudioContext.play()播放
  btnClick1:function(){
    this.audioCtx.play() 
  },
  //AudioContext.pause()
  btnClick2: function () {
    this.audioCtx.pause()
  },
  //AudioContext.seek(number position)
  btnClick3: function () {
    this.audioCtx.seek(14)
  },
  //wx.playVoice()
  btnClick4: function () {
    var that = this
    wx.startRecord({
      success(res) {
        that.setData({
          tempFilePath: res.tempFilePath
        })
      }
    })
    setTimeout(function () {
      wx.stopRecord() // 结束录音
    }, 10000)
  },
  //
  btnClick5: function () {
    //播放录音
    wx.playVoice({
      filePath: this.data.tempFilePath,
    })
  },
  //wx.pauseVoice()暂停播放录音
  btnClick6: function () {
    wx.pauseVoice()
  },
  //wx.stopVoice()停止播放录音
  btnClick6: function () {
    wx.stopVoice()
  }
})

下面说新的API

wx.setInnerAudioOption(Object object)

设置 InnerAudioContext 的播放选项。设置之后对当前小程序全局生效。
setInnerAudioOption参数
在这里插入图片描述

示例代码

wx.setInnerAudioOption({
      mixWithOther: true,//是否与其他音频混播,设置为 true 之后,不会终止其他应用或微信内的音乐
      obeyMuteSwitch: false,//(仅在 iOS 生效)是否遵循静音开关,设置为 false 之后,即使是在静音模式下,也能播放声音
      success: function (e) {
        console.log(e)
        console.log('play success')
      },

      fail: function (e) {
        console.log(e)
        console.log('play fail')
      }
    })

wx.getAvailableAudioSources(Object object)

获取当前支持的音频输入源
getAvailableAudioSources参数在这里插入图片描述

object.success 回调函数 参数 res在这里插入图片描述

res.audioSources 的合法值在这里插入图片描述

示例代码(必须真机)

wx.getAvailableAudioSources({
      success: function (res) {
        console.log(res.audioSources)
      },
      fail: function (e) {
        console.log(e)
      }
    })

打印结果:

[“buildInMic”]

wx.createInnerAudioContext()

创建内部 audio 上下文 InnerAudioContext 对象。
返回值
InnerAudioContext

InnerAudioContext

InnerAudioContext 实例,可通过 wx.createInnerAudioContext 接口获取实例。

属性

string src
音频资源的地址,用于直接播放。2.2.3 开始支持云文件ID

number startTime
开始播放的位置(单位:s),默认为 0

boolean autoplay
是否自动开始播放,默认为 false

boolean loop
是否循环播放,默认为 false

boolean obeyMuteSwitch
是否遵循系统静音开关,默认为 true。当此参数为 false 时,即使用户打开了静音开关,也能继续发出声音。从 2.3.0 版本开始此参数不生效,使用 wx.setInnerAudioOption 接口统一设置。

number volume
音量。范围 0~1。默认为 1

number duration
当前音频的长度(单位 s)。只有在当前有合法的 src 时返回(只读)

number currentTime
当前音频的播放位置(单位 s)。只有在当前有合法的 src 时返回,时间保留小数点后 6 位(只读)

boolean paused
当前是是否暂停或停止状态(只读)

number buffered
音频缓冲的时间点,仅保证当前播放时间点到此时间点内容已缓冲(只读)

方法

InnerAudioContext.play()
播放

InnerAudioContext.pause()
暂停。暂停后的音频再播放会从暂停处开始播放

InnerAudioContext.stop()
停止。停止后的音频再播放会从头开始播放。

InnerAudioContext.seek(number position)
跳转到指定位置
number position
跳转的时间,单位 s。精确到小数点后 3 位,即支持 ms 级别精确度

InnerAudioContext.destroy()
销毁当前实例

InnerAudioContext.onCanplay(function callback)
监听音频进入可以播放状态的事件。但不保证后面可以流畅播放
function callback
音频进入可以播放状态的事件的回调函数

InnerAudioContext.offCanplay(function callback)
取消监听音频进入可以播放状态的事件
function callback
音频进入可以播放状态的事件的回调函数

InnerAudioContext.onPlay(function callback)
监听音频播放事件
function callback
音频播放事件的回调函数

InnerAudioContext.offPlay(function callback)
取消监听音频播放事件
function callback
音频播放事件的回调函数

InnerAudioContext.onPause(function callback)
监听音频暂停事件
function callback
音频暂停事件的回调函数

InnerAudioContext.offPause(function callback)
取消监听音频暂停事件
function callback
音频暂停事件的回调函数

InnerAudioContext.onStop(function callback)
监听音频停止事件
function callback
音频停止事件的回调函数

InnerAudioContext.offStop(function callback)
取消监听音频停止事件
function callback
音频停止事件的回调函数

InnerAudioContext.onEnded(function callback)
监听音频自然播放至结束的事件
function callback
音频自然播放至结束的事件的回调函数

InnerAudioContext.offEnded(function callback)
取消监听音频自然播放至结束的事件
function callback
音频自然播放至结束的事件的回调函数

InnerAudioContext.onTimeUpdate(function callback)
监听音频播放进度更新事件
function callback
音频播放进度更新事件的回调函数

InnerAudioContext.offTimeUpdate(function callback)
取消监听音频播放进度更新事件
function callback
音频播放进度更新事件的回调函数

InnerAudioContext.onError(function callback)
监听音频播放错误事件
function callback
音频播放错误事件的回调函数
参数 Object res在这里插入图片描述

errCode 的合法值在这里插入图片描述

InnerAudioContext.offError(function callback)
取消监听音频播放错误事件
function callback
音频播放错误事件的回调函数

InnerAudioContext.onWaiting(function callback)
监听音频加载中事件。当音频因为数据不足,需要停下来加载时会触发
function callback
音频加载中事件的回调函数

InnerAudioContext.offWaiting(function callback)
取消监听音频加载中事件
function callback
音频加载中事件的回调函数

InnerAudioContext.onSeeking(function callback)
监听音频进行跳转操作的事件
function callback
音频进行跳转操作的事件的回调函数

InnerAudioContext.offSeeking(function callback)
取消监听音频进行跳转操作的事件
function callback
音频进行跳转操作的事件的回调函数

InnerAudioContext.onSeeked(function callback)
监听音频完成跳转操作的事件
function callback
音频完成跳转操作的事件的回调函数

InnerAudioContext.offSeeked(function callback)
取消监听音频完成跳转操作的事件
function callback
音频完成跳转操作的事件的回调函数

支持格式在这里插入图片描述

示例:
效果展示


在这里插入图片描述

代码
index.wxml

<button type="primary" bindtap="btnClick1">播放</button>
<button type="primary" bindtap="btnClick2">暂停</button>
<button type="primary" bindtap="btnClick3">停止</button>

index.wxss

button{
  margin: 20rpx;
  font-size: 30rpx;
}

index.js

Page({
  data: {
  },
  onReady(e) {
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.autoplay = true
    this.innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
    this.innerAudioContext.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },
  //播放
  btnClick1:function(){
    this.innerAudioContext.play()
  },
  //暂停
  btnClick2: function () {
    this.innerAudioContext.pause()
  },
  //停止
  btnClick3: function () {
    this.innerAudioContext.stop()
  }
})





猜你喜欢

转载自blog.csdn.net/JackJia2015/article/details/86712533