当前位置: 首页 > news >正文

微信小程序录音机源代码

<!-- <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()},
})

相关文章:

  • 中标新领域!亚信科技+用友网络,将助力广西某市城投集团玩转“人事”
  • 【Linux】版本
  • MySQL中的一行记录是怎么存储的
  • 【QT5】<重点> QT串口编程
  • Java 和 Kotlin Lambda 表达式详解
  • vue简介实例
  • 第二十七章HTML.CSS综合案例(三)
  • react中useEffect函数的详细用法
  • Unity3D MMORPG加载背包配置表详解
  • C#中数组ProtoBuf使用问题
  • c# 二维图形绘制实践
  • 【Python高级编程】OpenCV来处理视频数据
  • 【数据结构(邓俊辉)学习笔记】二叉搜索树02——查找、插入和删除
  • mysql对VARCHAR和int的误解
  • c++ | 动态编译|虚函数表|虚函数
  • JavaScript 如何正确处理 Unicode 编码问题!
  • 30秒的PHP代码片段(1)数组 - Array
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • cookie和session
  • docker-consul
  • Git 使用集
  • JAVA 学习IO流
  • JavaScript/HTML5图表开发工具JavaScript Charts v3.19.6发布【附下载】
  • leetcode98. Validate Binary Search Tree
  • nginx 负载服务器优化
  • opencv python Meanshift 和 Camshift
  • Phpstorm怎样批量删除空行?
  • Redis中的lru算法实现
  • Vue2.0 实现互斥
  • 第2章 网络文档
  • 近期前端发展计划
  • 什么软件可以提取视频中的音频制作成手机铃声
  • 数据库写操作弃用“SELECT ... FOR UPDATE”解决方案
  • 赢得Docker挑战最佳实践
  • 主流的CSS水平和垂直居中技术大全
  • 测评:对于写作的人来说,Markdown是你最好的朋友 ...
  • ​Java基础复习笔记 第16章:网络编程
  • ​如何防止网络攻击?
  • # windows 运行框输入mrt提示错误:Windows 找不到文件‘mrt‘。请确定文件名是否正确后,再试一次
  • ## 基础知识
  • #define,static,const,三种常量的区别
  • #include
  • #NOIP 2014# day.2 T2 寻找道路
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (06)Hive——正则表达式
  • (6)STL算法之转换
  • (k8s)Kubernetes 从0到1容器编排之旅
  • (Windows环境)FFMPEG编译,包含编译x264以及x265
  • (ZT)一个美国文科博士的YardLife
  • (二)延时任务篇——通过redis的key监听,实现延迟任务实战
  • (二十四)Flask之flask-session组件
  • (附源码)springboot太原学院贫困生申请管理系统 毕业设计 101517
  • (论文阅读26/100)Weakly-supervised learning with convolutional neural networks
  • (一)Docker基本介绍
  • (一)Mocha源码阅读: 项目结构及命令行启动