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 = indexif(this.copyIndex != index){//判断是继续播放还是播放另外一个,播放另外一个重新赋值this.copyIndex = indexitem.call_time_duration_copy = JSON.parse(JSON.stringify(item.call_time_duration))}clearInterval(this.recordingTime)//即便ios开启静音模式,也可以播放wx.setInnerAudioOption({obeyMuteSwitch: false})innerAudioContext.src = item.download_urlinnerAudioContext.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 = nullinnerAudioContext.pause();clearInterval(this.recordingTime)}}}

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

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

相关文章

【设计模式深度剖析】【2】【行为型】【命令模式】| 以打开文件按钮、宏命令、图形移动与撤销为例加深理解

&#x1f448;️上一篇:模板方法模式 | 下一篇:职责链模式&#x1f449;️ 设计模式-专栏&#x1f448;️ 文章目录 命令模式定义英文原话直译如何理解呢&#xff1f; 四个角色1. Command&#xff08;命令接口&#xff09;2. ConcreteCommand&#xff08;具体命令类&…

Spring Boot 3.x集成FastDFS记录

最近在做一个课程&#xff0c;需要用讲一下SpringBoot 使用文件上传的功能&#xff0c;选择了FastDFS作为文件存储OSS。Spring Boot是最新的3.3.0版本&#xff0c;JDK版本是17&#xff0c;中间有一些坑&#xff0c;下面记录一下。 <parent><groupId>org.springfram…

基于VS2022编译GDAL

下载GDAL源码&#xff1b;下载GDAL编译需要依赖的必须代码&#xff0c;proj&#xff0c;tiff&#xff0c;geotiff三个源码&#xff0c;proj需要依赖sqlite&#xff1b;使用cmake编译proj&#xff0c;tiff&#xff0c;geotiff&#xff1b;proj有版本号要求&#xff1b;使用cmake…

Llama模型家族之拒绝抽样(Rejection Sampling)(九) 强化学习之Rejection Sampling

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

Python实现半双工的实时通信SSE(Server-Sent Events)

Python实现半双工的实时通信SSE&#xff08;Server-Sent Events&#xff09; 1 简介 实现实时通信一般有WebSocket、Socket.IO和SSE&#xff08;Server-Sent Events&#xff09;三种方法。WebSocket和Socket.IO是全双工的实时双向通信技术&#xff0c;适合用于聊天和会话等&a…

三端植物大战僵尸杂交版来了

Hi&#xff0c;好久不见&#xff0c;最近植物大战僵尸杂交版蛮火的 那今天苏音整理给大家三端的植物大战僵尸杂交版包括【苹果端、电脑端、安卓端】 想要下载的直接划到最下方即可下载。 植物大战僵尸&#xff0c;作为一款古老的单机游戏&#xff0c;近期随着B站一位UP主潜艇…

jasypt配置文件密码加密解码

1. 需求讲解 对配置文件的组件密码加密,比如数据库redis等密码加密 2. 开发 2.1 依赖引入 <!-- jasypt 加解密 --><dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><v…

基于单片机的船舱温度临界报警系统

摘 要 : 针对传统的船舱温度临界报警系统&#xff0c;由于温度监控不到位导致报警不及时的问题&#xff0c;提出一个基于单片机的船舱温度临界报警系统设计。该设计将单片机作为核心控制硬件&#xff0c;控制系统整体电路。同时设计数据采集模块&#xff0c;利用温度测量仪测试…

数据库分库分表mycat

为啥要分库分表 IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘IO&#xff0c;效率较低。 请求数据太多&#xff0c;带宽不够&#xff0c;网络IO瓶颈。 CPU瓶颈&#xff1a;排序、分组、连接查询、聚合统计等SQL会耗费大量的CPU资源&#…

为什么PPT录制没有声音 电脑ppt录屏没有声音怎么办

一、为什么PPT录制没有声音 1.软件问题 我们下载软件的时候可能遇到软件损坏的问题&#xff0c;导致录制没有声音&#xff0c;但其他功能还是可以使用的。我建议使用PPT的隐藏功能&#xff0c;下载插件&#xff0c;在PPT界面的加载项选项卡中就能使用。我推荐一款可以解决录屏…

HTML静态网页成品作业(HTML+CSS)—— 保护环境环保介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

10倍速开发开关电源:PSIM DLL集成指南与如何单步调试你的代码

文末有彩蛋哦。 去年提到要写一篇如何在利用PSIM Visual Studio进行仿真联调&#xff0c;加速实际嵌入式端C代码的开发&#xff0c;但因为懒一直没兑现。 本期简单总结下实现的方法。 特别声明&#xff1a;本文约一半以上内容有kimi/文心一言提问式生成&#xff0c;仅用于技…

【Redis】 Redis 集成到 Spring Boot上面

文章目录 &#x1f343;前言&#x1f384;Spring Boot连接redis客户端&#x1f6a9;项目的创建&#x1f6a9;配置端⼝转发&#x1f6a9;配置 redis 服务地址&#x1f6a9;更改 Redis 配置文件&#x1f6a9;使用 StringRedisTemplate 类操作 &#x1f38d;Spring Boot操作Redis客…

107.网络游戏逆向分析与漏洞攻防-装备系统数据分析-装备信息更新的处理

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

ChatGPT3.5和ChatGPT4.0、ChatGPT4o对比

一、ChatGPT3.5、ChatGPT4.0、ChatGPT4o对比 目前ChatGPT有三个主要版本&#xff0c;分别是ChatGPT3.5、ChatGPT4.0、ChatGPT4o&#xff0c;这三个版本之间有什么差异呢&#xff1f; 对比项ChatGPT3.5ChatGPT4.0ChatGPT4o参数数量1750亿约1万亿未公开输入文本文本、图片文本、…

【el-tooltips改造】Vue实现文本溢出才显示el-tooltip,否则不显示el-tooltips

实现原理&#xff1a; 使用disabled属性控制el-tooltip的content显示与隐藏&#xff1b; 目标&#xff1a; 1行省略、多行省略、可缩放页面内的文本省略都有效。 实现方式&#xff1a; 1、自定义全局指令&#xff0c;tooltipAutoShow.js代码如下&#xff08;参考的el-table中的…

Java——数组排序

一、排序介绍 1、排序的概念 排序是将多个数据按照指定的顺序进行排列的过程。 2、排序的种类 排序可以分为两大类&#xff1a;内部排序和外部排序。 3、内部排序和外部排序 1&#xff09;内部排序 内部排序是指数据在内存中进行排序&#xff0c;适用于数据量较小的情况…

Type-C转音频(C/3.5mm接口USB2.0数据传输)带PD充电低成本解决方案

LDR6500&#xff1a;领先市场的USB-C DRP接口USB PD通信芯片 产品介绍 LDR6500&#xff0c;由乐得瑞科技精心研发&#xff0c;是一款针对USB Type-C标准中Bridge设备而优化的USB-C DRP&#xff08;Dual Role Port&#xff0c;双角色端口&#xff09;接口USB PD&#xff08;Po…

2024年安全现状报告

2024 年安全现状报告有些矛盾。尽管安全专业人员的道路困难重重&#xff0c;比如说严格的合规要求、不断升级的地缘政治紧张局势和更复杂的威胁环境&#xff0c;但整个行业还是在取得进展。 许多组织表示&#xff0c;与前几年相比&#xff0c;网络安全变得更容易管理。组织之间…

压缩视频在线压缩网站,压缩视频在线压缩工具软件

在数字化时代&#xff0c;视频成为了人们记录和分享生活的重要载体。然而&#xff0c;视频文件一般都非常大&#xff0c;这不仅占据了大量的存储空间&#xff0c;也给视频的传输和分享带来了不便。因此&#xff0c;压缩视频成为了许多人必须掌握的技能。本文将详细介绍如何压缩…