微信小程序教程
7.3.7 音频组件控制
阅读(

微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

概述

网络

媒体

背景音播放管理

音乐播放控制

音频播放控制

录音管理

录音

图片

音频组件控制

wx.createAudioContext(audioId, this)

注意:1.6.0 版本开始,本接口不再维护。建议使用能力更强的wx.createInnerAudioContext接口

wx.createAudioContext(audioId, this) 方法创建并返回 audio 上下文audioContext对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内<audio/>组件

audioContext对象通过 audioId 跟一个<audio/>组件绑定,通过它可以操作对应的<audio/>组件。audioContext 对象的方法列表:

方法 参数 说明
setSrc src 音频的地址
play 播放
pause 暂停
seek position 跳转到指定位置,单位 s

示例代码:

<!-- audio.wxml -->
<audio  src="{{src}}" id="myAudio" ></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
// audio.js
Page({
  onReady: function (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')
    this.audioCtx.play()
  },
  data: {
    src: ''
  },
  audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
  },
  audio14: function () {
    this.audioCtx.seek(14)
  },
  audioStart: function () {
    this.audioCtx.seek(0)
  }
})

wx.createInnerAudioContext()

基础库 1.6.0 开始支持,低版本需做兼容处理

wx.createInnerAudioContext() 方法创建并返回内部 audio 上下文innerAudioContext对象。本接口是wx.createAudioContext升级版。

p>innerAudioContext 对象的属性列表:

属性 类型 说明 只读
src String 音频的数据链接,用于直接播放。
startTime Number 开始播放的位置(单位:s),默认 0
autoplay Boolean 是否自动开始播放,默认 false
loop Boolean 是否循环播放,默认 false
obeyMuteSwitch Boolean 是否遵循系统静音开关,当此参数为 false 时,即使用户打开了静音开关,也能继续发出声音,默认值 true
duration Number 当前音频的长度(单位:s),只有在当前有合法的 src 时返回
currentTime Number 当前音频的播放位置(单位:s),只有在当前有合法的 src 时返回,时间不取整,保留小数点后 6 位
paused Boolean 当前是是否暂停或停止状态,true 表示暂停或停止,false 表示正在播放
buffered Number 音频缓冲的时间点,仅保证当前播放时间点到此时间点内容已缓冲。

innerAudioContext 对象的方法列表:

方法 参数 说明
play 播放
pause 暂停
stop 停止
seek position 跳转到指定位置,单位 s
destroy 销毁当前实例
onCanplay callback 音频进入可以播放状态,但不保证后面可以流畅播放
onPlay callback 音频播放事件
onPause callback 音频暂停事件
onStop callback 音频停止事件
onEnded callback 音频自然播放结束事件
onTimeUpdate callback 音频播放进度更新事件
onError callback 音频播放错误事件
onWaiting callback 音频加载中事件,当音频因为数据不足,需要停下来加载时会触发
onSeeking callback 音频进行 seek 操作事件
onSeeked callback 音频完成 seek 操作事件

errCode 说明

errCode 说明
10001 系统错误
10002 网络错误
10003 文件错误
10004 格式错误
-1 未知错误

示例代码:

const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
innerAudioContext.onPlay(() => {
    console.log('开始播放')
})
innerAudioContext.onError((res) => {
    console.log(res.errMsg)
    console.log(res.errCode)
})

Bug & Tip

  1. tip:一个小程序内最多只能存在 5 个 innerAudio 实例**

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验