微信小程序-语音输入(录音并播放）

本文主要是介绍微信小程序-语音输入(录音并播放），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

xml

        <view class="other-des"><view class="other-des-list"><view wx:for="{{imgFiles}}" wx:key="index"><view class="des-name" hidden="{{item.fileType!='mp3'}}">语音</view><view><view bindtap="playVoice" data-url="{{item.url}}" class="voice" hidden="{{item.fileType!='mp3'}}">{{item.duration}}’</view></view></view></view><view class="action"><view bindtouchstart="audiostart" bindtouchend="audioend"><image class="action-icon" src="../images/icon_voice.png" mode="" /></view></view></view><view bindtouchstart="audiostart" bindtouchend="audioend"><image class="action-icon" src="../images/icon_voice.png" mode="" /></view>

.js

// expertConsultations/addQuestion/index/index.js
const httpUtils = require("../../../utils/httpUtils")
const stringUtils = require("../../../utils/stringUtils")
const app = getApp()
//定义一个全局变量，调用微信官方定义语音管理对象
const recorderManager = wx.getRecorderManager();
Page({/*** 页面的初始数据*/data: {phone: '',questionTypeIndex: '',questionTypeOptions: [],title: "",info: "",biaoQian: "",imgFiles: [],zid: '',},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.setData({zid: options.id})},onInput() {},cancelTap() {wx.navigateBack()},//语音开始audiostart: function () {wx.showToast({title: '正在录音...',icon: 'loading',duration: 10000});recorderManager.start({format: 'mp3'});},//语音结束audioend: function () {//弹窗消失wx.hideToast({title: '正在录音...',icon: 'loading'});var path = "";var that = this;recorderManager.stop();recorderManager.onStop(function (res) {path = res.tempFilePath;console.log("结束", res)console.log(res.tempFilePath)if (res.duration < 1000) {wx.showModal({title: '录音时长太短，请重新录音',content: '',})} else {if (res.tempFilePath != "") {console.log(that.data.imgFiles);that.setData({imgFiles: that.data.imgFiles.concat([{url: res.tempFilePath,tempFilePath: res.tempFilePath,fileType: 'mp3',duration: parseInt(res.duration / 1000)}])});console.log(2, that.data.imgFiles);//将语音文件保存至后台// that.saveVoiceInfo(res.tempFilePath);} else {}}});},playVoice() {// 获取innerAudioContext实例const innerAudioContext = wx.createInnerAudioContext()// 是否自动播放innerAudioContext.autoplay = true// 设置音频文件的路径innerAudioContext.src = this.data.tempFilePath;// 播放音频文件innerAudioContext.onPlay(() => {console.log('开始播放')});// 监听音频播放错误事件innerAudioContext.onError((res) => {console.log(res.errMsg)})},//保存至后台saveVoiceInfo: function (path) {var that = this;},})

css

.other-des {width: 100%;min-height: 100rpx;background: rgba(217, 217, 217, 0);border-radius: 10rpx;border: 2rpx solid #D9D9D9;position: relative;padding: 20rpx;box-sizing: border-box;
}
.other-des-list {margin-bottom: 30rpx;
}
.image {width: 300rpx;height: auto;background: #E7E7E7;border-radius: 10rpx;
}.des-name {font-size: 26rpx;font-family: Source Han Sans CN-Regular, Source Han Sans CN;font-weight: 400;color: #666666;line-height: 30rpx;margin-bottom: 10rpx;margin-top: 20rpx;
}
.action {position: absolute;right: 0;bottom: 0;display: flex;align-items: center;justify-content: flex-end;
}.action-icon {width: 50rpx;height: 50rpx;margin-left: 30rpx;
}