uniapp小程序实现录音 uniapp小程序长按录音点击播放等功能（CSS实现语音音阶动画效果）

最新推荐文章于 2023-07-21 15:56:00 发布

牵手相守

最新推荐文章于 2023-07-21 15:56:00 发布

阅读量2.6k

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/yangli_/article/details/127633834

版权

本文介绍如何使用uniapp开发微信小程序，实现长按录音、限制60秒内录制、点击播放和停止播放、长按删除及重新录制的功能。文章包括HTML、JS和CSS代码，并提供了一个包含CSS语音音阶动画效果的示例。

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

在这里插入图片描述

最近项目使用uniapp开发微信小程序，需要实现一个长按时进行语音录制，限制录制时间最大为60秒，录制完成后，可点击播放，播放时再次点击停止播放，录制完成长按实现删除功能，删除后又可重新录制（如上图所示）。

HTML部分

<template>
    <view class="record-layer">
    	<view class="record-box">
    		<view class="record-btn-layer" v-if="tempFilePath == ''">
    			<button class="record-btn" :class="longPress == '1' ? 'record-btn-1' : 'record-btn-2'"  @longpress="longpressBtn()" @touchend="touchendBtn()">
    				<image src="../../static/img/record-ico.png"/>
    				<text>{
  {longPress == '1' ? '按住说话' : '说话中...'}}</text>
    			</button>
    		</view>
    		<view class="record-btn-layer" v-else>
    			<button class="record-btn" @longpress="delShow = true" @click="playBtn()" :class="playStatus == '1' ? 'record-btn-2' : 'record-btn-1'">
    				<image src="../../static/img/scale-ico.png"/>
    				<text>{
  {playStatus == '1' ? (count+'s') : '点击播放'}}</text>
    			</button>
    		</view>
    		<!-- 语音音阶动画 -->
    		<view class="prompt-layer 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="p">{
  {'剩余：' + count + 's'}}</text>
    			<text class="span">松手结束录音</text>
    		</view>
    		<!-- 删除 -->
    		<view class="prompt-layer prompt-layer-2" v-if="delShow" @click.stop="delBtn()">
    			<text>删除</text>
    		</view>
    	</view>
    </view>
</template>

JS部分

<script>
	const recorderManager = uni.getRecorderManager()
    const innerAudioContext = uni.createInnerAudioContext()
	var init // 录制时长计时器
	var timer // 播放 录制倒计时
    export default {
   
        data() {
   
            return {
   
				count: null, // 录制倒计时
				longPress: '1', // 1显示 按住说话 2显示 说话中
				delShow: false, // 删除提示框显示隐藏
				time: 0, //录音时长
				duration: 60000, //录音最大值ms 60000/1分钟
				tempFilePath: '', //音频路径
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
            }
        },
        methods: {
   
			// 倒计时
			countdown(val){
   
				let _then = this;
				_then.count = Number(val);
				timer = setInterval(function() {
   
					if(_then.count > 0){
   
						_then.count--
					} else {
   
						_then.longPress = '1';
						clearInterval(timer);
					}
				}, 1000);
			},
			// 长按录音事件
			longpressBtn(){
   
				this.longPress = '2';
				this.countdown(60); // 倒计时
				clearInterval