小程序简单版录音机

先来看看效果

在这里插入图片描述

结构

先来看看页面结构

    <!-- wxml --><view class="wx-container"><view id="title">录音机</view><view id="time">{{hours}}:{{minute}}:{{second}}</view><view class="btngroup"><view hover-class="change" catch:tap="play">播放</view><view class="play" hover-class="change" catch:tap="start"></view><view hover-class="change" catch:tap="stop">结束</view></view>
</view>

页面样式

/* pages/radio/index.wxss */
.wx-container {width: 100vw;height: 100vh;margin: 0 auto;text-align: center;box-sizing: border-box;
}#title {margin: 100rpx auto;text-align: center;font-size: 50rpx;}#time {font-size: 150rpx;
}.btngroup {height: 180rpx;margin: 100rpx auto;display: flex;align-items: center;justify-content: space-around;
}.btngroup>view:not(.play) {width: 120rpx;height: 120rpx;border-radius: 50%;line-height: 120rpx;background-color: #eee;
}.play {width: 150rpx;height: 150rpx;border: solid 50rpx red;box-sizing: border-box;border-radius: 50%;transition: .2s;background-color: transparent;
}.change {transition: .2s;box-shadow: 0 0 8rpx 8rpx rgb(0, 0, 0);}

核心代码

计时函数

🆗,接下来要实现点击录音按钮,进行一个计时效果
在这里插入图片描述

这边是一个计时函数,写得比较繁琐,要是各位大大有更好的办法也欢迎补充

Page({data: {time: 0,cleartime: '',timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒},// -----------------------------
// 计时器setInterval() {const _this = thisvar second = _this.data.secondvar minute = _this.data.minutevar hours = _this.data.hours_this.data.timer = setInterval(function () { // 设置定时器second++if (second >= 60) {second = 0 //  大于等于60秒归零minute++if (minute >= 60) {minute = 0 //  大于等于60分归零hours++if (hours < 10) {// 少于10补零_this.setData({hours: '0' + hours})} else {_this.setData({hours: hours})}}if (minute < 10) {// 少于10补零_this.setData({minute: '0' + minute})} else {_this.setData({minute: minute})}}if (second < 10) {// 少于10补零_this.setData({second: '0' + second})} else {_this.setData({second: second})}}, 1000)}})

开始事件

现在开始为播放按钮设置事件,那我们先来
获取录音管理器
wx.getRecorderManager() 详细方法请查看官方文档
创建全局音频
wx.createInnerAudioContext()详细方法请查看官方文档

// 获取录音管理器
var tape = wx.getRecorderManager()
// 创建全局音频
var audio = wx.createInnerAudioContext()
Page({data: {time: 0,cleartime: '',state: 0, // 0 为停止录音  1 为正在录音   2 为暂停录音timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒tempFilePath: null},//计时开始start() {let _this = this;switch (this.data.state) {case 0:_this.setInterval();// 开始录音tape.start()console.log('开始录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})// audio.destroy() // 释放音频资源breakcase 1:clearInterval(_this.data.timer);// 暂停录音tape.pause()console.log('暂停录音');this.setData({state: 2 // 把state设置为2 (继续录音状态)})breakcase 2:_this.setInterval();// 继续录音tape.resume()console.log('继续录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})break}// 为了性能考虑 20 秒后自动结束录音  setTimeout(() => {clearInterval(_this.data.timer);tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('自动保存录音');wx.showToast({title: '自动保存录音成功',mask: true,duration: 500,})})}, 20000)}})

有了这些咱们就可以正常的进行计时和录音功能

结束事件(保存录音)

接下来我们来进行保存录音和把计时器清零的操作

// 结束stop() {// 如果state处于0(未录音状态)弹出提示if (this.data.state == 0) {wx.showToast({title: '请先开始录音',mask: true,duration: 500,icon: 'error'})return}let _this = this;this.setData({hours: '0' + 0,minute: '0' + 0,second: '0' + 0,state: 0 // 点击结束按钮之后 把 state(状态)初始化为0(未录音状态)})clearInterval(_this.data.timer);// 结束录音 保存录音tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('保存录音');wx.showToast({title: '保存录音成功',mask: true,duration: 500,})})},

播放录音

最后一步就很简单了,给音频设置上路径播放音频就好

//播放play() {// 如果音频路径为空,弹出提示if (!this.data.tempFilePath) {wx.showModal({title: '没有录音',content: '请开始录音或保存录音'})return}audio.src = this.data.tempFilePath// 播放录音的音频audio.play()wx.showToast({title: '播放录音',mask: true,duration: 500})},

到这里呢,一个简单版的录音机基本功能就已经完全实现了,下面将附上完整代码,如有错误的地方,请斧正

// 获取录音管理器
var tape = wx.getRecorderManager()
// 创建全局音频
var audio = wx.createInnerAudioContext()
Page({data: {time: 0,cleartime: '',state: 0, // 0 为停止录音  1 为正在录音   2 为暂停录音timer: null,hours: '0' + 0, // 时minute: '0' + 0, // 分second: '0' + 0, // 秒tempFilePath: null},//计时开始start() {let _this = this;switch (this.data.state) {case 0:_this.setInterval();// 开始录音tape.start()console.log('开始录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})// audio.destroy() // 释放音频资源breakcase 1:clearInterval(_this.data.timer);// 暂停录音tape.pause()console.log('暂停录音');this.setData({state: 2 // 把state设置为2 (继续录音状态)})breakcase 2:_this.setInterval();// 继续录音tape.resume()console.log('继续录音');this.setData({state: 1 // 把state设置为1 (暂停录音状态)})break}// 为了性能考虑 20 秒后自动结束录音  setTimeout(() => {clearInterval(_this.data.timer);tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('自动保存录音');wx.showToast({title: '自动保存录音成功',mask: true,duration: 500,})})}, 20000)},//播放play() {// 如果音频路径为空,弹出提示if (!this.data.tempFilePath) {wx.showModal({title: '没有录音',content: '请开始录音或保存录音'})return}audio.src = this.data.tempFilePath// 播放录音的音频audio.play()wx.showToast({title: '播放录音',mask: true,duration: 500})},// 结束stop() {// 如果state处于0(未录音状态)弹出提示if (this.data.state == 0) {wx.showToast({title: '请先开始录音',mask: true,duration: 500,icon: 'error'})return}let _this = this;this.setData({hours: '0' + 0,minute: '0' + 0,second: '0' + 0,state: 0 // 点击结束按钮之后 把 state(状态)初始化为0(未录音状态)})clearInterval(_this.data.timer);// 结束录音 保存录音tape.stop()// 监听结束录音事件tape.onStop((res) => {this.data.tempFilePath = res.tempFilePathconsole.log('保存录音');wx.showToast({title: '保存录音成功',mask: true,duration: 500,})})},// 计时器setInterval() {const _this = thisvar second = _this.data.secondvar minute = _this.data.minutevar hours = _this.data.hours_this.data.timer = setInterval(function () { // 设置定时器second++if (second >= 60) {second = 0 //  大于等于60秒归零minute++if (minute >= 60) {minute = 0 //  大于等于60分归零hours++if (hours < 10) {// 少于10补零_this.setData({hours: '0' + hours})} else {_this.setData({hours: hours})}}if (minute < 10) {// 少于10补零_this.setData({minute: '0' + minute})} else {_this.setData({minute: minute})}}if (second < 10) {// 少于10补零_this.setData({second: '0' + second})} else {_this.setData({second: second})}}, 1000)}
})

在这里插入图片描述


  • 失联

最后编辑时间 2024,6,07;9:40

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

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

相关文章

169.二叉树:完全二叉树的节点个数(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr, right(nullptr) {}* Tree…

“墨者杯”网络安全大赛wp

漏洞利用01 504错误修改为POST提交拿到php源码&#xff0c; 查看逻辑$_POST[roam1] ! $_POST[roam2] && sha1($_POST[roam1]) sha1($_POST[roam2]) 采用数组绕过 roam1[]1&roam2[]2 拿到phpinfo&#xff0c;观察发现 这里的意思是每个php页面都包含这个f14…

微服务网关Gateway(上)

大家好呀&#xff0c;我是苍何。 这年头&#xff0c;大家都在开始卷简历了&#xff0c;我也看了很多同学的简历&#xff0c;其中有一个同学的简历&#xff0c;我印象最为深刻&#xff0c;他的项目经历中&#xff0c;写了自定义 Gateway 过滤器实现统计接口调用耗时&#xff0c…

力扣141. 环形链表

Problem: 141. 环形链表 文章目录 题目描述思路复杂度Code 题目描述 思路 定义快慢指针fast、slow&#xff0c;当fast ! null && fast.next ! null时fast每次走两步、slow走一步&#xff0c;当fast和slow相遇时&#xff0c;则说明存在环 复杂度 时间复杂度: O ( n ) O…

无锡哲讯携手SAP,赋能装备制造业数字化转型

在当今快速发展的工业4.0时代&#xff0c;装备制造业作为国民经济的重要支柱&#xff0c;正面临着前所未有的机遇与挑战。无锡哲讯智能科技有限公司凭借其深厚的行业经验和专业的SAP实施能力&#xff0c;为装备制造业提供全面的数字化解决方案&#xff0c;助力企业实现智能化、…

知识图谱的应用---智慧政务

文章目录 智慧政务典型应用 智慧政务 智慧政务即通过“互联网政务服务”构建智慧型政府&#xff0c;利用云计算、移动物联网、人工智能、数据挖掘、知识管理等技术&#xff0c;提高政府在办公、监管、服务、决策中的智能水平&#xff0c;形成高效、敏捷、公开、便民的新型政府&…

TPM仿真环境搭建

文章目录 背景及注意事项一、CMake二、m4三、GNU MP Library四、TPM_Emulator五、TSS协议栈&#xff08;trousers-0.3.14.tar.gz&#xff09;六、 tpm-tools七、查看是否安装成功八、测试 TPM环境&#xff08;需要开三个终端分别运行&#xff09;8.1 启动TPM &#xff08;第一个…

有关大学的搜题软件?六个不限次的公众号和软件分享啦 #其他#职场发展

有些同学虽然喜欢刷题&#xff0c;但是如果参考答案遗失、找不到参考答案&#xff0c;导致做好的题目无法校对&#xff0c;就会比较烦恼了。不过不用担心&#xff0c;今天就给大家分享一些超好用的搜题工具 1.彩虹搜题 这是个老公众号了 它不仅可以查到大学题目&#xff0c;…

工厂为什么需要各种看板

人眼天生对图像识别速度更快更准确&#xff0c;例如图形&#xff0c;颜色等。人们往往更易于通过视觉信息来获取和理解信息&#xff0c;可视化的看板在工厂管理中也是司空见惯。 那么工厂看板如何帮助企业实现降本、提质、增效&#xff1f; 1、生产计划和生产进度的管理&#…

arm开发板移植sshd

移植sshd 文章目录 移植sshd1、准备工作2、编译zlib3、编译openssl4、编译openssh5、其他旧版本6、部署测试7、多用户配置8、sshd_config示例 1、准备工作 准备openssh-9.5p1.tar.gz openssl-1.1.1w.tar.gz zlib-1.2.11.tar.gz 我在http://10.45.156.100/IG2100/IG2100.git …

09.1手工制作docker镜像-多服务ssh+nginx

手工制作docker镜像-多服务sshnginx 一个容器多个服务 基于centos6.9系统添加yum源与epel源 安装nginx、ssh服务 yum install nginx openssh-server -y因镜像系统为纯系统&#xff0c;没有root密码&#xff0c;所以需要配置密码 echo 123456 | passwd --stdin root注&#x…

kafka-消费者组(SpringBoot整合Kafka)

文章目录 1、消费者组1.1、使用 efak 创建 主题 my_topic1 并建立6个分区并给每个分区建立3个副本1.2、创建生产者发送消息1.3、application.yml配置1.4、创建消费者监听器1.5、创建SpringBoot启动类1.6、屏蔽 kafka debug 日志 logback.xml1.7、引入spring-kafka依赖1.8、消费…

IT闲谈-WEB前端主流三大框架

目录 一、Angular二、React三、Vue.js小结 前言 这里给大家简单介绍一下web前端框架&#xff1b;随着互联网技术的飞速发展&#xff0c;Web前端技术也在不断地演进和更新。目前&#xff0c;前端比较多的三大主流前端框架Angular、React和Vue.js&#xff0c;成为前端开发者的得…

问题:棕色试剂瓶用于盛装见光易分解的试剂或溶剂。 #其他#学习方法#微信

问题&#xff1a;棕色试剂瓶用于盛装见光易分解的试剂或溶剂。 A、正确 B、错误 参考答案如图所示

响应式流规范解析

在互联网应用构建过程中&#xff0c;我们知道可以采用异步非阻塞的编程模型来提高服务的响应能力。而为了实现异步非阻塞&#xff0c;我们可以引入数据流&#xff0c;并对数据的流量进行控制。我们来考虑一个场景&#xff0c;如果数据消费的速度跟不上数据发出的速度&#xff0…

基于spring boot的超市管理系统【附:资料➕文档】

前言&#xff1a;我是源码分享交流Coding&#xff0c;专注JavaVue领域&#xff0c;专业提供程序设计开发、源码分享、 技术指导讲解、各类项目免费分享&#xff0c;定制和毕业设计服务&#xff01; 免费获取方式--->>文章末尾处&#xff01; 项目介绍&#xff1a; 网址 …

JWT及单点登录实现

JWT发展简史 JWT Token JSON Web Token (JWT&#xff0c;RFC 7519 (opens new window))&#xff0c;是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准&#xff08;(RFC 7519)。 ID Token OIDC (OpenID Connect) 协议 (opens new window)对 OAuth 2.0 协议 …

DEA统计代码行数插件Statistic

1.安装Statistic插件 直接在idea里面搜索Statistic即可 2.重启idea 3.查看代码行数 它可以统计各类文件的行数总和

【Linux】进程(7):地址空间

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解Linux进程&#xff08;7&#xff09;&#xff1a;地址空间&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 &#xff08;A&#xff09; 直接看代码&…

法国人工智能初创公司 Mistral 正在推出新的人工智能模型定制选项服务和 SDK

Mistral AI是一家成立于2023年的法国人工智能初创公司&#xff0c;由Artur Mensch、Timothe Lacroix和Guillaume Lample三位前Meta和Google DeepMind的研究人员创立。该公司专注于生成式AI技术&#xff0c;特别是用于构建在线聊天机器人、搜索引擎等应用。 Mistral AI在成立之…