小程序音频使用

最新推荐文章于 2023-07-29 23:32:14 发布

开发路上的AZhe

最新推荐文章于 2023-07-29 23:32:14 发布

阅读量434

点赞数

分类专栏：小程序（抖音，微信）

本文链接：https://blog.csdn.net/qq_43379916/article/details/106989381

版权

小程序（抖音，微信）专栏收录该内容

25 篇文章

订阅专栏

本文介绍了在微信小程序中处理音频的方法，由于audio组件从1.6.0版本不再维护，推荐使用wx.createInnerAudioContext接口。通过引用官方文档，详细讲解了如何利用InnerAudioContext进行音频操作。

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

第一种：
在界面创建audio组件，并附一个id属性

<!--fileSrc 判断文件路径是否存在   src  音频文件的路径-->
<view wx:if="{{fileArr.fileSrc}}">
	<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>
</view>

//js
//创建 audio 上下文 AudioContext 对象
 this.audioCtx = wx.createAudioContext('myAudio');
//赋值src
 that.audioCtx.setSrc(res.data[0].fileSrc)
//调用
 audioPlay() {
    this.audioCtx.play()
  },
  audioPause() {
    this.audioCtx.pause()
  },
  audio14() {
    this.audioCtx.seek(14)
  },
  audioStart() {
    this.audioCtx.seek(0)
  },

参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createAudioContext.html

但是audio从1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口（直接copy官方这段话）

所以就采用第二种wx.createInnerAudioContext
参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/media/audio/wx.createInnerAudioContext.html

/* 创建内部 audio 上下文 InnerAudioContext 对象 */
const myaudio = wx.createInnerAudioContext();
//赋值
myaudio.src="文件src路径";
//播放
myaudio.play();
//暂停
myaudio.pause();