微信小程序实现录音
作者:示羊online 时间:2024-04-22 13:25:41
本文实例为大家分享了微信小程序实现录音的具体代码,供大家参考,具体内容如下
为录音
录音中
wxml:
<!-- 开始录音 -->
<image src="/img/add_voice.png" class="add-voice" wx:if="{{record == 0 }}" bindtap="startRecord"></image>
<!-- 录音中 -->
<block wx:if="{{record == 1}}">
<view class='audio'>
<view class='laudio_btn' bindtap='remove'>
<image src='/img/btn_close2.png' style='width:26rpx;height:25rpx;'></image>
</view>
<text class='laudio_text1'>|</text>
<text class='laudio_text2'>{{formatedRecordTime}}</text>
<view class='laudio_pro'>
<image src='/img/btn_play2.png' style='width:100%;height:100%' catchtap='keep' wx:if="{{keep}}"></image>
<image src='/img/btn_play3.png' style='width:100%;height:100%' catchtap='pause' wx:else></image>
</view>
<text class='audio_text' catchtap='stopRecord'>完成</text>
</view>
</block>
wxss:
.add-voice {
width: 158rpx;
height: 158rpx;
}
.audio {
display: flex;
position: relative;
height: 140rpx;
line-height: 140rpx;
background: #f7f7f7;
width: 96%;
}
/* 传语音 */
.audio{
display: flex;
position: relative;
height:140rpx;
line-height: 140rpx;
background: #f7f7f7;
width: 96%;
}
/* 录语音 */
.laudio_btn{
/* width:26rpx;
height:26rpx; */
margin-left:42rpx
}
.audio_img{
position: absolute;
/* top:-15rpx; */
/* right:-15rpx; */
right: 0;
width:30rpx;
height:30rpx;
}
.audio_btn{
width:88rpx;
height:88rpx;
margin-top:28rpx;
margin-left:16rpx
}
.audio_pro{
margin-top:36rpx;
margin-left:20rpx;
width:300rpx;
}
.audio_text{
font-weight: bold;
margin-left:50rpx;
color:#90BED5;
font-size: 10pt
}
.laudio_text1{
font-size: 26rpx;
margin-left:20rpx;
color: #90BED5
}
.laudio_text2{
font-weight: bold;
font-size: 26rpx;
margin-left:20rpx;
color: #F8624E;
width: 381rpx;
}
.laudio_pro{
width:88rpx;
height:88rpx;
margin-top:28rpx;
}
js:
var util = require('../../utils/count.js') //计算时分秒函数
let radio = wx.getRecorderManager(); //创建录音
const app = getApp()
var recordTimeInterval; //录音 时分秒 '00:00'
Page({
data: {
record : 0, //未录音
formatedRecordTime: '00:00',
keep: true,
recordTime: 0
},
//开始录音
startRecord: function () {
var that = this
this.setData({ record: 1 })
recordTimeInterval = setInterval(function () { //计算时分秒
var recordTime = that.data.recordTime += 1
that.setData({
formatedRecordTime: util.formatTime(that.data.recordTime),
recordTime: recordTime
})
}, 1000)
const options = {
duration: 30000, //录音
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'mp3'
}
radio.start(options); //开始录音
radio.onStart((res => {
console.log('监听录音', res)
}));//监听录音事件
},
//暂停录音
keep() {
radio.resume();
this.setData({ keep: false })
clearInterval(recordTimeInterval);
},
//继续录音
pause() {
var that = this
this.setData({ keep: true, })
recordTimeInterval = setInterval(function () { //计算时分秒
var recordTime = that.data.recordTime += 1
that.setData({
formatedRecordTime: util.formatTime(that.data.recordTime),
recordTime: recordTime
})
}, 1000)
},
//结束录音
stopRecord: function () {
console.log('录音结束了')
var that = this;
clearInterval(recordTimeInterval);
radio.stop(); //录音结束
radio.onStop((res) => { //录音结束
// that.stopRecord
console.log('录音结束', res);
this.setData({
record: res.tempFilePath,
musicUrl: res.tempFilePath, //录音音频
duration: res.duration, //音频时长时间戳
record: true,
})
})
},
//取消录音
remove() {
radio.stop(); //结束录音
this.setData({ record: 0, recordTime: 0, play: false })
clearInterval(recordTimeInterval);
},
})
utils/count.js
function formatTime(time) {
if (typeof time !== 'number' || time < 0) {
return time
}
var hour = parseInt(time / 3600)
time = time % 3600
var minute = parseInt(time / 60)
time = time % 60
var second = time
return ([hour, minute, second]).map(function (n) {
n = n.toString()
return n[1] ? n : '0' + n
}).join(':')
}
function formatLocation(longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
module.exports = {
formatTime: formatTime,
formatLocation: formatLocation
}
播放音频:微信小程序实现播放音频
来源:https://blog.csdn.net/onion_line/article/details/86529049
标签:微信小程序,录音
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
js实现无需数据库的县级以上联动行政区域下拉控件
2024-01-17 01:05:53
![](https://img.aspxhome.com/file/2023/9/136499_0s.gif)
深入浅析python 协程与go协程的区别
2022-02-16 23:57:26
python3 反射的四种基本方法解析
2023-10-25 16:04:39
python实现二叉排序树
2022-08-26 04:34:37
![](https://img.aspxhome.com/file/2023/5/131235_0s.png)
python破解同事的压缩包密码
2022-09-25 01:09:34
![](https://img.aspxhome.com/file/2023/2/112102_0s.jpg)
从创建数据库到存储过程与用户自定义函数的小感
2024-01-16 23:42:05
关于淘宝页面编码的疑惑
2009-12-04 12:54:00
![](https://img.aspxhome.com/file/UploadPic/200912/4/p_large_lfyx_571d000732d42d0c-25s.jpg)
Go语言配置数据库连接池的实现
2024-01-20 00:51:49
Python的Tornado框架实现图片上传及图片大小修改功能
2023-10-27 06:23:43
Python操作dict时避免出现KeyError的几种解决方法
2022-12-30 14:48:26
用Python定时发送天气邮件
2022-09-22 15:11:31
![](https://img.aspxhome.com/file/2023/4/107184_0s.jpg)
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2024-05-08 10:10:47
同时安装sql2000和sql2005,经验点滴
2008-03-04 17:56:00
Python统计序列和文件中元素的频度
2021-02-03 15:03:43
pyspark操作hive分区表及.gz.parquet和part-00000文件压缩问题
2022-02-07 14:35:53
![](https://img.aspxhome.com/file/2023/0/79580_0s.png)
python中编写config文件并及时更新的方法
2021-08-01 05:44:39
利用Python实现Shp格式向GeoJSON的转换方法
2021-01-30 09:14:49
![](https://img.aspxhome.com/file/2023/1/121391_0s.jpg)
将MSSQL Server 导入/导出到远程服务器教程的图文方法分享
2024-01-13 21:55:42
![](https://img.aspxhome.com/file/2023/6/110986_0s.gif)
ASPJPEG组件使用详解(缩略图+水印)
2007-09-19 17:31:00
![](https://img.aspxhome.com/file/UploadPic/up/2007091917554027.jpg)
Mybatis update数据库死锁之获取数据库连接池等待
2024-01-26 20:40:10
![](https://img.aspxhome.com/file/2023/6/129126_0s.png)