分类： API

AudioContext

AudioContext 实例，可通过 wx.createAudioContext 获取。

AudioContext 通过 id 跟一个 audio 组件绑定，操作对应的 audio 组件。

方法

AudioContext.setSrc(string src)

设置音频地址

AudioContext.play()

播放音频。

AudioContext.pause()

暂停音频。

AudioContext.seek(number position)

跳转到指定位置。

示例代码

<!-- 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 (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 () {
    this.audioCtx.play()
  },
  audioPause () {
    this.audioCtx.pause()
  },
  audio14 () {
    this.audioCtx.seek(14)
  },
  audioStart () {
    this.audioCtx.seek(0)
  }
})

Float32Array AudioBuffer.getChannelData(number channel)

微信小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

功能描述

返回一个 Float32Array，其中包含了带有频道的 PCM 数据，由频道参数定义（0 代表第一个频道）

参数

number channel

要获取特定通道数据的索引

返回值

Float32Array

示例代码

示例代码


const audioCtx = wx.createWebAudioContext()
const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
const nowBuffering = myArrayBuffer.getChannelData(channel);

AudioBuffer.copyToChannel(Float32Array source, number channelNumber, number startInChannel)

微信小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

功能描述

从指定数组中复制样本数据到 audioBuffer 的指定通道

参数

Float32Array source

需要复制的源数组

number channelNumber

需要复制到的目标通道编号

number startInChannel

复制的偏移数据量

示例代码

示例代码请参考 AudioBuffer.copyFromChannel

AudioBuffer.copyFromChannel()

微信小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

功能描述

从AudioBuffer的指定频道复制到数组终端。

示例代码

示例代码


const audioCtx = wx.createWebAudioContext()
wx.request({
  url: 'xx.mp3', // 音频 url
  responseType: 'arraybuffer',
  success: res => {
    audioCtx.decodeAudioData(res.data, audioBuffer => {
      const channels = audioBuffer.numberOfChannels;
      const frameCount = audioCtx.sampleRate * 2.0;
      const anotherArray = new Float32Array(frameCount);
      const rate = audioBuffer.sampleRate
      const startOffset = 0
      const endOffset = rate * 3;
      const newAudioBuffer = audioCtx.createBuffer(channels,endOffset - startOffset,rate)
      const offset = 0

      for (let channel = 0; channel < channels; channel++) {
        audioBuffer.copyFromChannel(anotherArray, channel, startOffset);
        console.log('copyFromChannel 成功')
        newAudioBuffer.copyToChannel(anotherArray, channel, offset);
      }
    }, err => {
      console.error('decodeAudioData fail', err)
    })
  }
})

AudioBuffer

基础库 2.19.0 开始支持，低版本需做兼容处理。

AudioBuffer 接口表示存在内存里的一段短小的音频资源，利用 WebAudioContext.decodeAudioData 方法从一个音频文件构建，或者利用 WebAudioContext.createBuffer 从原始数据构建。把音频放入 AudioBuffer 后，可以传入到一个 AudioBufferSourceNode 进行播放。

属性

number sampleRate

存储在缓存区的 PCM 数据的采样率（单位为 sample/s）

number length

返回存储在缓存区的 PCM 数据的采样帧率

number duration

返回存储在缓存区的 PCM 数据的时长（单位为秒）

number numberOfChannels

储存在缓存区的 PCM 数据的通道数

方法

Float32Array AudioBuffer.getChannelData(number channel)

返回一个 Float32Array，包含了带有频道的 PCM 数据，由频道参数定义（有 0 代表第一个频道）

AudioBuffer.copyFromChannel()

从 AudioBuffer 的指定频道复制到数组终端。

AudioBuffer.copyToChannel(Float32Array source, number channelNumber, number startInChannel)

从指定数组复制样本到 audioBuffer 的特定通道

微信小程序 wx.createAudioContext 创建音频上下文

从基础库 1.6.0 开始，本接口停止维护，请使用 wx.createInnerAudioContext 代替

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

功能描述

创建 audio 上下文 AudioContext 对象。

参数

string id

audio 组件的 id

Object this

在自定义组件下，当前组件实例的this，以操作组件内 audio 组件

返回值

AudioContext

微信小程序wx.createInnerAudioContext创建内部音频上下文

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

微信小程序插件：支持，需要微信小程序基础库版本不低于 1.9.6

微信 Windows 版：支持

微信 Mac 版：支持

微信 鸿蒙 OS 版：支持

功能描述

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

参数

Object object

属性 类型 默认值 必填 说明 最低版本
useWebAudioImplement boolean false 否 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项。 2.19.0

返回值

InnerAudioContext

注意事项

  • InnerAudioContext 音频资源不会自动释放，因此如果不再需要使用音频，请及时调用 InnerAudioContext.destroy() 释放资源，避免内存泄漏。

示例代码

const innerAudioContext = wx.createInnerAudioContext({
  useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
})
innerAudioContext.src = 'https://wx_test.mp3'

innerAudioContext.play() // 播放

innerAudioContext.pause() // 暂停

innerAudioContext.stop() // 停止

innerAudioContext.destroy() // 释放音频资源

微信小程序 wx.createMediaAudioPlayer()

基础库 2.13.0 开始支持，低版本需做兼容处理。

微信小程序插件：支持

功能描述

创建媒体音频播放器对象 MediaAudioPlayer 对象，可用于播放视频解码器 VideoDecoder 输出的音频。

返回值

MediaAudioPlayer

注意事项

  • iOS 7.0.15 mediaAudioPlayer 播放网络视频资源会出现音频卡顿，本地视频没有这个问题，将下一个客户端版本修复。

示例代码

  // 创建视频解码器，具体参数见 createVideoDecoder 文档
  const videoDecoder = wx.createVideoDecoder()
  // 创建媒体音频播放器
  const mediaAudioPlayer = wx.createMediaAudioPlayer()
  // 启动视频解码器
  videoDecoder.start()
  // 启动播放器
  mediaAudioPlayer.start().then(() => {
    // 添加播放器音频来源
    mediaAudioPlayer.addAudioSource(videoDecoder).then(res => {
      videoDecoder.getFrameData() // 建议在 requestAnimationFrame 里获取每一帧视频数据
      console.log(res)
    })

    // 移除播放器音频来源
    mediaAudioPlayer.removeAudioSource(videoDecoder).then()
    // 停止播放器
    mediaAudioPlayer.stop().then()
    // 销毁播放器
    mediaAudioPlayer.destroy().then()
    // 设置播放器音量
    mediaAudioPlayer.volume = 0.5
  })

完整demo（小游戏）

  • https://developers.weixin.qq.com/s/SF2duHmb7MjI

微信小程序 wx.createWebAudioContext()

基础库 2.19.0 开始支持，低版本需做兼容处理。

微信小程序插件：不支持

微信 Windows 版：支持

微信 Mac 版：支持

功能描述

创建 WebAudio 上下文。

返回值

WebAudioContext

示例代码

一个简单的播放demo


const audioCtx = wx.createWebAudioContext()

const loadAudio = (url) => {
  return new Promise((resolve) => {
    wx.request({
      url,
      responseType: 'arraybuffer',
      success: res => {
        console.log('res.data', res.data)
        audioCtx.decodeAudioData(res.data, buffer => {
          resolve(buffer)
        }, err => {
          console.error('decodeAudioData fail', err)
          reject()
        })
      },
      fail: res => {
        console.error('request fail', res)
        reject()
      }
    })
  })
}

const play = () => {
  loadAudio('xxx-test.mp3').then(buffer => {
    let source = audioCtx.createBufferSource()
    source.buffer = buffer
    source.connect(audioCtx.destination)
    source.start()
  }).catch(() => {
    console.log('fail')
  })
}

play()