手把手教你:微信小程序实现语音留言功能

在微信小程序中,语音留言功能为用户提供了便捷的交流方式。本文将带你一步步了解如何在微信小程序中实现语音留言功能。

实现步骤

1、在index.wxml中,添加以下代码:

<view class="container"><button bindtap="startRecord">开始录音</button><button bindtap="stopRecord">停止录音</button><button bindtap="playVoice">播放语音</button><button bindtap="uploadVoice">上传语音</button>
</view>

2、在index.wxss中,添加以下样式:

.container {display: flex;flex-direction: column;align-items: center;margin-top: 50px;
}button {margin: 10px;width: 200px;
}

3、在index.js中,添加以下代码:

Page({data: {recorderManager: null,voicePath: '',},onLoad: function() {this.initRecorderManager();},// 初始化录音管理器initRecorderManager: function() {const that = this;this.data.recorderManager = wx.getRecorderManager();this.data.recorderManager.onStart(() => {console.log('recorder start');});this.data.recorderManager.onStop((res) => {console.log('recorder stop', res);that.setData({voicePath: res.tempFilePath});});},// 开始录音startRecord: function() {const options = {duration: 60000, // 录音时长,单位 mssampleRate: 44100, // 采样率numberOfChannels: 1, // 录音通道数encodeBitRate: 192000, // 编码码率format: 'mp3', // 音频格式,有效值 aac/mp3};this.data.recorderManager.start(options);},// 停止录音stopRecord: function() {this.data.recorderManager.stop();},// 播放语音playVoice: function() {wx.playVoice({filePath: this.data.voicePath,success: function() {console.log('播放成功');},fail: function() {console.log('播放失败');}});},// 上传语音uploadVoice: function() {wx.uploadFile({url: '你的服务器地址', // 服务器地址filePath: this.data.voicePath,name: 'file',formData: {'user': 'test'},success: function(res) {console.log('上传成功', res);},fail: function() {console.log('上传失败');}});}
});

用户可以录制、播放和上传语音,服务器端负责处理和存储语音文件。希望本文对您有所帮助!

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

文件操作和InputStream,OutputStream的用法

“他越拧巴&#xff0c;我越喜欢&#xff01;” 文件&#xff1a; 此处谈到的文件&#xff0c;本身有很多的含义。 狭义上的文件&#xff0c;特指 硬盘上的文件&#xff08;以及保存文件的目录&#xff09;。 广义上的文件&#xff0c;计算机上的很多硬件设备&#xff0c;软…

pick你的第一个人形机器人——青龙强化学习环境测试

文章目录 一、环境配置二、开始训练三、训练成果 最近感受到的大趋势是具身智能&#xff0c;强化学习&#xff0c;模仿学习做人形机器人&#xff0c;这个赛道很火&#xff0c;颇有前些年全力投入做自动驾驶的架势&#xff0c;正好最近用强化学习解决POMDP问题接触到了强化学习&…

怎么检查cuda是否安装成功(以及查看cuda的安装位置)

方法一&#xff1a; winr&#xff0c;再cmd&#xff0c;再在命令行中输入 nvcc -V 可以查看版本信息 方法二&#xff1a; winr&#xff0c;再cmd&#xff0c;再在命令行中输入 nvidia-smi 可以查看版本信息 方法三&#xff1a; 使用python,pytorch代码 import torch # 如果p…

Unet改进42:添加ACConv2d|使用一维非对称卷积来增强平方卷积核

本文内容:在不同位置添加ACConv2d 目录 论文简介 1.步骤一 2.步骤二 3.步骤三 4.步骤四 论文简介 由于在给定的应用环境中设计合适的卷积神经网络(CNN)架构通常需要大量的人工工作或大量的GPU时间,研究社区正在征求架构中立的CNN结构,它可以很容易地插入到多个成熟的架…

C++:数组与字符串

一、数组 数组是一种存储若干元素的数据类型&#xff0c;在诸多编程语言中存在&#xff0c;其显著的特点是元素通常是在物理层面上连续存储的&#xff08;逻辑上的数组&#xff0c;比如链表&#xff0c;可能不是&#xff09;&#xff0c;并且具有极快的元素访问速度。 数组通常…

Spring Cloud Alibaba-(5)Seata【分布式事务】

Spring Cloud Alibaba-&#xff08;1&#xff09;搭建项目环境 Spring Cloud Alibaba-&#xff08;2&#xff09;Nacos【服务注册与发现、配置管理】 Spring Cloud Alibaba-&#xff08;3&#xff09;OpenFeign【服务调用】 Spring Cloud Alibaba-&#xff08;4&#xff09;Sen…

P1516 青蛙的约会(exgcd以及相关结论)

非常好的题&#xff0c;适合入门拓展欧几里得算法以及相关结论。 结论 ax by gcd(a,b) gcd(b,a%b) 由此递归求解即可。 int exgcd(int a,int b,int &x,int &y){// 求解 ax by gcd(a,b)if(!b){x 1,y 0;return a;}int g exgcd(b,a%b,x,y);int temp x;x y…

NLP 序列标注任务核心梳理

句向量标注 用 bert 生成句向量用 lstm 或 bert 承接 bert 的输出&#xff0c;保证模型可以学习到内容的连续性。此时 lstm 输入形状为&#xff1a; pooled_output.unsqueeze(0) (1, num_sentence, vector_size) 应用场景 词性标注句法分析 文本加标点 相当于粗粒度的分词任…

8590 队列的应用——银行客户平均等待时间

### 思路 1. **初始化队列**&#xff1a;使用InitQueue函数初始化一个队列&#xff0c;用于存储客户的到达时刻和办理时间。 2. **读取输入**&#xff1a;读取客户总人数和每个客户的到达时刻及办理时间。 3. **模拟业务办理**&#xff1a; - 维护一个当前时间变量currentTi…

【路径规划】 红嘴蓝鹊优化器:一种用于2D/3D无人机路径规划和工程设计问题的新型元启发式算法

摘要 本文提出了一种新型元启发式算法——红嘴蓝鹊优化器&#xff08;RBMO&#xff09;&#xff0c;用于解决2D和3D无人机路径规划以及复杂工程设计问题。RBMO灵感来源于红嘴蓝鹊的群体合作行为&#xff0c;包括搜索、追逐、捕猎和食物储藏。该算法通过模拟这些行为&#xff0…

模板:JDBC 连接数据库并实现 CRUD

目录 前期准备&#xff1a; 1. 连接数据库 1.1 第一种 1.2 第二种 2. 增加 3. 修改 4. 删除 5. 查询 5.1 查询某个记录 5.2 查询单列数据 使用时&#xff0c;直接复制再修改一些数据即可&#xff1b; 声明&#xff1a;在对文件/变量命名时&#xff0c;没有做到见名知…

CompletableFuture如何优雅处理异步任务超时!妙就完了

文章目录 1. 主要解决哪些业务痛点&#xff1f;2. 流程分析3. 上代码4. 总结一波 1. 主要解决哪些业务痛点&#xff1f; 小强最近一直没打黑神话悟空&#xff0c;闷闷不乐的&#xff0c;我问咋回事&#xff0c;最近有啥烦心事么? 他不爽的跟我说了当他CompletableFuture进行…

css基础知识笔记

一言&#xff1a; “放任误解就是撒谎。” 文章目录 前言文章有误敬请斧正 不胜感恩&#xff01;CSS基础教程0.文本样式基础1. CSS选择器2. CSS布局技巧3. 响应式设计4. Emmet语法 总结 前言 写在开始&#xff1a; 今天来看一眼CSS基础知识。 好几天没更新了 先更一篇 文章有…

华为OD机试 - 需要打开多少监控器(Python/JS/C/C++ 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…

2024年最新网络协议分析器Wireshark抓包详细教程(更新中)

网络协议分析器 Wireshark 安装 Wireshark 是一个功能强大的网络协议分析器&#xff0c;早期叫作 Ethereal。它主要用于捕获网络数据包&#xff0c;并对这些数据包进行详细的解析和分析&#xff0c;帮助用户深入了解网络通信的细节。它支持多种网络协议&#xff0c;并提供详细…

银河麒麟桌面操作系统如何添加WPS字体

银河麒麟桌面操作系统如何添加WPS字体 1、使用场景2、操作方法步骤一&#xff1a;下载字体文件步骤二&#xff1a;打开终端步骤三&#xff1a;进入字体文件所在目录步骤四&#xff1a;拷贝字体文件到WPS字体目录步骤五&#xff1a;更新字体缓存步骤六&#xff1a;重启WPS Offic…

uni-app-通过vue-cli命令行快速上手

环境安装 全局安装 vue-cli npm install -g vue/cli创建uni-app 使用正式版&#xff08;对应HBuilderX最新正式版&#xff09; vue create -p dcloudio/uni-preset-vue my-project使用alpha版&#xff08;对应HBuilderX最新alpha版&#xff09; vue create -p dcloudio/uni-p…

Linux常用命令;Linux常用软件;Linux权限

一&#xff0c;常用命令 是人向计算机发送指令的语言。 命令的格式&#xff1a; 命令 [选项] [参数] 1、ls 展示当前目录下文件的命令 1、-l 展示详细信息。还有另外一种写法&#xff1a;ll&#xff08;字母 LL 小写&#xff09; 2、-S 按照文件大小倒序展示 3、-t…

1952. 三除数

目录 一&#xff1a;题目&#xff1a; 二&#xff1a;代码&#xff1a; 三&#xff1a;结果&#xff1a; 一&#xff1a;题目&#xff1a; 给你一个整数 n 。如果 n 恰好有三个正除数 &#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在整数 k &a…

【软件测试】性能测试-概念篇

目录 &#x1f334;什么是性能测试 &#x1f333;常见性能测试指标 &#x1f6a9;并发数 &#x1f6a9;吞吐量 &#x1f6a9;吞吐量分类 &#x1f3c0;按照请求分类:TPS和QTS &#x1f3c0;按照网络数据包划分:KB &#x1f6a9;响应时间 &#x1f6a9;资源利用率 &am…