小程序添加音频

该代码示例展示了在uni-app中如何创建并控制内联音频播放,包括设置autoplay、src以及添加播放和错误事件监听器。同时,它包含了录音功能的实现,包括检查和请求录音权限,以及录音的开始、停止和上传操作。
摘要由CSDN通过智能技术生成

在这里插入图片描述

代码如下
引入
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = false;

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
innerAudioContext.onPlay(() => {
  console.log('开始播放');
});
innerAudioContext.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});
<view class="textarea-box" v-if="userInfo.remark.length>0">
<view >
<image class="play-icon"  @click="playAudio(1)" v-if="!isPlayAudio" :src="IMG_BASE_URL+'static/play-icon.png'"></image>
<image class="play-icon"  @click="playAudio(2)" v-else :src="IMG_BASE_URL+'static/pause-icon.png'"></image>
</view>
<view class="">
<view :class="'prompt-loader'">
<view :class="isPlayAudio?'em':'pause em'" v-for="(item,index) in 15" :key="index"></view>
</view>
</view>
<view ><image class="cu-tag" :src="IMG_BASE_URL+'static/del-img.png'" mode="aspectFill" @tap.stop="delAudio" ></image></view>
</view>
<!--  -->
<view :class="longPress == '1' ? 'record-layer' : 'record-layer1'">
<view  :class="longPress == '1' ? 'record-box' : 'record-box1'">
<view class="record-btn-layer">
<button class="record-btn" :class="longPress == '1' ? '' : 'record-btn-2'" :style="VoiceTitle != '松开手指,取消发送' && longPress != '1'?'background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);':'background-color: rgba(0, 0, 0, 0);color:white'">
<image :src="IMG_BASE_URL+'static/yy-icon.png'" mode=""></image>
<text>{{VoiceText}}</text>
</button>
</view>
<!-- 语音音阶动画 -->
<view :class="VoiceTitle != '松开手指,取消发送'?'prompt-layer prompt-layer-1':'prompt-layer1 prompt-layer-1'"  v-if="longPress == '2'">
<view class="prompt-loader">
<view class="em" v-for="(item,index) in 15" :key="index"></view>
</view>
<text class="span">{{VoiceTitle}}</text>
</view>
</view>
</view>
// 语音开始
		longpressBtn(e) {
				console.log(3333)
				this.isTouchEnd = false
				if(this.userInfo.remark.length>0) return
				let that = this
				uni.getSetting({
					success: (res) => {
						console.log('res.authSetting', res.authSetting['scope.record'],that.isOpenDialog);
						if(that.isOpenDialog) return
						if (!res.authSetting['scope.record']) {
							that.isOpenDialog = true
							uni.showModal({
								title: '授权提示',
								content: '检测到您未开启录音权限,是否去设置打开?',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											success(resp) {
												if(resp.authSetting['scope.record']){
													// 已开启
												}
											}
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								},
								complete:function(){
									console.log('complete');
									that.isOpenDialog = false
								},
							});
						}else{
				// 			console.log(444);
							// uni.authorize({
							// 	scope: 'scope.record',
							// 	success: (res) => {
							// 		console.log(123,res)
									if(this.isTouchEnd) return
									recorderManager.onStop((res) => {
										console.log(777);
										console.log(res);
										that.userInfo.remark = res.tempFilePath;
										console.log('888',that.userInfo.remark)
									})
									console.log(555,recorderManager);
									that.startPoint = e.touches[0];//记录长按时开始点信息,后面用于计算上划取消时手指滑动的距离。
									that.longPress = '2';
									that.VoiceText='说话中...';
									const options = {
										// duration: that.duration, // 指定录音的时长,单位 ms
										// sampleRate: 16000, // 采样率
										numberOfChannels: 1, // 录音通道数
										// encodeBitRate: 96000, // 编码码率
										format: 'mp3', // 音频格式,有效值 aac/mp3
										frameSize: 10, // 指定帧大小,单位 KB
									}
									recorderManager.start(options);
									// 监听音频开始事件
									that.sendLock = false;//长按时是不上锁的。
									recorderManager.onStart((res) => {
										console.log(1111222)
									})
							// 	},
							// 	fail: (res) => {
							// 		uni.showToast({
							// 			title: '喊话失败',
							// 			icon: 'none'
							// 		})
							// 	}
							// })
						}
					}
				})
			},
			// 长按松开录音事件
			touchendBtn() {
				console.log('end',recorderManager)
				this.isTouchEnd = true
				this.longPress = '1';
				this.VoiceText='按住 说话';
				this.VoiceTitle = '松手结束录音'
				recorderManager.onStop((res) => {
					console.log(this.sendLock);
					if (this.sendLock) {
					  //上锁不发送
					} else {//解锁发送,发送网络请求
					  if (res.duration < 1000)
							wx.showToast({
							  title: "录音时间太短",
							  icon: "none",
							  duration: 1000
							});
					   else {
							this.userInfo.remark = res.tempFilePath
							console.log('end',this.userInfo.remark)
							let that = this
							uni.showLoading({
								mask:true,
								title:'上传中...'
							})
							uni.uploadFile({
								url: WebApi.baseUrl + 'app/common/uploads',
								filePath: res.tempFilePath,
								name: 'files',
								header: {
									'Authorization': 'Bearer ' + CacheData.token
								},
								formData: {
									'module': '',
									'dir': ''
								},
								success: (res) => {
									let data = JSON.parse(res.data);
									if (data.code == 200) {
										that.userInfo.remark = data.urls
										innerAudioContext.src = data.urls
									} else {}
								},
								complete: () => {
									uni.hideLoading()
								}
							});
					   }
					}
				})
				
				// this.recordingTimer(this.time)
				recorderManager.stop();//结束录音
			},
			// 删除录音
			handleTouchMove(e) {
				//touchmove时触发
				var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 70) {
				// wx.showToast({
				//       title: "松开手指,取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				// console.log("松开手指,取消发送");
				this.VoiceTitle = "松开手指,取消发送";
				this.VoiceText='松开手指,取消发送';
				this.delBtn()
				this.sendLock = true;//触发了上滑取消发送,上锁
				} else {
				// wx.showToast({
				//       title: "正在录音,上划取消发送",
				//       icon: "none",
				//       duration: 60000
				// });
				this.VoiceTitle = "松手结束录音";
				this.VoiceText='松手结束录音';
				this.sendLock = false;//上划距离不足,依然可以发送,不上锁
				}
			},
			delBtn() {
				this.delShow = false;
				this.time = 0
				this.userInfo.remark = '';
				// this.VoiceTitle = '松手结束录音'
			},
			playAudio(type){
				if(type == 1){
					innerAudioContext.play();
					this.isPlayAudio = true
				}else{
					innerAudioContext.pause()
					this.isPlayAudio = false
				}
				innerAudioContext.onEnded(()=>{
					this.isPlayAudio = false
				})
				// console.log(this.isPlayAudio,2)
			},
		
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sunny

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值