微信小程序录音机源代码

<!-- <button bind:tap="startTab">开始录音</button>
<button bind:tap="stopTab">结束录音</button>
<button bind:tap="playTab">播放录音</button>
<view style="margin: 0 auto;">{{time}}</view> -->
<view class="container"><!-- 上面部分 --><view class="top"><view class="lyjText">录音机</view><view class="times">{{h<10?'0'+ h:h}}:{{f<10?'0'+ f:f}}:{{s<10?'0'+ s:s}}</view></view><!-- 下面部分 --><view class="player"><!-- 暂停 --><view bind:tap="pauseTab" class="playerBox sjx"></view><!-- 开始录音 --><view class="playerBox1"><view class="litterBox" bind:tap="startTab"></view></view><!-- 结束录音 --><view class="playerBox" bind:tap="stopTab"><view class="zfx"></view></view></view><button type="primary" bind:tap="playTab">播放</button>
</view>
.container {display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 100vh;
}
.player {display: flex;justify-content: space-between;align-items: center;
}
.playerBox1 {width: 200rpx;height: 200rpx;background-color: red;border-radius: 50%;display: flex;justify-content: center;align-items: center;margin: 0 50rpx;
}
.litterBox {width: 90rpx;height: 90rpx;background-color: white;border-radius: 50%;
}
.playerBox {width: 140rpx;height: 140rpx;background-color: rgb(239,239,239);border-radius: 50%;display: flex;justify-content: center;align-items: center;
}
.zfx {width: 40rpx;height: 40rpx;background-color: rgb(174,174,174);
}
.sjx::after {content: "";display: block;border: 30rpx solid transparent;border-left-color: rgb(174,174,174);position: relative;left: 15rpx;
}
.lyjText {font-size: 50rpx;
}
.times {font-size: 120rpx;
}
.top {display: flex;flex-direction: column;align-items: center;
}
// 全局录音管理器
let recorder = wx.getRecorderManager()
// 全局文件管理
// let fileSytems = wx.getFileSystemManager()
let audio = wx.createInnerAudioContext()
let timer = null
let _this
Page({/*** 页面的初始数据*/data: {// 小时h: 0,// 分钟f: 0,// 秒s: 0,file: '',// 是否在播放isPlay: false},onLoad() {_this = this},pauseTab() {if (this.data.isPlay === true) {this.setData({isPlay: false})recorder.pause()clearInterval(timer)timer = null} else if (this.data.isPlay === false) {this.startTab()}},startTab() {this.setData({isPlay: true})if (!timer) {timer = setInterval(() => {this.setData({s: this.data.s >= 59 ? 0 : this.data.s + 1,f: this.data.s >= 59 ? this.data.f + 1 : this.data.f,h: this.data.f >= 59 ? this.data.h + 1 : this.data.h,})}, 1000)}recorder.start()},stopTab() {this.setData({isPlay: false})clearInterval(timer)timer = nullthis.setData({f: 0,h: 0,s: 0})recorder.stop()// console.log(1);recorder.onStop(res => {console.log(1);const {tempFilePath} = res// console.log(res);this.data.file = tempFilePathconsole.log(this.data.file);})},playTab() {audio.src = this.data.fileaudio.play()},
})

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

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

相关文章

【机器学习】第10章 聚类算法

一、概念 1.聚类 &#xff08;1&#xff09;是无监督学习&#xff0c;其实无监督学习就是无中生有&#xff0c;不给你标准答案&#xff08;标签啊啥的&#xff09;&#xff0c;然后让你自己来。 &#xff08;2&#xff09;聚类就是这样&#xff0c;让机器自己根据相似特征把相…

ThreadLocal内存泄漏

什么是内存泄漏&#xff1f; 内存泄漏发生在程序中已动态分配的堆内存由于某种原因未被释放或无法释放&#xff0c;导致系统内存浪费。 这种情况会让程序运行速度变慢&#xff0c;甚至可能导致系统崩溃。 ThreadLocal是Java提供的一个本地线程副本变量工具类&#xff0c;它允…

AOSP刷Fart8脱壳机安装及使用

我的电脑硬件不支持对AOSP源码进行编译&#xff0c;所以只能用别人编译好的刷机包进行刷机。使用的刷机包是luffy 8期 day37 下的v5目录下的taimen包&#xff0c;这个刷机包里面 的AOSP是 UserDebug 版本&#xff0c;已经实现的功能有&#xff1a; - root特征隐藏 - Fart特征隐…

架构模式——分层架构

分层架构&#xff1a;软件设计的经典之选 分层架构是软件开发中一种常见且广泛应用的架构模式。它通过将应用程序划分为不同的层次&#xff0c;每一层都承担特定的职责&#xff0c;从而帮助开发者组织代码、简化复杂性&#xff0c;并增强系统的可维护性和可扩展性。本文将详细…

asio之select_interrupter

简介 select_interrupter用于唤醒reactor的事件循环&#xff0c;其是对不同唤醒机制的别名 定义 在有eventfd时&#xff0c;表示的是eventfd_select_interrupter&#xff0c;在window平台下使用的是socket_select_interrupter &#xff0c;否则表示的是pipe_select_interrup…

如何去掉el-input-number两侧的上下按键

期初做法 输入的数据都是数字&#xff0c;就想着使用number类型的输入框但是输入框很小的情况下&#xff0c;就会导致上下按键特别占地方&#xff0c;所以想去掉使用deep 语法进行样式覆盖 <style scoped> /deep/ input::-webkit-outer-spin-button, /deep/ input::-webk…

适合度与挑战并存的计算机相关专业!计算机行业前景看好!

作为即将踏入大学校门的高考生&#xff0c;我在选择专业时&#xff0c;计算机相关专业无疑是一个热门选项。然而&#xff0c;随着市场竞争的加剧和行业饱和度的提高&#xff0c;我对此类专业的未来发展产生了些许疑虑。  首先&#xff0c;计算机科学与技术、人工智能、网络安…

char 型变量中能不能存贮一个中文汉字?为什么?

在 Java 中&#xff0c;char 类型变量可以存储一个中文汉字&#xff0c;这是因为 char 类型使用 Unicode 编码&#xff0c;而 Unicode 编码字符集包括了大量的汉字。详细解释如下&#xff1a; Unicode 和 Java 中的 char 类型 Unicode 编码&#xff1a; Unicode 是一种字符编码…

数据仓库之Kappa架构

Kappa架构是一种简化的数据处理架构&#xff0c;旨在处理实时数据流&#xff0c;解决传统Lambda架构中批处理和实时处理的复杂性。Kappa架构完全基于流处理&#xff0c;不区分批处理和实时处理&#xff0c;所有数据都是通过流处理系统进行处理。以下是对Kappa架构的详细介绍&am…

【ArcGIS微课1000例】0120:ArcGIS批量修改符号的样式(轮廓)

ArcGIS可以批量修改符号的样式,如样式、填充颜色、轮廓等等。 文章目录 一、加载实验数据二、土地利用符号化三、批量修改符号样式四、注意事项一、加载实验数据 订阅专栏后,从私信查收专栏配套的完整实验数据包,打开0120.rar中的土地利用数据,如下图所示: 查看属性表: …

事务所管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;客户管理&#xff0c;评论管理&#xff0c;基础数据管理&#xff0c;公告信息管理 客户账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;律师管理&#xff0…

如果搜索一定超时,如何用dp来以空间换时间

E - Alphabet Tiles (atcoder.jp) 题目大意&#xff1a;1到k长度的字符串时&#xff0c;在A-Z给定数量下&#xff0c;搭配出多少种不同的字符串 思路 排列组合&#xff0c;会死人的 暴搜&#xff1a;可以解决&#xff0c;但是时间太长 dp&#xff1a;考虑前 i 个字母&…

下载lombok.jar包,简化类的代码

Download (projectlombok.org) 去这个网站下载lombok.jar包 打开这个包文件的位置,拖到项目lib文件夹: 在这里右键添加为库(Add as library)。 添加这三个注解即可&#xff0c;类里面不需要其他东西了

浏览器 插件 Lighthouse

Lighthouse是一款开源的自动化工具&#xff0c;它能够帮助改善你的web应用程序的性能、质量和正确性。你可以在任何网页上运行它&#xff0c;无论是公开的还是需要认证的。 Lighthouse有一款Chrome扩展插件&#xff0c;也可以在Chrome DevTools中使用&#xff0c;或者作为Node…

【代码随想录】【算法训练营】【第41天】 [416]分割等和子集

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 40&#xff0c;休息&#xff0c;休息一下~ day 41&#xff0c;艰难的周一~ 题目详情 [416] 分割等和子集 题目描述 416 分割等和子集 解题思路 前提&#xff1a;是否可以将数组分为和相等的…

css中content属性你了解多少?

在CSS中&#xff0c;content属性通常与伪元素&#xff08;如 ::before 和 ::after&#xff09;一起使用&#xff0c;用于在元素的内容之前或之后插入生成的内容。这个属性不接受常规的HTML内容&#xff0c;而是接受一些特定的值&#xff0c;如字符串、属性值、计数器值等。 以…

计算机组成原理-期末考前常见简答题总结

1、简述冯-诺伊曼计算机的主要设计思想&#xff0c;它有哪些部件构成&#xff1f; 主要思想&#xff1a;存储程序和程序控制。将解题程序防止存储器中&#xff0c;程序控制&#xff1a;控制器顺序执行程序&#xff0c;按指令功能控制全机协调地完成运算任务。主要部件有控制器…

从零开始精通Onvif之图片抓拍

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 概述 在视频监控系统中&#xff0c;图片抓拍功能&#xff08;也称为快照功能&#xff09;是指通过摄像头或其他视频采集设备&#xff0c;将实时…

NPM 包管理器简介

目录 官方数据 npm 简介 包 安装所有依赖 安装单个包 更新包 版本控制 运行任务 官方数据 包量高达310w&#xff0c; 6月份的第三周下载量高达600亿&#xff0c;5月份下载量更是高达2473亿&#xff0c;这惊人的数字无外乎体现当今互联网的活跃程度和仍旧处于高速发展阶…

Web前端开发实战:HTML5+CSS3+JavaScript+Vue+Bootstrap

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…