微信小程序實現(xiàn)錄音

更新時間：2022年06月24日 14:06:31 作者：示羊online

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)錄音，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)錄音的具體代碼，供大家參考，具體內容如下

為錄音

錄音中

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') //計算時分秒函數(shù)
let radio = wx.getRecorderManager(); //創(chuàng)建錄音
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('監(jiān)聽錄音', res)
? ? }));//監(jiān)聽錄音事件
? },
? //暫停錄音
? keep() {
? ? radio.resume();
? ? this.setData({ keep: false })
? ? clearInterval(recordTimeInterval);
? },
? //繼續(xù)錄音
? 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
}

播放音頻：微信小程序實現(xiàn)播放音頻

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: