使用uniapp制作录音功能(VUE3)

ops/2024/11/15 0:39:51/

       制作录音功能需要用到uniapp中API uni.getRecorderManager()  获取全局唯一的录音管理器recorderManager,然后就能够开始进行录音,播放。具体方法可以去uniapp官网上查看。

代码实现:

1、在html中添加按钮、点击弹出弹窗:

				<view class=""style="width: 50%;display: flex;justify-content: center;align-items: center;font-size: 20px;height:60px;"@click="showaPopup('bottom')">添加录音</view>		
<!-- 录音弹窗弹窗 --><wd-popup ref="audioPopup" background-color="#fff" v-model="show" position="bottom"><view style="width: 100%;padding-top: 40rpx;display: flex;flex-wrap: wrap;justify-content: center;padding-bottom: 20px;"><audio :src="audioUrl" v-show="audioUrl != ''" controls name="病患说明"></audio><view class="audio_func" style="width: 100%;text-align: center;"><view class="" style="height: 80px;line-height: 80px;display: flex;justify-content: center;align-items: center;"><uv-icon name="pause-circle" color="#2979ff" size="56" @click="stopRecording"v-if="audioStatus"></uv-icon><uv-icon name="play-circle" color="#2979ff" size="56" @click="startRecording" v-else></uv-icon></view><text class="record_time"style="width: 50px;height: 30px;line-height: 30px;">{{formattedDuration}}</text><view class=""style="width: 80%;margin-left: 10%;display: flex;justify-content: space-between;height: 40px;align-items: center;"><!-- <view style="line-height: 3;color: #ff4242;width: 60px;" @click="resetRecording()">重置</view> --><uv-button type="error" text="重置" @click="resetRecording()"></uv-button><uv-button type="primary" text="上传" @click="onClosea()"></uv-button><!-- <view style="line-height: 3;color: #8f8f8f;width: 60px;" @click="onClosea()">上传</view> --></view></view></view></wd-popup>

这里用到的组件是Wot Design uni

2、事件:

	const recorderManager = ref(null);const duration = ref(0);// 音频时间const timer = ref(null);// 状态const audioStatus = ref(false);// 音频地址const audioUrl = ref("");// 重置const reset = ref(false);// 打开录音弹窗const show = ref(false)const showaPopup = (type) => {show.value = true}// 上传录音弹窗const onClosea = () => {if (audioUrl.value == '') {uni.showToast({title: '请输传入录音',icon: 'none'});return}show.value = false}// 监听录音状态变化  const handleStart = () => {console.log('录音开始');audioStatus.value = true;duration.value = 0;if (timer.value) clearInterval(timer.value);timer.value = setInterval(() => {duration.value++;}, 1000);};// 监听录音停止  const handleStop = (res) => {console.log('录音停止', res.tempFilePath);if (!reset.value) {audioUrl.value = res.tempFilePath;} else {audioUrl.value = '';}audioStatus.value = false;if (timer.value) clearInterval(timer.value);};// 开始录音  const startRecording = () => {recorderManager.value = uni.getRecorderManager();recorderManager.value.start({format: 'mp3'});recorderManager.value.onStart(handleStart);recorderManager.value.onStop(handleStop);};// 停止录音  const stopRecording = () => {reset.value = false;duration.value = 0;if (recorderManager.value) recorderManager.value.stop();};// 重置录音  const resetRecording = () => {if (recorderManager.value) recorderManager.value.stop();reset.value = true;audioUrl.value = '';duration.value = 0;};// 格式化录音时长  const formattedDuration = computed(() => {let minutes = Math.floor(duration.value / 60);let seconds = duration.value % 60;return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;});

这里使用的语法主要是vue3的,主要流程为点击添加音频弹出弹窗,然后点击开始即可开始录音,点击重置将之前的录音地址删除,并清除路由实例。

拜拜ヾ(•ω•`)o


http://www.ppmy.cn/ops/105252.html

相关文章

Go 服务调试精解

生产环境总是会遇到一些奇怪的问题,比如 Go 服务时不时地响应非常慢甚至完全没有响应,Go 服务的内存占用总是居高不下等。遇到这些问题该如何排查与分析呢?Go 语言其实为我们提供了一些非常有用的工具,如 ppprof、Trace,这两种工具可以帮助我们分析和解决 Go 服务的性能问题…

Kafka简单搭建及常用命令

一、Kafka的服务搭建 1. 安装包下载 这里我下载的是目前最新的版本&#xff0c;在3.X版本及之后的版本中&#xff0c;Kafka已经移除了Zookeeper的强依赖&#xff0c;虽然依旧支持以Zookeeper的方式启动&#xff0c;但本文仅介绍无Zookeeper的启动方式&#xff0c;即kraft模式。…

住宅IP与机房IP:哪种更适合业务应用?

在当前的互联网业务环境中&#xff0c;选择适当的IP地址类型对于确保业务的高效、稳定运行至关重要。住宅IP和机房IP作为两种常见的IP类型&#xff0c;各自具有独特的特点和适用场景。本文将从多个维度对比住宅IP与机房IP&#xff0c;以探讨哪种类型更适合业务应用。 一、定义…

LuaJit分析(六)luajit -bl 命令分析

Luajit -bl命令用于将luajit字节码文件或者lua脚本文件反汇编&#xff0c;输出汇编指令&#xff0c;很好奇怎么将字节码文件和lua脚本文件放在一块处理的&#xff0c;下面一步步分析&#xff1a; luajit虚拟机由luajit.c文件生成&#xff0c;首先定位到main函数&#xff0c;代…

解放你的带宽和内存:GZIP在解决Redis大Key方面的应用

首发公众号&#xff1a;赵侠客 引用 目前主流HTTP协议接口都是使用JSON格式做数据交换的&#xff0c;JSON数据格式有着结构简单、可读性高、跨平台&#xff0c;易解析等优点&#xff0c;同时也存在着冗余数据会占用非常多的储存空间的问题&#xff0c;这大大增加了JSON格式数据…

C++ | Leetcode C++题解之第389题找不同

题目&#xff1a; 题解&#xff1a; class Solution { public:char findTheDifference(string s, string t) {int ret 0;for (char ch: s) {ret ^ ch;}for (char ch: t) {ret ^ ch;}return ret;} };

生活方式对人健康影响非常大 第三篇

身体健康因素中 生活方式占到60% 赶紧去调整自己哪错了 上游的生活方式管理 是药三分毒 药物会影响身体肝肾功能,代谢 所以你要去找上游到底是我哪错了 短板越多 个健康状态越差 饮食管理是生活方式管理中难度最大的 原则1:与基因相对应相平衡 只吃素 会导致大脑萎…

【Linux】Linux Bash Shell 教程

Linux Bash Shell 入门教程 Linux bash&#xff08;Bourne-Again SHell&#xff09;是一种为GNU操作系统编写的命令行解释器&#xff0c;它是大多数 Linux 发行版中最常用的 shell。Bash提供了一种强大的方式来控制和管理操作系统&#xff0c;支持命令历史记录、别名、管道、重…