微信小程序?qū)崿F(xiàn)錄音
更新時(shí)間:2022年06月24日 14:06:31 作者:示羊online
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錄音,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)錄音的具體代碼,供大家參考,具體內(nèi)容如下
為錄音

錄音中

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%;
}
?
/* 傳語(yǔ)音 */
.audio{
? display: flex;
? position: relative;
? height:140rpx;
? line-height: 140rpx;
? background: #f7f7f7;
? width: 96%;
}
/* 錄語(yǔ)音 */
.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') //計(jì)算時(shí)分秒函數(shù)
let radio = wx.getRecorderManager(); //創(chuàng)建錄音
const app = getApp()
?
var recordTimeInterval; //錄音 時(shí)分秒 '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 () { //計(jì)算時(shí)分秒
? ? ? 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 () { //計(jì)算時(shí)分秒
? ? ? var recordTime = that.data.recordTime += 1
? ? ? that.setData({
? ? ? ? formatedRecordTime: util.formatTime(that.data.recordTime),
? ? ? ? recordTime: recordTime
? ? ? })
? ? }, 1000)
? },
? //結(jié)束錄音
? stopRecord: function () {
? ? console.log('錄音結(jié)束了')
? ? var that = this;
? ? clearInterval(recordTimeInterval);
? ? radio.stop(); //錄音結(jié)束
? ? radio.onStop((res) => { //錄音結(jié)束
? ? ? // that.stopRecord
? ? ? console.log('錄音結(jié)束', res);
? ? ? this.setData({
? ? ? ? record: res.tempFilePath,
? ? ? ? musicUrl: res.tempFilePath, //錄音音頻
? ? ? ? duration: res.duration, //音頻時(shí)長(zhǎng)時(shí)間戳
? ? ? ? record: true,
? ? ? })
? ? })
? },
? //取消錄音
? remove() {
? ? radio.stop(); //結(jié)束錄音
? ? 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
}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序用戶后臺(tái)定位及錄音授權(quán)及請(qǐng)求示例
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)錄音Record功能
- 微信小程序錄音實(shí)現(xiàn)功能并上傳(使用node解析接收)
- 微信小程序?qū)崿F(xiàn)錄音功能
- 微信小程序?qū)崿F(xiàn)錄音時(shí)的麥克風(fēng)動(dòng)畫效果實(shí)例
- 微信小程序錄音文件格式silk遇到的問(wèn)題及解決方法
- 微信小程序錄音與播放錄音功能
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動(dòng)畫實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實(shí)例
相關(guān)文章
JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例
這篇文章主要介紹了JS利用時(shí)間戳倒計(jì)時(shí)的實(shí)現(xiàn)示例,本文將提供代碼示例和詳細(xì)的步驟,幫助你實(shí)現(xiàn)一個(gè)簡(jiǎn)單而實(shí)用的時(shí)間戳倒計(jì)時(shí),感興趣的可以了解一下2023-12-12
JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件的兩種方式
這篇文章主要介紹了JS實(shí)現(xiàn)html頁(yè)面點(diǎn)擊下載文件的兩種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
js單頁(yè)hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解
本篇文章主要介紹了js單頁(yè)hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08

