uniapp小程序--录音功能

最新推荐文章于 2024-06-13 14:29:24 发布

Z_BL

最新推荐文章于 2024-06-13 14:29:24 发布

阅读量587

点赞数 2

文章标签： uni-app 小程序服务器

本文链接：https://blog.csdn.net/z_b_l/article/details/137454955

版权

文章详细描述了如何在基于UniApp的应用中实现录音功能，包括开始和停止录音、播放录音以及通过API上传录音文件。关键代码展示了如何使用官方提供的组件和方法来完成这些操作。

摘要由CSDN通过智能技术生成

关键代码

录音弹窗样式

<uni-popup ref="popup" type="bottom" background-color="#fff" @change="change">
  <view class="popup-content">
    <view class="audioBox">00:00</view>
    <view class="audios">
      {{audios}}
    </view>
    <view class="models">
      <view class="delAudio">
        取消
      </view>
      <view class="abtnBox">
        <button class="startBtn" @tap="startRecord" v-if="!audioStatus"></button>
        <button class="stopBtn" @tap="endRecord" v-if="audioStatus">
          <image src="../../static/stop.png" mode="widthFix"></image>
        </button>
      </view>
      <view class="delAudios">
        取消
      </view>
    </view>
    <!-- <button @tap="files">上传</button> -->
  </view>
</uni-popup>

部分css（时间久了css没加注释QAQ）：

<style>   
    .popup-content {
		padding: 20px;
	}

	.audioBox {
		width: 100%;
		padding: 30px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		color: #505050;
	}

	.audios {
		width: 100%;
		font-size: 14px;
		padding: 10px 0;
		color: #505050;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.startBtn {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: #FF6D4D;
	}

	.stopBtn {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.stopBtn>image {
		width: 100%;
	}

	.abtnBox {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px solid #FF6D4D;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>

关键实现代码

const imgInfo = reactive({
	imgs: ''
})
innerAudioContext.autoplay = true;    
const audios = ref('点击开始录音')
const player = ref(false)
const audioShow = ref(false)

const startRecord = () => {
		console.log('开始录音');
		audios.value = '正在录音'
		audioStatus.value = true
		player.value = false
		recorderManager.start({format:'mp3'});
		console.log(voicePath.value);
	}
	const endRecord = () => {
		console.log('录音结束');
		audios.value = '点击开始录音'
		audioStatus.value = false
		player.value = true
		recorderManager.stop();
		console.log(voicePath.value);
		
		recorderManager.onStop(function(res) {
			console.log('recorder stop' + JSON.stringify(res));
			voicePath.value = res.tempFilePath;
			files()
		});
		console.log(voicePath.value);
		
	}
	const playVoice = () => {
		console.log('播放录音');
		if (voicePath.value) {
			innerAudioContext.src = voicePath.value;
			innerAudioContext.play();
		}
		console.log(voicePath.value);
	}


const files = () => {
		console.log('上传');
		console.log(voicePath.value);
		uni.uploadFile({
			url: 'https://xxxxx/Fileimg/file', //仅为示例，并非真实接口地址。
			filePath: voicePath.value,
			name: 'file',
			formData: {
				'user': 'test',
			},
			success: function(res) {
				console.log(res.data);
				if(res.data.code == 1){
					console.log(res.data);
					imgInfo.imgs = JSON.parse(res.data)
					console.log(imgInfo.imgs.data.url);
					wx.showToast({
						title: '上传中',
						icon: 'loading',
						duration: 700
					})
					setTimeout(()=>{
						wx.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 700
						})
						audioShow.value = true
						popup.value?.close()
					},700)
				}else{
					wx.showToast({
						title: '网络错误',
						icon: 'error',
						duration: 100
					})
					audioShow.value = true
					popup.value?.close()
				}
				
			}
		});
	}

总结一下：主要实现靠官方提供的api，在官网查就有，本篇仅为本人日常所用技术的总结，不做教学（狗头）

ヾ(￣▽￣)Bye~Bye~