JS实现一个微信录音功能过程示例详解

目录
  • 功能原型图
  • 拆解需求
  • 评估时间
  • 代码实现

功能原型图

其实就是微信发送语音的功能。没有转文字的功能。

拆解需求

根据原型图可以很容易的得出我们需要做的内容包括下面三个部分:

  • 接入微信的语音SDK
  • 调用微信SDK的API逻辑
  • 界面和交互的实现

其中第一点和第二点属于业务逻辑部分,第三点属于交互逻辑部分。对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过,我在vue中是这样拆分组件的

从原型图可以分析出如下的流程图:

评估时间

第三事情是评估时间。在接到这个需求的时候,我们需要假设我们在此之前没有接入过微信相关的SDK,并以此为前提进行工期的评估。

可以将该用户故事拆分为如下任务:

  • 微信语音SDK的技术调研(0.5天)
  • 输出开发设计文档(0.5天)
  • 接入微信语音SDK(0.5天)
  • 编码(1天)
  • 自测(0.5天)

随后将上面的时间都乘以2! 自此才可以将估算的工期上报给产品。多年的经验告诉自己,自己一开始估算的工期从来没够过。自行估算的时候,幻想的是在工作的时候能够一直保持专注。

就我自己而言,做不到,上班不可能不摸鱼!也是必须要摸鱼的。乘以2才是刚够而已。

代码实现

都说在实现代码之前要先设计,谋定而后动。我是这样做的,先想好文件夹创建,然后到文件的创建,再到具体文件中写出大体的框架。

需求并不复杂,只是一个界面中的一个模块。所以我只需要一个Record.vue来承载界面,一个use-record-layout.js来承载业务逻辑,以及一个use-record-interact.js来承接交互逻辑。

|__im-record
    |__Record.vue
    |__use-record-layout.js
    |__use-record-interact.js

为了便于说明,将这个聊天的界面简化如下:

<script setup>
import { useNamespace } from "@/use-namespace";
const ns = useNamespace('chat')
</script>
<template>
  <header :class="ns.b('header')"></header>
  <main :class="ns.b('main')">
    <section :class="[ns.b('record'), ns.w('record', 'toast')]">
      <div :class="ns.w('record', 'speak')"></div>
      <div :class="ns.w('record', 'pause')"></div>
    </section>
  </main>
  <footer :class="ns.w('button', 'wrap')">
    <button :class="ns.b('button')">
      <span>
        按住 说话
      </span>
    </button>
  </footer>
</template>

通过上面的代码片段可知,我们的主要的界面在section标签的record部分。

use-record-layout.js的主题代码如下:

  const recordStyle = {
    default: { }, // 默认样式/确定发送录音
    recording: { }, // 录音中
    pause: { }, // 暂停录音
    cancel: { } // 取消录音
  }
  const init = () => {
    initEvent()
    initStyle()
  }
  const initStyle = () => {
    recordStyle.default.is = true
  }
  const initEvent = () => {
    el.addEventListener('touchstart', handleTouchstart)
    el.addEventListener('touchmove', handleTouchmove)
    el.addEventListener('touchend', handleTouchend)
  }
  const axis = {
    posStart: 0, // 初始化起点坐标
    posMove: 0 // 初始化滑动坐标
  }
  const handleTouchstart = (event) => {
    event.preventDefault()
    axis.posStart = event.touches[0].pageY
    recordStyle.recording.is = true
  }
  const handleTouchmove = (event) => {
    event.preventDefault()
    axis.posMove = event.targetTouches[0].pageY
    const diffMove = axis.posMove - axis.posStart
    if (diffMove > DEFAULT_AXIS) {
      recordStyle.recording.is = true
    }
  }
  const handleTouchend = (event) => {
    event.preventDefault()
    recordStyle.default.is = true
  }
  init()

其中recordStyle是交互的结果,在这个需求当中,我们的界面的四种变化都对应其中一个的样式。

use-record-interact.js也很简单,注册微信录音功能 ️

const wx = 'wx'
const useRecordInteract = () => {
  const isAuth = localStorage.getItem('allowWxRecord')
  // 获取录音权限
  const authRecord = () => {
    if (!isAuth) {
      wx.startRecord()
      return
    }
    return isAuth
  }
  // 停止录音
  const stopRecord = () => {}
  // 上传录音
  const uploadRecord = () => {}
}

交互逻辑和业务逻辑的联动通过recordStyle对象的存取属性来实现,代码片段如下:

const interact = useRecordInteract()
const recordStyle = {
    default: {
      _is: false,
      get is() {
        return this._is
      },
      set is(value) {
        this._is = value
        if (value) {
          this.recording.is = false
          this.pause.is = false
          this.cancel.is = false
          interact.uploadRecord()
        }
      }
    },
    //...
}

实现了业务逻辑和交互逻辑的分离。

以上就是JS实现一个微信录音功能过程示例详解的详细内容,更多关于JS微信录音功能的资料请关注我们其它相关文章!

(0)

相关推荐

  • 微信js-sdk 录音功能的示例代码

    需求描述 制作一个H5页面,打开之后可以录音,并将录音文件提交至后台 微信录音最长时长为1min 微信官方文档--音频接口 代码如下 // isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 <div class="vm-voice-box" v-show="isVoice < 2"> <p v-show="!isVoice" @click="voiceStart"&

  • 微信小程序实现录音与音频播放功能

    目录 1.录音 1.1 案例 2.音频播放控制 2.1 案例 小程序继承了微信强大的语音处理功能,提供了录音.音频播放控制和背景音乐等功能,它们的功能不同,但有相似性. 1.录音 小程序提供了wx.startRecord(Object object)开始录音.wx.stopRecord()停止录音和RecorderManager录音管理器等接口对录音功能进行控制.因为RecorderManager录音管理器包含前两个接口的功能,所以这里只介绍RecorderManager. 接口 功能和用途 R

  • 微信公众号录音文件的播放与保存(amr文件转mp3)

    目录 音频转码工具 原理 JAVE 项目的问题 本项目特点 扩展 音频转码工具,主要用于将微信语音 amr 格式转换为 mp3 格式以便在 html5 的 audio 标签中进行播放 1.调用微信提供的接口获取录音的InputStream字节流 public InputStream getInputStream(String mediaId) { InputStream is = null; try { String URL_DOWNLOAD_TEMP_MEDIA = "https://api.

  • 微信开发之微信jssdk录音功能开发示例

    项目需求简单描述 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音.播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传到自己的服务器).注意,音频文件自上传时间算起在微信服务器的有效期为3天.由于后台从微信服务器下载的音频文件是amr格式的,需要后台先把amr文件转换成MP3,前端用audio播放.我们公司是购买阿里云的媒体处理服务进行文件转码的. 调用到的微信接口 // 开始录音接

  • 微信小程序用户后台定位及录音授权及请求示例

    目录 官方文档 小程序授权 获取用户授权设置 提前发起授权请求 scope 列表 授权有效期 注意事项 后台定位 案例:个人信息getUserInfo 录音等,可以写在onLaunch中 官方文档 <https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html> https://developers.weixin.qq.com/miniprogram/dev/api/open-api

  • 基于JS开发微信网页录音功能的实例代码

    具体代码如下所示: wx.ready(function () { var startRecordflag = false var startTime = null //btnRecord 为录音按钮dom对象 btnRecord.addEventListener('touchstart', function (event) { event.preventDefault(); startTime = newDate().getTime(); // 延时后录音,避免误操作 recordTimer =

  • JS实现一个微信录音功能过程示例详解

    目录 功能原型图 拆解需求 评估时间 代码实现 功能原型图 其实就是微信发送语音的功能.没有转文字的功能. 拆解需求 根据原型图可以很容易的得出我们需要做的内容包括下面三个部分: 接入微信的语音SDK 调用微信SDK的API逻辑 界面和交互的实现 其中第一点和第二点属于业务逻辑部分,第三点属于交互逻辑部分.对于业务逻辑和交互逻辑的关系在我的另外一篇文章描述过,我在vue中是这样拆分组件的 从原型图可以分析出如下的流程图: 评估时间 第三事情是评估时间.在接到这个需求的时候,我们需要假设我们在此之

  • 微信小程序之高德地图多点路线规划过程示例详解

    调用 如何调用高德api? 高德官方给出的https://lbs.amap.com/api/wx/summary/开放文档比较详细: 第一步,注册高德开发者 第二部,去控制台创建应用 即点击右上角的控制平台创建应用 创建应用绑定服务记得选择微信小程序:同时在https://lbs.amap.com/api/wx/gettingstarted中下载开发包 第三步,登陆微信公众平台在开发设置中将高德域名配置上 https://restapi.amap.com 第四步,打开微信开发者工具,打开微信小程

  • Python程序包的构建和发布过程示例详解

    关于我 编程界的一名小程序猿,目前在一个创业团队任team lead,技术栈涉及Android.Python.Java和Go,这个也是我们团队的主要技术栈. 联系:hylinux1024@gmail.com 当我们开发了一个开源项目时,就希望把这个项目打包然后发布到 pypi.org 上,别人就可以通过 pip install 的命令进行安装.本文的教程来自于 Python 官方文档 , 如有不正确的地方欢迎评论拍砖. 0x00 创建项目 本文使用到的项目目录为 ➜ packaging-tuto

  • python机器学习创建基于规则聊天机器人过程示例详解

    目录 聊天机器人 基于规则的聊天机器人 创建语料库 创建一个聊天机器人 总结 还记得这个价值一个亿的AI核心代码? while True: AI = input('我:') print(AI.replace("吗", " ").replace('?','!').replace('?','!')) 以上这段代码就是我们今天的主题,基于规则的聊天机器人 聊天机器人 聊天机器人本身是一种机器或软件,它通过文本或句子模仿人类交互. 简而言之,可以使用类似于与人类对话的软件进

  • JS实现简单的下雪特效示例详解

    目录 前言 主要实现代码 HTML代码 JS代码 前言 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行http://haiyong.site/xiaxue 首先看看项目结构,一张雪花图片,一个.html文件和 jquery-1.4.2.js 用到的雪花图片我放在这里了,或者可以直接用我上传到自己网站上的图片地址:http://haiyong.site/wp-content/uploads/2021/

  • Three.js实现雪糕地球的使用示例详解

    目录 前言 ThreeJS 基础——实现转动的球体 ThreeJS 纹理——实现转动的地球 交互式雪糕地球 添加 loading 效果 前言 最近的天气有几分酷热,去实验室的道路也有几分漫长,走着走着,小包感觉灵魂已经被热出窍了.回到实验室,把空调打开,雪糕吃上,静坐了几分钟,才重新感觉到灵魂的滋味,葛优躺在实验室的小床上,思维开始天马行空,世上有一万种方式能让小包凉快,但地球母亲呐,她却日渐炎热,谁能来给她降降温? 躺着躺着,进入了梦乡,小包梦到未来有一天,人类超级发达,可以穿梭时空,但发展的

  • JS实现大数相加大数相乘示例详解

    目录 JS大数相加.大数相乘 一.实现两个大数相加 二.实现两个大数相乘 JS大数相加.大数相乘 JavaScript 只有一种数字类型,可以使用也可以不使用小数点来书写数字. 在 JavaScript 中,数字不分为整数类型和浮点数类型,所有的数字都是浮点数类型.JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,此格式用 64 位存储数值.其中 0~51存储数字片段,52~62存储指数,63 位存储符号. 来看看 JavaScript 中数字的最大值和最小值:

  • SpringBoot框架集成ElasticSearch实现过程示例详解

    目录 依赖 与SpringBoot集成 配置类 实体类 测试例子 RestHighLevelClient直接操作 索引操作 文档操作 检索操作 依赖 SpringBoot版本:2.4.2 <dependencies> <!--lombok--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <opti

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

随机推荐