当前位置: 首页 > 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()},
})
http://www.lryc.cn/news/375394.html

相关文章:

  • 基于c语言的简单的数据库
  • Docker 容器内运行的 Neo4j 实例 安装apoc插件
  • PostgreSQL源码分析——审计插件pgaudit
  • ijkplayer编译 android版本
  • 面向对象的进阶---static
  • React useContext
  • 【尚庭公寓SpringBoot + Vue 项目实战】用户管理(十五)
  • laravel中如何向字段标签添加工具提示
  • 高考志愿填报,选专业应该考虑哪些因素?
  • 图书管理系统代码(Java)
  • Nginx反向代理Kingbase数据库
  • 没有字幕的高清爆款视频素材去哪里找?无字幕无水印素材网站分享
  • Java23种设计模式(一)
  • Spring Boot集成websocket实现webrtc功能
  • StableSwarmUI 安装教程(详细)
  • 利用Unity XR交互工具包实现简易VR菜单控制——6.18山大软院项目实训
  • 区间预测 | Matlab实现CNN-ABKDE卷积神经网络自适应带宽核密度估计多变量回归区间预测
  • 【机器学习】第6章 支持向量机(SVM)
  • hive笔记
  • kali - 配置静态网络地址 + ssh 远程连接
  • Redis常见数据类型及其常用命令详解
  • JMU 数科 数据库与数据仓库期末总结(4)实验设计题
  • Go版RuoYi
  • 八股系列 Flink
  • HTTP/2 协议学习
  • “先票后款”条款的效力认定
  • CSDN 自动上传图片并优化Markdown的图片显示
  • 常见日志库NLog、log4net、Serilog和Microsoft.Extensions.Logging介绍和区别
  • 【PX4-AutoPilot教程-TIPS】离线安装Flight Review PX4日志分析工具
  • 探究Spring Boot自动配置的底层原理