uniapp使用uni.createInnerAudioContext()播放指定音频并且切换

旧城等待， 2024-04-01 11:57 95阅读 0赞

#### uniapp使用uni.createInnerAudioContext播放指定音频并且切换 ####

*  注意
 *  效果图
 *  主要代码
 *  放上所有的代码

## 注意 ##

[uniapp][] API 中 [uni.createInnerAudioContext()][uniapp]是无法多音频播放的 如果我们想同时播放 加上ambient（不中止其他声音播放，不能后台播放，静音后无声音）这个属性，我做的这个是用uniapp开发的一个安卓端的壳包，正常h5用MP3，WMA或者MPEG等格式的音频都是可以的，但在安卓端手机测试需要使用MP3格式的音频，否则会没有声音。

## 效果图 ##

![在这里插入图片描述][7efc23375a614da7b1efd5b0006ec9a1.png_pic_center]  
![在这里插入图片描述][62ba8e2febc24f1f81959d281b501d28.png_pic_center]

## 主要代码 ##

首先全局定义播放器

// 定义全局播放器
    var musicSelect = null;
    musicSelect = uni.createInnerAudioContext(); //创建时间选择播放器对象 选择时间播放机械声
    /*
      "ambient" - 不中止其他声音播放，不能后台播放，静音后无声音；
      "soloAmbient" - 中止其他声音播放，不能后台播放，静音后无声音；
      "playback" - 中止其他声音，可以后台播放，静音后有声音。
     */
    musicSelect.sessionCategory = "ambient"
    musicSelect.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3";
    
    var music = null;
    music = uni.createInnerAudioContext(); //创建雨林鸟播放器对象
    // music.sessionCategory = "ambient"
    music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";

这是我随便写的样式 点击对应文字切换

<view class="music" v-if="windowSteep>0&&isShowMusic">
      <view class="music-flex" v-for="(item, index) in musicList" :key="index" @click="musicClick(item, index)">
        <image class="music-img" :src="getMusic(item)" mode="widthFix"></image>
        <view class="yuanq" :class="{'yuanq-red': item.isPlay}"></view>
      </view>
    </view>

这是methods中的点击事件 点击播放和暂停

// 点击雨林鸟播放或者暂停音乐
    musicClick(item,index) {
        
      // isPlay控制是否选中的状态
      this.musicList.filter(e => {
        
        if(e.id !== item.id) {
        
          e.isPlay = false
        } else {
        
          e.isPlay = !e.isPlay
        }
      })
      music.src = item.music;
      // 如果isPaly为true则播放当前音乐 暂停其他音乐
      if(item.isPlay) {
        
        // 播放
        music.play()
        music.onEnded(() => {
        
          //播放结束 循环播放
          music.play()
        });
      } else {
        
        // 暂停
        music.pause()
      }
    			},

## 放上所有的代码 ##

<template>
    	<view class="pages" @click="windowClick">
    		<view v-if="!isShareShow" class="content animated">
    			<view @click="showCansel">
    				<image class="bg1" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/bj1.png" mode="aspectFit"></image>
    				<image class="bg2" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/bj2.png" mode="aspectFit"></image>
    				
    				<view class="icon" v-if="!isStart">
    					<u-icon name="list" color="#333333" size="28" @click="iconClick"></u-icon>
    				</view>
    				
    				<view class="sticks">
    					<view class="sticks-time" :style="'height:'+progress+'rpx'">
    						<template v-if="isStart">
    							<image class="vector" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yan.gif" mode="widthFix"></image>
    							<image class="light" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/Rectangle.gif" mode="aspectFit"></image>
    						</template>
    					</view>
    					<view class="sticks-end"></view>
    					<image class="group" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/Group.png"></image>
    				</view>
    			</view>
    			
    			<view class="time" :style="'marginTop:'+timeTop+'rpx'" >
    				<view class="t-width" @click="countClick" :class="{'animated fadeInDown': isStart,'animated fadeInUp': isCancel}">
    					<u-count-down
    						ref="countDown"
    						:time="time"
    						format="mm:ss"
    						:autoStart="false"
    						millisecond
    						@change="timeChange"
    					></u-count-down>
    				</view>
    			</view>
    			<view class="click-start" @click="openInfo" v-if="!isStart">
    				开始
    			</view>
    			<view class="click-start" @click="cancelInfo" v-if="isCancel">
    				放弃
    			</view>
    			
    			<u-picker
    				:show="show"
    				title="专注时长" 
    				ref="uPicker"
    				:columns="columns" 
    				@confirm="confirm"
    				@cancel="cancel"
    				@change="changeHandler"
    				confirmColor="#000000"
    				immediateChange
    			></u-picker>
    			<audio id="audio" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3"/>
    			
    			<left-menu ref="leftOpen" :userData="userData"></left-menu>
    			
    			<super-popup ref="superPopup" :userData="userData" @experience="openInfo"></super-popup>
    			
    			<view class="music" v-if="windowSteep>0&&isShowMusic">
    				<view class="music-flex" v-for="(item, index) in musicList" :key="index" @click="musicClick(item, index)">
    					<image class="music-img" :src="getMusic(item)" mode="widthFix"></image>
    					<view class="yuanq" :class="{'yuanq-red': item.isPlay}"></view>
    				</view>
    			</view>
    		</view>
    		
    		<view class="share animated" :class="{'fadeIn': isShareShow }" v-if="isShareShow">
    			<image class="image2" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/cha.png" @click="closedShare"></image>
    			<view style="height: 180rpx;"></view>
    			<view class="image" id="htmlCanvas">
    				<view class="canval-text">
    					<view class="yanyu">{
        {
        chanyu}}</view>
    				</view>
    				<view class="author">{
        {
        auther}}</view>
    				<view style="width: 361rpx;"></view>
    			</view>
    			
    			<image @click="renderScript.emitData" class="image3" src="https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/xiazai.png"></image>
    		</view>
    	</view>
    </template>
    
    <script>
    	import superPopup from '@/components/super-popup/super-popup.vue'
    	
    	// 定义全局播放器
    	var musicSelect = null;
    	musicSelect = uni.createInnerAudioContext(); //创建时间选择播放器对象 选择时间播放机械声
    	/*
    		"ambient" - 不中止其他声音播放，不能后台播放，静音后无声音；
    		"soloAmbient" - 中止其他声音播放，不能后台播放，静音后无声音；
    		"playback" - 中止其他声音，可以后台播放，静音后有声音。
    	 */
    	musicSelect.sessionCategory = "ambient"
    	musicSelect.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/trim.mp3";
    	
    	var music = null;
    	music = uni.createInnerAudioContext(); //创建雨林鸟播放器对象
    	// music.sessionCategory = "ambient"
    	music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";
    	
    	export default {
        
    		components: {
        
    			superPopup
    		},
    		data() {
        
    			return {
        
    				windowSteep:10,//窗口未点击事件数
    				windowTime:null,//窗口点击的时间
    				timeTop:154,//点击开始时间数字的上边距
    				timeTwo:null,//点击开始时间数字的动画
    				musicList: [
    					{
        
    						id: 1,
    						isPlay: true, //是否播放雨林鸟音乐
    						black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yu-black.png',
    						grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/yu-g.png',
    						music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3'
    					},
    					{
        
    						id: 2,
    						isPlay: false,
    						black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/lin-black.png',
    						grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/lin-g.png',
    						music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/lin-music.mp3'
    					},
    					{
        
    						id: 3,
    						isPlay: false, 
    						black: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/niao-black.png',
    						grey: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/niao-g.png',
    						music: 'https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/niao-music.mp3'
    					}
    				], //雨林鸟未播放图标地址
    				musicIndex: 0,
    				show: false,
    				columns: [
    					[5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105,110,115,120],
    					[
    					'00','01','02','03','04','05','06','07','08','09','10',
    					'11','12','13','14','15','16','17','18','19','20',
    					'21','22','23','24','25','26','27','28','29','30',
    					'31','32','33','34','35','36','37','38','39','40',
    					'41','42','43','44','45','46','47','48','49','50',
    					'51','52','53','54','55','56','57','58','59',]
    				],
    				minute: 0,
    				second: 0,
    				time: 900000, //展示的分钟和秒
    				indexs: [],
    				progress: 400, //进度条高度
    				isStart: false, //其他操作按钮是否隐藏
    				isShareShow: false, //下载图片页面 是否展示
    				isCancel: false, //放弃 按钮 是否显示
    				isShowMusic: false, //是否显示音乐按钮
    				chanyu: '',
    				auther: '',
    				id: '',
    				userData:{
        }
    			}
    		},
    		onShow(){
        
    			this.userData = uni.getStorageSync('userData')
    		},
    		onUnload() {
        
    			if(this.windowTime){
        
    				clearInterval(this.windowTime)
    			}
    		},
    		computed: {
        
    			/* 
    				@param {Number}  index 当前音乐索引 0代表'雨', 1'林', 2'鸟'
    				动态展示对应的文字的图片（已选择和未选择的音乐）
    			 */
    			getMusic() {
        
    				return (item) => {
        
    					if(item.isPlay) {
        
    						return item.black
    					} else {
        
    						return item.grey
    					}
    				}
    			}
    		},
    		methods: {
        
    			/*
    			如果windowSteep = 10表表示屏幕刚点击完的状态，
    			十秒之后音乐选择自动关闭，
    			如果屏幕点击则再次初始化为10，重新开始计时 
    			*/
    			windowClick(){
        
    				if(!this.isStart){
        
    					return
    				}
    				if(this.windowTime){
        
    					clearInterval(this.windowTime)
    				}
    				this.windowSteep = 10
    				this.windowTime = setInterval(()=>{
        
    					this.windowSteep--
    					if(this.windowSteep<=0){
        
    						clearInterval(this.windowTime)
    					}
    				},1000)
    			},
    			// 点击弹出时间选择
    			countClick() {
        
    				if(!this.isStart) {
        
    					this.show = true
    				}
    			},
    			// 点击屏幕
    			showCansel() {
        
    				// 如果时间开始倒数 点击屏幕则显示放弃按钮
    				if(this.isStart) {
        
    					this.timeTop = 154
    					this.isCancel = true
    				}
    			},
    			// 点击放弃按钮
    			cancelInfo() {
        
    				// this.time = 900000 //初始默认值
    				this.$refs.countDown.pause();
    				this.$refs.countDown.reset();
    				this.isShowMusic = false
    				music.pause()
    				
    				this.musicList[1].isPlay = false
    				this.musicList[2].isPlay = false
    				
    				this.isStart = false
    				this.isCancel = false
    				clearInterval(this.windowTime)
    			},
    			// 点击开始
    			openInfo(val){
        
    				if(uni.getStorageSync('token') === '') {
        
    					uni.showToast({
        
    						icon:"none",
    						title:"请先登录！"
    					})
    					setTimeout(() => {
        
    						uni.navigateTo({
        
    							url: '/pages/login/login'
    						})
    					},1000)
    					return
    				}
    				this.$http.get("/common/user/info").then(res=>{
        
    					uni.setStorageSync('userData',res.data)
    					this.userData = res.data
    				})
    				
    				// valid_end会员结束时间
    				let valid_end = new Date(this.userData.valid_end)
    				let date = new Date()
    				if(valid_end.getTime() < date.getTime() || !this.userData.valid_end){
        
    					// 弹出会员非会员弹窗  非体验
    					if(val != 'experience'){
        
    						this.$refs.superPopup.open()
    						return
    					}
    				}
    				
    				// 显示音乐按钮 并默认开始播放雨音效
    				this.musicList.filter(e => {
        
    					if(e.id === 1) {
        
    						e.isPlay = true
    					} else {
        
    						e.isPlay = false
    					}
    				})
    				this.isShowMusic = true
    				music.src = "https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/yu-music.mp3";
    				music.play()
    				music.onEnded(() => {
        
    					//播放结束 循环播放
    					music.play()
    				});
    				this.isStart = true
    				this.timeTop = 154
    				this.timeTwo = setInterval(()=>{
        
    					this.timeTop+=5
    					if(this.timeTop>=256){
        
    						clearInterval(this.timeTwo)
    					}
    				},20)
    				// this.windowClick()
    				this.$refs.countDown.start();
    			},
    			// 监听倒计时change
    			timeChange(e) {
        
    				// 计算百分比
    				let all = (e.hours * 60 * 60 * 1000) + (e.minutes * 60 * 1000) + (e.seconds * 1000)
    				let a = this.time;
    				let b = Number(all)/Number(a);
    				let c = b * 400
    				this.progress = c.toFixed()
    				if(this.progress == 0) {
        
    					this.isStart = false
    					this.isShareShow = true
    					this.time = 0
    					clearInterval(this.windowTime)
    					music.pause()
    					// 随机获取一条禅语
    					this.$http.get('/time/chanyu/random').then(res => {
        
    						if(res.code === 0) {
        
    							this.id = res.data.id
    							this.chanyu = res.data.content
    							this.auther = res.data.name
    							// 打卡完成
    							this.$http.post('/time/record/add', {
        
    								chan_id: this.id,
    								status: 3, //1-已开始 2-暂停 3-完成 4-取消
    								time: (this.minute * 60) + this.second
    							}).then(res => {
        
    								if(res.code !== 1) {
        
    									uni.showToast({
        
    										icon: 'error',
    										title: res.msg
    									})
    								}
    							})
    						} else {
        
    							uni.showToast({
        
    								icon: 'none',
    								title: res.msg
    							})
    						}
    					})
    				}
    			},
    			// 监听变化 播放音效
    			changeHandler(e) {
        
    				this.indexs = e.indexs
    				musicSelect.play(); //执行播放
    			},
    			// 回调参数为包含columnIndex,value,values
    			confirm(e) {
        
    				musicSelect.pause()
    				this.minute = e.value[0]
    				this.second = Number(e.value[1])
    				this.time = (this.minute * 60 * 1000) + (this.second * 1000)
    				this.show = false
    			},
    			cancel() {
        
    				musicSelect.pause()
    				this.show = false
    			},
    			// 左侧菜单栏弹出
    			iconClick() {
        
    				this.$refs.leftOpen.open()
    			},
    			// 关闭图片展示
    			closedShare() {
        
    				this.timeTop = 154
    				this.progress = 400
    				this.isShareShow = false
    				this.isCancel = false
    				this.isShowMusic = false
    				music.pause()
    				// this.time = 900000 //初始默认值
    				this.time = (this.minute * 60 * 1000) + (this.second * 1000)
    				
    				this.$http.get("/common/user/info").then(res=>{
        
    					uni.setStorageSync('userData',res.data)
    					this.userData = res.data
    				})
    			},
    			// 画出图片并保存到本地相册
    			receiveRenderData(val) {
        
    				uni.showLoading({
        
    					title:"下载中"
    				})
    				let that=this
    				let base64 = val
    				const bitmap = new plus.nativeObj.Bitmap("test");
    				bitmap.loadBase64Data(base64, function() {
        
    					const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
    					bitmap.save(url, {
        
    						overwrite: true,  // 是否覆盖
    						// quality: 'quality'  // 图片清晰度
    					}, (i) => {
        
    						uni.saveImageToPhotosAlbum({
        
    							filePath: i.target,
    							success: function() {
        
    								uni.hideLoading()
    								uni.showToast({
        
    									title: '图片保存成功',
    									icon: 'none'
    								})
    								bitmap.clear()
    							}
    						});
    					}, (e) => {
        
    						uni.hideLoading()
    						uni.showToast({
        
    							title: '图片保存失败',
    							icon: 'none'
    						})
    						bitmap.clear()
    					});
    				}, (e) => {
        
    					uni.hideLoading()
    					uni.showToast({
        
    						title: '图片保存失败',
    						icon: 'none'
    					})
    					bitmap.clear()
    				});
    			},
    			// 点击雨林鸟播放或者暂停音乐
    			musicClick(item,index) {
        
    				// isPlay控制是否选中的状态
    				this.musicList.filter(e => {
        
    					if(e.id !== item.id) {
        
    						e.isPlay = false
    					} else {
        
    						e.isPlay = !e.isPlay
    					}
    				})
    				music.src = item.music;
    				// 如果isPaly为true则播放当前音乐 暂停其他音乐
    				if(item.isPlay) {
        
    					// 播放
    					music.play()
    					music.onEnded(() => {
        
    						//播放结束 循环播放
    						music.play()
    					});
    				} else {
        
    					// 暂停
    					music.pause()
    				}
    			},
    		}
    	}
    </script>
    <script module="renderScript" lang="renderjs">
    	import html2canvas from '@/util/html2canvas.js';
    	export default {
        
    		data() {
        
    			return {
        
    				
    			}
    		},
    		mounted() {
        },
    		methods: {
        
    			// 发送数据到逻辑层
    			emitData(e, ownerVm) {
        
    				const dom = document.getElementById('htmlCanvas')
    				html2canvas(dom, {
        
    					width: dom.clientWidth, //dom 原始宽度
    					height: dom.clientHeight,
    					scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
    					scrollX: 0,
    					dpi:300,
    					useCORS: true, //支持跨域，但好像没什么用
    					allowTaint: false
    				}).then((canvas) => {
        
    					// 将生产的canvas转为base64图片3
    					ownerVm.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
    				});
    
    			}
    		}
    	};
    </script>
    <style lang="scss" scoped>
    	.pages{
        
    		height: 100vh;
    		overflow: hidden;
    	}
    	.hidden {
        
    		display:none
    	}
    	.content {
        
    		// position: relative;
    		// margin: 0;
    		height: 100vh;
    		position: absolute;
    		left: 0;
    		right: 0;
    	}
    	.bg1 {
        
    		position: absolute;
    		top: 0;
    		right: 0;
    	}
    	.bg2 {
        
    		position: absolute;
    		height: 1000rpx;
    		left: 0;
    		bottom: 0;
    		z-index: 0;
    	}
    	.icon {
        
    		position: absolute;
    		top: 90rpx;
    		left: 50rpx;
    		z-index: 99;
    	}
    	.sticks {
        
    		position: relative;
    		height: calc(100vh - 450rpx);
    		.sticks-time {
        
    			position: absolute;
    			left: 50%;
    			bottom: 136rpx;
    			transform: translate(-50%);
    			
    			height: 400rpx;
    			width: 12rpx;
    			background: #000000;
    			border-radius: 90rpx;
    			z-index: 20;
    			.vector {
        
    				position: absolute;
    				top: -260rpx;
    				left: 50%;
    				transform: translate(-62%);
    				
    				width: 172rpx;
    				height: 452rpx;
    				z-index: 30;
    			}
    			.light {
        
    				position: absolute;
    				top: -18rpx;
    				width: 12rpx;
    				height: 20rpx;
    				z-index: 30;
    			}
    		}
    		.sticks-end {
        
    			position: absolute;
    			left: 50%;
    			bottom: 0;
    			transform: translate(-50%);
    			
    			width: 4rpx;
    			height: 150rpx;
    			background: #333333;
    			border-radius: 90rpx;
    			z-index: 10;
    		}
    		.group {
        
    			position: absolute;
    			left: 50%;
    			bottom: -76rpx;
    			transform: translate(-50%);
    			
    			width: 354rpx;
    			height: 144rpx;
    		}
    	}
    	.time {
        
    		position: relative;
    		z-index: 99;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		margin-top: 156rpx;
    		.t-width {
        
    			width: 300rpx;
    		}
    	}
    	.m-t-264 {
        
    		margin-top: 264rpx;
    	}
    	.m-t-156 {
        
    		margin-top: 156rpx;
    	}
    	/deep/ .u-count-down .u-count-down__text{
        
    		font-style: normal;
    		font-weight: 900;
    		font-size: 60rpx;
    		line-height: 48rpx;
    		text-align: center;
    		letter-spacing: 0.2em;
    		color: #000000;
    	}
    	.click-start {
        
    		margin: 0 auto;
    		text-align: center;
    		
    		font-style: normal;
    		font-weight: 400;
    		font-size: 32rpx;
    		line-height: 48rpx;
    		letter-spacing: 0.2em;
    		color: #FFFFFF;
    		
    		background-position: 36rpx;
    		background-image: url('https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/start-bg.png');
    		background-size: 419rpx 80rpx;
    		width: 419rpx;
    		height: 80rpx;
    		background-repeat: no-repeat;
    		padding-top: 10rpx;
    		margin-top: 60rpx;
    		position: relative;
    		z-index: 50;
    	}
    	.share {
        
    		height: 100vh;
    		// box-sizing: border-box;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		// position: absolute;
    		// z-index: 999;
    		.image {
        
    			width: 722rpx;
    			height: 552rpx;
    			
    			padding: 90rpx 76rpx 38rpx;
    			box-sizing: border-box;
    			
    			background: url('https://majia-time-app.oss-cn-hangzhou.aliyuncs.com/img/crad_img.png');
    			background-size: 100% 100%;
    			
    			box-shadow: 0 6rpx 13rpx 0 rgba(0,0,0,0.08);
    			position: relative;
    		}
    		.m-t-88 {
        
    			margin-top: 162rpx;
    		}
    		.image2 {
        
    			position: absolute;
    			top: 60rpx;
    			right: 40rpx;
    			width: 44rpx;
    			height: 44rpx;
    		}
    		.image3 {
        
    			position: absolute;
    			left: 50%;
    			bottom: 150rpx;
    			transform: translate(-50%);
    			width: 132rpx;
    			height: 132rpx;
    		}
    		.canval-text {
        
    			width: 361rpx;
    			
    			font-size: 32rpx;
    			font-weight: 900;
    			color: #414141;
    			line-height: 50rpx;
    			writing-mode:vertical-lr;
    			letter-spacing: 4rpx;
    			
    			.yanyu {
        
    				height: 220rpx;
    			}
    		}
    		.author {
        
    			font-size: 32rpx;
    			font-weight: 900;
    			color: #414141;
    			line-height: 50rpx;
    			writing-mode:vertical-lr;
    			letter-spacing: 6rpx;
    			
    			position: absolute;
    			bottom: 36rpx;
    			right: 53%;
    		}
    	}
    	.music {
        
    		position: absolute;
    		right: 0;
    		bottom: 50%;
    		transform: translate(-50%);
    		height: 214rpx;
    		
    		display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		.w-picker-view{
        
    			width: 100rpx;
    		}
    		.music-flex {
        
    			display: flex;
    			align-items: center;
    			.music-img {
        
    				width: 36rpx;
    				height: 36rpx;
    			}
    		}
    		.yuanq {
        
    			margin-left: 14rpx;
    			width: 19rpx;
    			height: 19rpx;
    			background: #FFFFFF;
    			border-radius: 50%;
    			
    			border: 2rpx solid #EDEDED;
    		}
    		.yuanq-red {
        
    			border: 2rpx solid #C24229;
    		}
    	}
    </style>
    <style>
    	page {
        
    		position: relative;
    		background: #EAEAEA;
    	}
    </style>

[uniapp]: https://uniapp.dcloud.net.cn/api/media/audio-context.html#createinneraudiocontext
[7efc23375a614da7b1efd5b0006ec9a1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/2aaf6df60dd64bd2bc75e11adf01c920.png
[62ba8e2febc24f1f81959d281b501d28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9d649ffe01784584804ba6fc9e69a24a.png