小程序api-innerAudioContext的使用

最新推荐文章于 2025-01-02 09:59:08 发布

云城雪华

最新推荐文章于 2025-01-02 09:59:08 发布

阅读量836

点赞数

原文链接：https://blog.youkuaiyun.com/weixin_40486544/article/details/82808223

版权

本文详细介绍如何在微信小程序中使用innerAudioContext组件控制音频播放，包括设置源文件、自动播放、监听播放状态及错误处理等关键步骤。通过具体代码示例，帮助开发者快速掌握音频播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

innerAudioContext的使用

因为官方文档中innerAudioContext直接复制使用可能会有问题，这里应该将const innerAudioContext = wx.createInnerAudioContext()放到Page外面。其他放到onLoad函数中。

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

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>

// audio.js


const innerAudioContext = wx.createInnerAudioContext()

Page({
  data: {
    src: ''
  },
  onLoad:function(options){
    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)
    })
  
    innerAudioContext.onPause(
      () =>{
        console.log('停止播放')
      }
    )
  }
    
  ,

  audioPlay: function () {
    innerAudioContext.play()
  },
  audioPause:function(){
    innerAudioContext.pause()
  }
  

})