uniapp录音播放功能

news2024/11/23 15:52:49

在这里插入图片描述
ui效果如上。
播放就开始倒计时,并且改变播放icon,另外录音则停止上一次录音。
播放按钮(三角形)是播放功能,两竖是暂停播放功能。

	const innerAudioContext = wx.createInnerAudioContext();
	export default{
		data(){
			return{
				recordingList:[],
				playIndex:null,//播放、暂停标识
				recordingTime:null,//倒计时
				copyIndex:null,//显示倒计时标识
			}
		},
		onLoad(option) {
			this.init()
		},
		onHide() {
			this.recordingInit()
			innerAudioContext.stop()//后退、后台页面停止音频,用销毁destroy重新进来onError会报错-1
		},
		onUnload() {
			this.recordingInit()
			innerAudioContext.stop()
		},
		methods:{
			//初始化列表,上拉下拉根据项目做
			init(){
				this.recordingList = []
				this.getRecordingList()
			},
			//获取订单录音列表
			getRecordingList(){
				let list = [
					{
						download_url:'',
						call_time_duration:13,//录音时长
						call_time_duration_copy:13,//复制录音时长,倒计时要用
					}
				]
				this.recordingList = list
			},
			//播放
			recordingPlay(item,index){
				if(this.playIndex != index){
					this.playIndex = index
					if(this.copyIndex != index){//判断是继续播放还是播放另外一个,播放另外一个重新赋值
						this.copyIndex = index
						item.call_time_duration_copy = JSON.parse(JSON.stringify(item.call_time_duration))
					}
					clearInterval(this.recordingTime)
					//即便ios开启静音模式,也可以播放
					wx.setInnerAudioOption({
						obeyMuteSwitch: false
					})
					innerAudioContext.src = item.download_url
					innerAudioContext.play();
					//监听错误
					innerAudioContext.onError((res) => {
						console.log('监听错误',res)
						this.recordingInit()
						innerAudioContext.stop()
					});
					//监听播放结束
					innerAudioContext.onEnded((res) => {
						this.recordingInit()
						item.call_time_duration_copy = JSON.parse(JSON.stringify(item.call_time_duration))
					});
					this.recordingTime = setInterval(()=>{
						if(item.call_time_duration_copy <= 0){
							clearInterval(this.recordingTime)
						}else{
							item.call_time_duration_copy--;
						}
					},1000)
				}
			},
			//暂停
			recordingPause(){
				this.recordingInit()
			},
			//播放初始化
			recordingInit(){
				this.playIndex = null
				innerAudioContext.pause();
				clearInterval(this.recordingTime)
			}
		}
	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1797981.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

20240607给Toybrick的TB-RK3588开发板在Buildroot下适配瑞芯微7.86寸QXGATFT-LCD EDP屏幕1536x2048

20240607给Toybrick的TB-RK3588开发板在Buildroot下适配瑞芯微7.86寸QXGATFT-LCD EDP屏幕1536x2048 2024/6/7 13:59 1、背光部分&#xff1a;&backlight { pwms <&pwm2 0 25000 0>; status "okay"; }; &pwm2 { status "okay&…

计算机网络(网络原理及应用)之路由器的基本配置(详细~)

路由器的基本配置 实验目的 熟悉路由各接口的外观、接口的功能、接口的表示方法&#xff1b;掌握带外的管理方法&#xff1a;通过接口console配置&#xff1b;掌握带内的管理方法&#xff1a;通过方式telnet配置&#xff1b;掌握带内的管理方法&#xff1a;通过方式web配置&…

机器学习之数学基础(六)~时间复杂度和空间复杂度

目录 算法背景 background 1. 时间复杂度 Time Complexity 1.1 时间复杂度分类 1.1.1 O(1) 常数阶 1.1.2 O(n) 线性阶 1.1.3 O(n^2) 平方阶 1.1.4 O(logn) 对数阶 1.1.5 O(nlogn) 线性对数阶 1.1.6 O(2^n) 指数阶 1.1.7 O(n!) 阶乘阶 1.1.8 时间复杂度分类 1.2 时…

python的line[:-1]和line[-1]

line[:-1]其实就是去除了这行文本的最后一个字符(换行符)后剩下的部分。 line = "abcde" line[:-1] 结果为:abcd line = "abcde" line[::-1] 结果为:edcba 示例3 [m : ] 代表列表中的第m+1项到最后一项 [ : n] 代表列表中的第一项到第n项 [-1] 代…

Facebook:社交世界的引领者

导语 在当今数字化时代&#xff0c;Facebook已经成为了人们社交生活的重要一环。然而&#xff0c;除了成为社交媒体的象征外&#xff0c;它还在不断探索并领导着社交世界的新方向。 1. 社交平台的发展者 Facebook不仅仅是一个社交平台&#xff0c;更是社交方式的引领者。从其…

世界坐标系和WGS84坐标系相互转换(2024-06-07)

WGS84弧度坐标系转世界坐标 const handelCartographic ()>{const a new Cesium.Cartesian3.fromDegrees(104.1, 30.6, 200);console.log("世界坐标",a);const b new Cesium.Cartographic.fromDegrees(104.1, 30.6, 200);console.log("WGS84弧度坐标系&qu…

什么是ESG?

什么是ESG&#xff1f; ESG的实施和发展是企业应对全球和国内环境、社会和治理挑战的关键路径。《ESG入门一本通》详细阐述了ESG的概念、发展历程和评价体系&#xff0c;并结合中国的实际情况&#xff0c;强调了ESG的重要性和必要性。企业需重视ESG管理和信息披露&#xff0c;…

视觉SLAM十四讲:从理论到实践(Chapter9:后端1)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 一、目标 1.理解后端的概念。 2.理解以EKF为代表的滤波器后端的工作原理。 3.理解非线性优化的后端&#xff0c;明白稀疏性是如何利用的。 4.使用g2o和Ceres实际操作…

C# 集成 C++ 的方法和实践 - P/Invoke(平台调用)- 1

环境&#xff1a; 1 P/Invoke&#xff08;平台调用&#xff09;&#xff1a; C#可以通过P/Invoke调用C编写的DLL中的函数。 1.1 适用范围&#xff1a; P/Invoke 是一种在 C# 程序中调用非托管代码&#xff08;如 C 动态链接库&#xff09;的方式。这种方法适用于函数调用相对…

一文了解AI绘画两大鼻祖 Midjourney 和 Stable Diffusion的区别,超详细讲解小白入门必看教程!

大家好&#xff0c;我是画画的小强 要说AI绘画软件哪家强&#xff1f;有人说Midjoureny (MJ), 有人说Stable Diffuion(SD)&#xff0c;那他们到底有什么区别&#xff1f;应该选择哪款软件学习&#xff1f;今天带大家全面了解一下&#xff01;文末可白嫖AI资料哦&#xff5e; 一…

PVE安装CENTOS9提示“Fatal glibc error: CPU does not support x86-64-v2”

问题描述&#xff1a;PVE安装CENTOS9提示“Fatal glibc error: CPU does not support x86-64-v2” RHEL 9要求x86_64的CPU支持x86-64-v2&#xff0c;x86-64-v2需要处理器支持 CMPXCHG16B、LAHF-SAHF、POPCNT、SSE3、SSE4.1、SSE4.2、SSSE3 等现代指令集 解决方法&#xff1a;…

API接口测试工具:jmeter的安装、汉化、Jmeter桌面快捷图标和基本使用

文章目录 测试工具&#xff1a;JmeterJmeter安装和配置Jmeter汉化设置中文语言&#xff1a;永久方式设置中文语言&#xff1a;临时方式 设置Jmeter桌面快捷图标jmeter基本用法Jmeter无法保存测试问题解决 测试工具&#xff1a;Jmeter Jmeter依赖于JDK&#xff0c;所以必须确保…

SwiftUI获取用户的位置信息(CLLocationManager,CLLocationManagerDelegate)

本篇文章将会介绍一下在SwiftUI中如何通过CorLocation框架获取用户的位置信息&#xff0c;因为获取位置信息属于用户的隐私信息&#xff0c;所以需要在Info.plist文件里面加上访问位置权限的说明。 关于位置信息&#xff0c;可以请求两种级别的许可&#xff1a;always和when i…

项目经理进入职场都会经历的三个阶段

对于项目经理而言&#xff0c;进入职场是一个不断学习和成长的过程。在这个过程中&#xff0c;项目经理通常会经历三个主要阶段&#xff0c;每个阶段都有其独特的特点和挑战。 一、基础建设与学习阶段 对于新入行的项目经理来说&#xff0c;最初的阶段主要是基础技能的积累和…

AI绘画中的色彩空间转换技术

在数字艺术的广阔天地中&#xff0c;AI绘画作为一种新兴的创作方式&#xff0c;正以其独特的魅力吸引着越来越多的关注。它不仅仅是一种技术&#xff0c;更是一种全新的艺术表现形式。而在AI绘画的背后&#xff0c;色彩空间转换技术起着至关重要的作用。今天&#xff0c;我们就…

政安晨【零基础玩转各类开源AI项目】:解析开源项目:Champ 利用三维参数指导制作可控且一致的人体图像动画

目录 论文题目 Champ: 利用三维参数指导制作可控且一致的人体图像动画 安装 创建 conda 环境&#xff1a; 使用 pip 安装软件包 推理 1. 下载预训练模型 2. 准备准备引导动作数据 运行推理 训练模型 准备数据集 运行训练脚本 数据集 政安晨的个人主页&#xff1a;…

Web LLM 攻击技术

概述 在ChatGPT问世以来&#xff0c;我也尝试挖掘过ChatGPT的漏洞&#xff0c;不过仅仅发现过一些小问题&#xff1a;无法显示xml的bug和错误信息泄露&#xff0c;虽然也挖到过一些开源LLM的漏洞&#xff0c;比如前段时间发现的Jan的漏洞&#xff0c;但是不得不说传统漏洞越来…

抖音外卖区域代理需要多少钱?入局成本如何计算?

随着抖音外卖的日益火爆和抖音外卖平台全国代理的退场&#xff0c;想要申请抖音外卖平台区域代理的人数不断上涨。但是&#xff0c;创业毕竟不是儿戏&#xff0c;每一个决定都需要经过权衡利弊。而就做抖音外卖区域代理这一项目而言&#xff0c;抖音外卖平台区域代理需要多少钱…

洛杉矶裸机云多IP服务器网线路测评

在当今日益数字化的世界中&#xff0c;服务器的网络线路质量对于企业的运营效率和用户体验具有至关重要的作用。特别是对于那些寻求在洛杉矶部署裸机云多IP服务器的企业来说&#xff0c;了解服务器的网络线路质量显得尤为重要。本文将对洛杉矶裸机云多IP服务器的网络线路进行测…

Idea解决堆栈溢出

废话不说了&#xff0c;这问题搞了我两天&#xff0c;最近在用内网办公&#xff0c;没用公网&#xff0c;所以博客暂时没更新