微信小程序音频播放

星辰丶xing

已于 2024-05-22 15:36:04 修改

阅读量5k

点赞数 10

文章标签：微信小程序音视频

于 2024-05-22 15:35:29 首次发布

本文链接：https://blog.csdn.net/xingchen_xc/article/details/139067665

版权

📢 博客主页：星辰丶xing-CSDN博客

🎥 本文由星辰丶xing原创，首发于CSDN

🏅 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！

⭐ 以梦为马🦄，不负韶华❗

✨⭐🌟✨💫✨🌟⭐🌙

微信小程序播放音频有2种方式，一个是正常播放音频，一个是背景音频，这两个虽然都可以让音频进行播放，api也有很多相同的地方，但是还是有区别的，背景音频播放可以在锁屏的情况下，及小程序所有页面播放，正常的音频只能在当前页面播放。

一，音频播放

1，实现方法

wx.createInnerAudioContext({})
// 这里用到的是微信音频api,创建内部 audio 上下文 InnerAudioContext 对象

2，实现流程

1,首先创建音频上下文对象(这里以在onLoad创建展示并把audioCtx实例存储到data里面)
Page({
  data: {
    audioCtx: {}
  },
  onLoad() {
    const audioCtx = wx.createInnerAudioContext({})
    this.setData({
      audioCtx
    })
  },
})

2,创建完成之后进行使用(这里列举常用的一些属性,更多属性建议查询文档)
  playAudio() {
    // 这里也可以在调用这个方法的时候传参 然后这里接收赋值使用
    this.data.audioCtx.src = ''  // 音频路径
    this.data.audioCtx.autoplay = true   // 是否自动开始播放，默认为false
    this.data.audioCtx.loop = true  // 是否循环播放，默认为false
    this.data.audioCtx.volume = 1  // 音量。范围0~1。默认为 1
    this.data.audioCtx.currentTime = 100  // 当前音频的播放位置（单位 s）
    this.data.audioCtx.play()   // 播放音频
    this.data.audioCtx.pause()  // 暂停播放
    this.data.audioCtx.stop()  // 停止播放
    this.data.audioCtx.seek()  // 跳转的时间，单位秒,精确到小数点后3位，即支持ms级别精确度
    this.data.audioCtx.onPlay(() => {
      // 监听音频播放事件
    })
    this.data.audioCtx.offPlay(() => {
      // 移除音频播放事件
    })
    this.data.audioCtx.onPause(() => {
      // 监听音频暂停事件
    })
    this.data.audioCtx.offPause(() => {
      // 移除音频暂停事件
    })
    this.data.audioCtx.onStop(() => {
      // 监听音频停止事件