小程序简单版录音机

先来看看效果

在这里插入图片描述

结构

先来看看页面结构

    <!-- 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 = this
    var second = _this.data.second
    var minute = _this.data.minute
    var 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() // 释放音频资源
        break
      case 1:
        clearInterval(_this.data.timer);
        // 暂停录音
        tape.pause()
        console.log('暂停录音');
        this.setData({
          state: 2 // 把state设置为2 （继续录音状态）
        })
        break
      case 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.tempFilePath
        console.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.tempFilePath
      console.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() // 释放音频资源
        break
      case 1:
        clearInterval(_this.data.timer);
        // 暂停录音
        tape.pause()
        console.log('暂停录音');
        this.setData({
          state: 2 // 把state设置为2 （继续录音状态）
        })
        break
      case 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.tempFilePath
        console.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.tempFilePath
      console.log('保存录音');
      wx.showToast({
        title: '保存录音成功',
        mask: true,
        duration: 500,
      })
    })
  },



  // 计时器
  setInterval() {
    const _this = this
    var second = _this.data.second
    var minute = _this.data.minute
    var 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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【人工智能】第七部分：ChatGPT的未来展望

【人工智能】第七部分：ChatGPT的未来展望

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
kafka安装流程

kafka安装流程

安装kafka前需要安装zookeeper zookeeper安装教程 1.新建一个logs文件夹 2.修改配置文件 3.修改listeners参数 4.以管理员身份启动kafka服务 .\bin\windows\kafka-server-start.bat .\config\server.properties 如果报 输入行太长。 命令语法不正确。 解决方案如下&#x…
阅读更多...
基于工业互联网打造敏捷供应链的实现方式：创新路径与实践应用

基于工业互联网打造敏捷供应链的实现方式：创新路径与实践应用

引言 工业互联网和敏捷供应链是当今制造业发展中的两个重要概念。工业互联网以数字化、网络化和智能化为核心&#xff0c;致力于将传统工业生产与互联网技术相融合&#xff0c;从而实现生产过程的高效、智能和灵活。而敏捷供应链则强调快速响应市场需求、灵活调整生产和供应计划…
阅读更多...
调用华为云实现人证核身证件版（二要素）

调用华为云实现人证核身证件版（二要素）

目录 1.作者介绍2.华为云人证核身2.1什么是人证核身2.2应用场景2.3限制要求 3.流程介绍3.1调用API实现3.2调用SDK实现 1.作者介绍 高凡平&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2023级研究生 研究方向&#xff1a;数码印花缺陷检测 电子邮件&#xf…
阅读更多...
基于扩散动力学模型的乳腺癌在不完整DCE-MRI中的分割

基于扩散动力学模型的乳腺癌在不完整DCE-MRI中的分割

文章目录 Diffusion Kinetic Model for Breast Cancer Segmentation in Incomplete DCE-MRI摘要方法实验结果 Diffusion Kinetic Model for Breast Cancer Segmentation in Incomplete DCE-MRI 摘要 针对现有方法需要完整时间序列数据(尤其是增强后图像)的问题,DKM仅利用预增…
阅读更多...
wordpress里面嵌入哔哩哔哩视频的方法

wordpress里面嵌入哔哩哔哩视频的方法

我们正常如果从blibli获取视频分享链接然后在wordpress里面视频URL插入&#xff0c;发现是播放不了的 而视频嵌入代码直接粘贴呢窗口又非常的小 非常的难受&#xff0c;就需要更改一下代码。你可以在在allowfullscreen"true"的后面&#xff0c;留1个空格&#xff…
阅读更多...
掌控数据流：深入解析 Java Stream 编程

掌控数据流：深入解析 Java Stream 编程

Java 8 引入了一种新的抽象称为流&#xff08;Stream&#xff09;&#xff0c;它可以让你以一种声明的方式处理数据。Java 8 Stream API 可以极大提高 Java 程序员的生产力&#xff0c;使代码更简洁&#xff0c;更易读&#xff0c;并利用多核架构进行外部迭代。这里将详细介绍 …
阅读更多...
Python Flask实现蓝图Blueprint配置和模块渲染

Python Flask实现蓝图Blueprint配置和模块渲染

Python基础学习&#xff1a; Pyhton 语法基础Python 变量Python控制流Python 函数与类Python Exception处理Python 文件操作Python 日期与时间Python Socket的使用Python 模块Python 魔法方法与属性 Flask基础学习&#xff1a; Python中如何选择Web开发框架&#xff1f;Pyth…
阅读更多...
SQLserver通过CLR调用TCP接口

SQLserver通过CLR调用TCP接口

一、SQLserver启用CLR 查看是否开启CRL&#xff0c;如果run_value1&#xff0c;则表示开启 EXEC sp_configure clr enabled; GO RECONFIGURE; GO如果未启用&#xff0c;则执行如下命令启用CLR sp_configure clr enabled, 1; GO RECONFIGURE; GO二、创建 CLR 程序集 创建新项…
阅读更多...
【算法】深入浅出爬山算法：原理、实现与应用

【算法】深入浅出爬山算法：原理、实现与应用

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…
阅读更多...
简单聊下办公白环境

简单聊下办公白环境

在当今信息化时代&#xff0c;办公环境对于工作效率和员工满意度有着至关重要的影响。而白名单作为一种网络安全策略&#xff0c;其是否适合办公环境&#xff0c;成为了许多企业和组织需要思考的问题。本文将从白名单的定义、特点及其在办公环境中的应用等方面&#xff0c;探讨…
阅读更多...
Excel 生成所在月份的每一天列表

Excel 生成所在月份的每一天列表

Excel 的 A2 格是日期 A1Fecha201/03/24 需要生成该日期所在月份的每一天的列表 A1WholeMonth201/03/24302/03/24403/03/24504/03/24605/03/24706/03/24807/03/24908/03/241009/03/241110/03/241211/03/241312/03/241413/03/241514/03/241615/03/241716/03/241817/03/241918…
阅读更多...
操作系统入门系列-MIT6.828（操作系统工程）学习笔记（三）---- xv6初探与实验一(Lab: Xv6 and Unix utilities)

操作系统入门系列-MIT6.828（操作系统工程）学习笔记（三）---- xv6初探与实验一(Lab: Xv6 and Unix utilities)

系列文章目录 操作系统入门系列-MIT6.S081&#xff08;操作系统&#xff09;学习笔记&#xff08;一&#xff09;---- 操作系统介绍与接口示例 操作系统入门系列-MIT6.828&#xff08;操作系统工程&#xff09;学习笔记&#xff08;二&#xff09;----课程实验环境搭建&#x…
阅读更多...
Git - 详解 创建一个新仓库 / 推送现有文件夹 / 推送现有的 Git 仓库 到私有Gitlab

Git - 详解 创建一个新仓库 / 推送现有文件夹 / 推送现有的 Git 仓库 到私有Gitlab

文章目录 【推送现有文件夹】详细步骤指令说明Git 全局设置设置Git全局用户名设置Git全局电子邮件地址 推送现有文件夹1. 进入现有文件夹2. 初始化Git仓库并设置初始分支为main3. 添加远程仓库4. 添加所有文件到暂存区5. 提交更改6. 推送代码到远程仓库并设置上游分支 创建一个…
阅读更多...
FISCO BCOS助力郑州数据交易中心“碳账户”小程序上线

FISCO BCOS助力郑州数据交易中心“碳账户”小程序上线

近年来&#xff0c;科技和数字化成为推进可持续绿色发展的关键词。在第53个世界环境日来临之际&#xff0c;由FISCO BCOS支持建设的郑州数据交易中心双碳数据服务专区迎来了新进展&#xff01;近日&#xff0c;专区正式以"碳账户"小程序对外提供多种形式的碳数据服务…
阅读更多...
如何在MySQL中创建不同的索引和用途？

如何在MySQL中创建不同的索引和用途？

目录 1 基本的 CREATE INDEX 语法 2 创建单列索引 3 创建多列索引 4 创建唯一索引 5 创建全文索引 6 在表创建时添加索引 7 使用 ALTER TABLE 添加索引 8 删除索引 9 索引管理的最佳实践 10 示例 在 MySQL 中&#xff0c;索引&#xff08;index&#xff09;是一种用于…
阅读更多...
人形机器人位置控制新方案！法国洛林大学诞生多触点全身力控制控制器

人形机器人位置控制新方案！法国洛林大学诞生多触点全身力控制控制器

对人形机器人的接触力间接控制&#xff0c;以增强机器人在复杂环境中的感知与交互能力。 这是来自法国洛林大学的新研究&#xff0c;研究团队研发了一款多触点全身力控制控制器。 在针对全尺寸人形机器人Talos的实验中&#xff0c;通过应用该控制器的新方法&#xff0c;成功验…
阅读更多...
香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别

香橙派Orange AI Pro / 华为昇腾310芯片 部署自己训练的yolov8模型进行中国象棋识别 一、香橙派简介1.1、香橙派 AI Pro 硬件资源介绍1.2、华为昇腾310&#xff08;Ascend310&#xff09; 简介1.3、 昇腾310AI能力和CANN 简介昇腾310 NPU简介 二、远程环境配置2.1、ssh2.2、vnc…
阅读更多...
Day23 自定义对话框服务

Day23 自定义对话框服务

​本章节实现了，自定义对话框服务的功能 当现有的对话框服务无法满足特定需求时，我们可以采用自定义对话框的解决方案，以更好地满足一些特殊需求。 一.自定义对话框主机服务步骤 在Models 文件夹中，再建立一个 IDialogHostService 接口类，继承自 IDialogService 对话框服…
阅读更多...
CrawlSpace爬虫部署框架介绍

CrawlSpace爬虫部署框架介绍

CrawlSpace爬虫部署框架介绍 全新的爬虫部署框架&#xff0c;为了适应工作的爬虫部署的使用&#xff0c;需要自己开发一个在线编写爬虫及部署爬虫的框架&#xff0c;框架采用的是Django2.2bootstap依赖scrapyd开发的全新通用爬虫在线编辑部署及scrapy项目的部署框架。项目实现的…
阅读更多...
最新文章

Copyright @ 2022~2023