微信小程序写一个录音机

微信小程序写一个录音机

代码:
wxml:

<view class="container"><view class="duration">{{duration}}</view><button bindtap="startRecord" class="btn">开始录音</button><button bindtap="stopRecord" class="btn">停止录音</button><button bindtap="playRecord" class="btn">播放录音</button>
</view>
<audio id="audio" src="{{recordPath}}" controls></audio>

wxss:

.container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 84vh;
}.btn {margin: 10px;padding: 10px 20px;background-color: #4CAF50;color: white;border: none;border-radius: 5px;
}.duration {margin-top: -50px;font-size: 24px;
}

js:

let timer = null;
Page({data: {isRecording: false,recordPath: '',duration: '00:00'},startRecord: function() {const recorderManager = wx.getRecorderManager();this.setData({isRecording: true,duration: '00:00'});let startTime = new Date().getTime();timer = setInterval(() => {let currentTime = new Date().getTime();let diff = currentTime - startTime;let m = Math.floor(diff / 60000 % 60);let s = Math.floor(diff / 1000 % 60);this.setData({duration: `${this.formatTime(m)}:${this.formatTime(s)}`});}, 1000);recorderManager.start({format: 'mp3'});recorderManager.onStart(() => {console.log('recorder start');});recorderManager.onStop((res) => {console.log('recorder stop', res);this.setData({recordPath: res.tempFilePath,isRecording: false});});},stopRecord: function() {const recorderManager = wx.getRecorderManager();clearInterval(timer);recorderManager.stop();},playRecord: function() {this.setData({// isRecording: true,duration: '录音播放'});const audioCtx = wx.createInnerAudioContext();audioCtx.src = this.data.recordPath;audioCtx.play();},formatTime: function(time) {return time < 10 ? `0${time}` : time;}
});

json:

{"usingComponents": {},"navigationBarTitleText": "录音机"
}

以上就是实现一个录音机的小程序!

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

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

相关文章

Node.js版本管理工具-NVM

在开发 Node.js 项目时&#xff0c;经常会遇到需要切换不同版本的 Node.js 的情况。为了方便管理和切换各个版本&#xff0c;我们可以使用一些 Node.js 版本管理工具。 Node Version Manager&#xff1a;简称NVM&#xff0c;最流行的 Node.js 版本管理工具之一。它允许我们在同…

计算机体系结构重点学习(一)

从外部I/O与上层应用交互的整体软硬件过程 上层应用发出I/O请求&#xff1a;上层应用程序&#xff0c;如一个文本编辑器、网络浏览器或者任何软件应用&#xff0c;需要读取或写入数据时&#xff0c;会通过调用操作系统提供的API&#xff08;如文件操作API、网络操作API等&…

Python学习打卡:day04

day4 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day428、while 循环的嵌套应用29、while 循环案例 — 九九乘法表补充知识示例&#xff1a;九九乘法表 30、for 循环基本语法while 和 for 循环对比f…

基于多头注意力机制卷积神经网络结合双向门控单元CNN-BIGRU-Mutilhead-Attention实现柴油机故障诊断附matlab代码

在使用这些深度学习库时&#xff0c;你可以按照以下步骤构建CNN-BIGRU-Multihead-Attention模型&#xff1a; 导入所需的库和模块。例如&#xff0c;在使用TensorFlow时&#xff0c;你可以导入tensorflow库和其他需要的模块。 定义输入层。根据你的数据&#xff0c;定义适当的…

Android屏幕旋转流程(1)

&#xff08;1&#xff09;Gsensor的注册和监听 App -->I2C过程&#xff1a;App通过SensorManager.getSystemServer调用到SystemSensorManager&#xff0c;SystemSensorManager通过jni调用到SensorManager.cpp&#xff0c;后通过binder调用到SensorService。SensorService通…

SpringBoot+Maven笔记

文章目录 1、启动类2、mapper 接口3、控制类4、补充&#xff1a;返回数据时的封装5、补充a、mybatisplus 1、启动类 在启动类上加入MapperScan扫描自己所写的mapper接口 package com.example.bilili_springboot_study;import org.mybatis.spring.annotation.MapperScan; impo…

CorelDraw 2024软件安装包下载 丨不限速下载丨亲测好用

​简介&#xff1a; CorelDRAW Graphics Suite 订阅版拥有配备齐全的专业设计工具包&#xff0c;可以通过非常高的效率提供令人惊艳的矢量插图、布局、照片编辑和排版项目。价格实惠的订阅就能获得令人难以置信的持续价值&#xff0c;即时、有保障地获得独家的新功能和内容、…

生产中的 RAG:使你的生成式 AI 项目投入运营

作者&#xff1a;来自 Elastic Tim Brophy 检索增强生成 (RAG) 为组织提供了一个采用大型语言模型 (LLM) 的机会&#xff0c;即通过将生成式人工智能 (GenAI) 功能应用于其自己的专有数据。使用 RAG 可以降低固有风险&#xff0c;因为我们依赖受控数据集作为模型答案的基础&…

【菜狗学前端】uniapp(vue3|微信小程序)实现外卖点餐的左右联动功能

记录&#xff0c;避免之后忘记...... 一、目的&#xff1a;实现左右联动 右->左 滚动&#xff08;上拉/下拉&#xff09;右侧&#xff0c;左侧对应品类选中左->右 点击左侧品类&#xff0c;右侧显示对应品类 二、实现右->左 滚动&#xff08;上拉/下拉&#xff09;右…

什么是深拷贝;深拷贝和浅拷贝有什么区别;深拷贝和浅拷贝有哪些方法(详解)

目录 一、为什么要区别深拷贝和浅拷贝 二、浅拷贝 2.1、什么是浅拷贝 2.2、浅拷贝的方法 使用Object.assign() 使用展开运算符(...) 使用数组的slice()方法&#xff08;仅适用于数组&#xff09; 2.3、关于赋值运算符&#xff08;&#xff09; 三、深拷贝 3.1、什么是…

selenium使用已经打开的浏览器

Selenium 本身不支持直接连接到一个已经打开的浏览器页面。Selenium 启动的浏览器实例是一个全新的会话&#xff0c;它与手动打开的浏览器页面是分开的。但是&#xff0c;有一些变通的方法可以实现类似的效果。 一种方法是通过附加代理连接到已经打开的浏览器。下面是如何实现…

解决:GoLand能断点,但无法下一步debug | 下一步按钮是灰的

目录 1. 背景2. 解决方案 1. 背景 突然发现goLand能断点成功&#xff0c;但是无法debug下一步&#xff0c;又急&#xff0c;网上一下子没找到解决方案&#xff0c;最后花了好多时间&#xff0c;打印了好多日志才定位到代码问题所在&#xff0c;后面花时间研究了一下&#xff0…

C++ 20新特性之线程与jthread

&#x1f4a1; 如果想阅读最新的文章&#xff0c;或者有技术问题需要交流和沟通&#xff0c;可搜索并关注微信公众号“希望睿智”。 为什么要引入jthread 在C 11中&#xff0c;已经引入了std::thread。std::thread为C标准库带来了一流的线程支持&#xff0c;极大地促进了多线程…

leetcode第709题:转换成小写字母

注意字符不仅有26个英文字母&#xff0c;还有特殊字符。特殊字符的话&#xff0c;原样输出。 public class Solution {public char toLowChar(char c){if(c>a&&c<z){return c;}else if(c>A&&c<Z){int n(int)c32;return (char)n;}return c;}publi…

Java数据结构之ArrayList(如果想知道Java中有关ArrayList的知识点,那么只看这一篇就足够了!)

前言&#xff1a;ArrayList是Java中最常用的动态数组实现之一&#xff0c;它提供了便捷的操作接口和灵活的扩展能力&#xff0c;使得在处理动态数据集合时非常方便。本文将深入探讨Java中ArrayList的实现原理、常用操作以及一些使用场景。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨…

useEffect的概念以及使用(对接口)

// useEffect的概念以及使用 import {useEffect, useState} from reactconst Url"http://geek.itheima.net/v1_0/channels"function App() {// 创建状态变量const [lustGet,setLustGet]useState([]);// 渲染完了之后执行这个useEffect(() > {// 额外的操作&#x…

软考初级网络管理员__标准化基础知识单选题

1.张某购买了一张有注册商标的应用软件光盘&#xff0c;擅自复制出售&#xff0c;则其行为侵犯了()。 注册商标专用权 光盘所有权 软件著作权 软件著作权与商标权 2.以下关于软件著作权产生的时间&#xff0c;表述正确的是()。 自软件首次公开发表时 自开发者有开发意图…

如何进行两表数据合并-即包含两张表的所有数据

如果第二张表的数据量多于第一张表&#xff0c;并且您希望最终的表包含两张表的所有数据&#xff0c;即使某些数据在一张表中不存在&#xff0c;可以使用FULL OUTER JOIN。然而&#xff0c;需要注意的是&#xff0c;MySQL不支持FULL OUTER JOIN&#xff0c;但是可以通过结合LEF…

红队攻防渗透技术实战流程:组件安全:SolrShirolog4j

红队攻防渗透实战 1. 组件安全1.1 Solr1.1.1 命令执行(CVE-2019-17558)1.1.2 远程命令执行漏洞(CVE-2019-0193)1.1.3 Apache Solr 文件读取&SSRF (CVE-2021-27905)1.2 Shiro:1.2.1 CVE_2016_4437 Shiro-550+Shiro-7211.2.2 CVE-2020-119891.2.3 CVE-2020-19571.2.4 CVE-…

【TypeScript】泛型工具

跟着 小满zs 学 ts&#xff1a;学习TypeScript24&#xff08;TS进阶用法-泛型工具&#xff09;_ts泛型工具-CSDN博客 Partial 所有属性可选的意思Required 所有属性必选的意思Pick 提取部分属性Exclude 排除部分属性emit 排除部分属性并且返回新的类型 Partial 属性变为可选。…