uniapp录音播放功能

在这里插入图片描述
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)
			}
		}
	}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

16个免费学习Python的网站和教程(2024年最新资源)

16个免费学习Python的网站和教程&#xff08;2024年最新资源&#xff09; 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff…

Spring系统学习 -Spring IOC 的XML管理Bean之类类型属性赋值、数组类型属性赋值、集合类属性赋值

类类型属性赋值&#xff1a; 在XML配置中&#xff0c;可以使用 <property> 元素为类类型属性赋值。通过指定属性的名称和值&#xff0c;可以直接将其他Bean的实例引用注入到目标Bean的属性中。这种方式可以建立对象之间的关联关系。例如&#xff0c;可以将一个Address对象…

臻奶惠的行业优势与市场竞争力解析

臻奶惠在智能售货机领域深耕多年&#xff0c;其加盟合作模式在行业中展现出了多方面的优势。以下是对该公司智能售货机加盟优势的深入分析&#xff1a; 技术先进性&#xff1a; 臻奶惠智能售货机以高度自动化的运营模式著称&#xff0c;特别是在自动补货、远程监控和数据分析…

【端午惊喜】2024年6月6日 docker 国内镜像源集体失效

文章目录 概述中科大镜像源阿里镜像源其他镜像源可用的镜像源写在最后 概述 大家都知道使用docker hub官方镜像需要魔法&#xff0c;虽然大部人有魔法&#xff0c;但是网速也是很慢&#xff0c;还有部分同学没有&#xff0c;全靠国内各大厂商的镜像源&#xff0c;可是端午6.6大…

zabbix监控深信服AD案例+自动发现虚拟服务和链路

文章目录 前言监控功能告警功能 环境准备操作步骤深信服AD开启SNMPSNMP V2SNMP V3 Zabbix导入模版Zabbix中添加深信服AD 前言 深信服AD&#xff0c;应用交付网关&#xff0c;是较为常见的应用发布、负载均衡设备&#xff0c;常用于网络出口。 本案例是通过zabbix的snmp监控深…

如何成为AI产品经理,踏入高薪不内卷的职场

前言 在当今科技日新月异的背景下&#xff0c;AI产品经理这一岗位逐渐成为职场中的一颗璀璨新星&#xff0c;吸引着众多求职者的目光。然而&#xff0c;对于这个职位的具体要求和工作内容&#xff0c;许多人仍处在一知半解的状态。虽然普遍认知中&#xff0c;AI产品经理岗位与…

【漏洞复现】Rejetto HTTP文件服务器 未授权RCE漏洞(CVE-2024-23692)

0x01 产品简介 Rejetto HTTP File Server(HFS)是一个基于HTTP协议的文件服务器软件&#xff0c;旨在为用户提供简单、轻量级且易于使用的文件共享解决方案。功能强大、易于使用的文件服务器软件&#xff0c;无论是个人使用还是团队协作&#xff0c;HFS都能满足用户的需求&…

【解决】Windows 10 主机上的 VMware Workstation 中出现“VMware Workstation 与设备/凭据保护不兼容”错误

解决错误的过程: 要解决错误,请按照以下步骤操作: 如果您的主机具有Windows 10 20H1 版本 19041.264 或更新版本,请升级/更新到 Workstation 15.5.6 或更高版本。有关更多详细信息,请参阅VMware Workstation 中 Windows Host VBS 支持的最低要求 如果您的主机装有Windows…

了解多线程

1.线程与并发 1.1 理解进程和线程的区别 进程&#xff1a;是指一个内存中运行的应用程序&#xff08;程序的一次运行就产生一个进程&#xff09;&#xff0c;每个进程都有自己独立的一块内存空间&#xff0c;比如在Windows的任务管理器中&#xff0c;一个运行的xx.exe就是一个进…

SSL证书的作用,SSL证书不续费有影响吗

随着网络发展&#xff0c;网站业务越来越多&#xff0c;SSL证书作为保障网站数据传输安全的重要手段&#xff0c;其重要性不言而喻。SSL证书的有效期通常为一年&#xff0c;并且需要定期更换。那么为什么SSL证书要一年换一次呢?如果证书过期且未续费&#xff0c;网站还能否正常…

计数排序的实现

计数排序 计数排序是一个基于非比较的排序算法。它的优势在于在对一定范围内的整数排序时&#xff0c;它的复杂度为Ο(nk)&#xff08;其中k是整数的范围&#xff09;&#xff0c;快于任何比较排序算法。当然这是一种牺牲空间换取时间的做法&#xff0c;而且当O(k)&#xff1e…

vivado HW_SIO_GTGROUP、HW_SIO_IBERT

HW_SIO.GTGROUP 描述 GT组与硬件设备上的GT IO组相关&#xff0c;具有可用的数量 GT引脚和组由目标Xilinx FPGA确定。在Kintex-7 xc7k325部件上&#xff0c;用于 例如&#xff0c;有四个GT组&#xff0c;每个组包含四个差分GT引脚对。每个GT pin有自己的接收器hw_sio_rx和发射器…

如何免费获取云服务器

这几天刚入手了阿贝云的 “免费云服务器 ” &#xff0c;接下来给大家讲讲如何免费注册阿贝云的免费云服务器 如何获取免费云服务器 打开阿贝云官网&#xff0c;注册并认证 即可以领取免费云服务器 阿贝云地址&#xff1a;https://www.abeiyun.com/ 服务器优势 永久免费&…

【算法实战】每日一题:18.1并查集知识点讲解以及算法实战

1.题目 给定一个序列&#xff0c;通过n-1次相邻元素的合并操作&#xff0c;恢复原始序列。 2.涉及知识点 - 并查集 (Union-Find) 并查集 (Union-Find) 详解 概述 并查集&#xff08;Union-Find&#xff09;&#xff0c;也称为不相交集数据结构&#xff0c;用于处理一些不相…

华为支持手指关节手势的原理

华为的指关节手势有指关节截屏、指关节录屏、指关节区域截屏、指关节分屏等。该技术的实现是靠触控结合了其他一些传感器实现的。 华为的专利&#xff1a; 一种手势控制方法、装置、终端设备和存储介质——华为技术有限公司 专利中提到以往终端设备对于手势的识别都是基于位置和…

橘子叶子病害分类数据集38432张5类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;38432 分类类别数&#xff1a;5 类别名称:["Citrus_Canker_Diseases_L…

学生党蓝牙耳机推荐,四款高性价比机型推荐

对于正在寻找高性价比蓝牙耳机的学生党们来说&#xff0c;选择一款既符合预算又满足音质、舒适度与便携性要求的耳机至关重要&#xff0c;以下将为大家推荐四款备受好评的蓝牙耳机&#xff0c;它们不仅性价比高&#xff0c;而且各具特色&#xff0c;相信能够满足不同学生党的需…

定个小目标之刷LeetCode热题(12)

这是一道简单题&#xff0c;使用位运算中的异或运算即可&#xff0c;异或运算有以下性质&#xff1a; 1、任何数异或 0 结果仍然是原来的数&#xff0c;即 a⊕0a 2、任何数和其自身做异或运算&#xff0c;结果是 0 所以我们只需要让数组里的所有元素进行异或运算得到的结果就…

电脑ps缺少dll的多种解决方法,轻松搞定dll丢失问题

启动 Photoshop CC (20.0) 时&#xff0c;屏幕显示 Photoshop.exe - 系统错误对话框&#xff1a; 由于计算机中缺少 D3DCOMPILER_47.dll 而导致该程序无法启动。请尝试重新安装该程序以修复此问题。本文将针对这一问题进行详细的分析和解决方案的分享&#xff0c;帮助大家更好…

理解dispatch_async

Submits a block for asynchronous execution on a dispatch queue and returns immediately. 提交一个块以在调度队列上异步执行并立即返回。 code showing 以一个最简单的demo开始 // 创建一个同步队列 dispatch_queue_t syncQueue dispatch_queue_create("io.sqi.My…