微信小程序~wx.createInnerAudioContext的使用

最新推荐文章于 2025-03-28 09:43:58 发布

徐圣良

最新推荐文章于 2025-03-28 09:43:58 发布

阅读量3.1k

点赞数 6

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/qq_46568665/article/details/137998614

版权

前言

在微信小程序项目中遇到的需求是这样的，列表点击可播放音频内容且只能播放一个音频即：

点击列表1播放当前音频内容
点击列表2，播放列表2音频内容，同时停止列表1音频播放
…

微信小程序~wx.createInnerAudioContext

wx.createInnerAudioContext~功能描述:
创建内部 audio 上下文 InnerAudioContext 对象

const innerAudioContext = wx.createInnerAudioContext({
  useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
})
innerAudioContext.src = 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'

innerAudioContext.play() // 播放

innerAudioContext.pause() // 暂停

innerAudioContext.stop() // 停止

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

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

以上是微信小程序官方文档的基本介绍

实现

点击音频列表中某项拿到autioOption、audioUrl、index、id这些内容
在播放音频事件click_audio中接收这类值，同时获取循环数据列表
判断active是否进行播放
循环数据列表内容，根据id进行修改音频状态
this.setData进行数据同步返回并渲染
离开当前页时在onUnload生命周期中释放音频资源

let innerAudioContext = null;
Page({
  	data: {
    	list:[]
  	},
	onLoad(){
		innerAudioContext = wx.createInnerAudioContext();
	    innerAudioContext.onPlay((e)=>{//监听播放事件
	    })
	    innerAudioContext.onStop((e)=>{//监听停止事件
	    })
	    innerAudioContext.onPause(()=>{//监听暂停事件
	    })
	},
	click_audio:function(){
		let active = e.currentTarget.dataset.active;
    	let index = e.currentTarget.dataset.index;
    	let sound = e.currentTarget.dataset.sound;
    	let id = e.currentTarget.dataset.id;
    	let list = this.data.list;
    	if(active){
			this.setData({
        		['list['+ index + '].activeAudio']:false,
      		})
      		innerAudioContext.pause();
		}else{
			let newList = [];
      		list.forEach((item) => {
	        if(id == item.id){
	          item.autioOption=true;
	        } else{
	          item.autioOption=false;
	        } 
	        newList.push(item);
	      });
	      this.setData({
	        list:newList
	      });
	      innerAudioContext.src = sound;
	      innerAudioContext.play();
		}
	},
	onUnload(){
		// 页面销毁时执行
		let newList = [];
	    let list = this.data.list;
	    list.forEach((item) => {
	      item.autioOption=false;
	      newList.push(item);
	    });
	    this.setData({
	      list:newList
	    });
	    innerAudioContext.destroy();
	}
})

active/autioOption 当前是否播放音频状态
index 选中的音频内容下标
sound 选中的音频播放内容
id 音频的唯一标识

<view 
	wx:for="{{list}}" 
	wx:key="unique" 
	bindtap="click_audio" 
	data-active = "{{item.autioOption}}" 
	data-sound="{{item.audioUrl}}" 
	data-index="{{index}}" 
	data-id="{{item.id}}">
	//此处基本音频内容样式编写省略.......
</view>