微信小程序实现语音识别
解决思路:利用小程序的录音功能,将录音文件传送到服务器,服务器调用语音识别api,然后将识别的文字返回给微信小程序。前端引用:微信小程序音频录制---波纹循环动画_weixin_43947294的博客-CSDN博客小程序前端框架:https://github.com/TalkingData/iview-weapp1.小程序wxml:<view class="myRecode"><
·
解决思路:利用小程序的录音功能,将录音文件传送到服务器,服务器调用语音识别api,然后将识别的文字返回给微信小程序。
前端引用:微信小程序音频录制---波纹循环动画_weixin_43947294的博客-CSDN博客
小程序前端框架:https://github.com/TalkingData/iview-weapp
1.小程序wxml:
<view class="myRecode">
<!-- <view class="recode microphone-view" bindtouchstart='recodeClick' bindtouchend='recodeEnd'> -->
<view class="recode microphone-view" capture-bind:longpress="micLongpress" capture-bind:touchend="micEnd">
<i class="fa fa-microphone"></i>
<view class="ripple"></view>
<view class="ripple" animation="{{animationData1}}"></view>
<view class="ripple" animation="{{animationData2}}"></view>
</view>
<view>{{timeText}}</view>
</view>
2.wxss
.microphone-view{
position: relative;
/* border: 1px solid black; */
width: 11vw;
height: 11vw;
border-radius: 11vw;
background-color: burlywood;
text-align: center;
line-height: 11vw;
}
.microphone-view>i{
color: #ffffff;
/* position: absolute;
top: 50%;
left:50%;
transform: translateY(-50%); */
}
/* pages/myRecode/myRecode.wxss */
.myRecode{
padding-top:500rpx;
text-align: center;
box-sizing: border-box;
}
.myRecode .recode{
display: inline-block;
width:200rpx;
height:200rpx;
background: #EBB128;
border-radius: 50%;
text-align: center;
color:#fff;
line-height: 200rpx;
position: relative;
}
.ripple{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
border:2px solid #F6F1CC;
}
3.小程序的js
const { $Toast } = require('../../dist/base/index');//引入模板
Page({
data: {
timeText:'按住讲话'
},
//长按事件
micLongpress:function(){
let that=this;
console.log('长按');
//手机震动
wx.vibrateShort({
type: 'medium',
style:'medium',
fail:()=>{}
});
//判断是否有录音授权
wx.getSetting({
success(res){
console.log('获取到的权限',res.authSetting);
if(!res.authSetting['scope.record']){
console.log('wu录音权限');
//申请授权
wx.authorize({
scope: 'scope.record',
success() {
console.log('同意授权');
},
fail(){
console.log('未同意录音授权');
//弹出警告框
$Toast({
content: '请先授权录音',
type: 'warning'
});
}
})
}else{
console.log('有录音授权');
//开始录音
console.log('开始录音');
var recorderManager = wx.getRecorderManager();
const options = {
duration:10000,
sampleRate: 48000,
numberOfChannels: 1,
encodeBitRate: 96000,
format: 'wav',
frameSize: 50,
}
recorderManager.start(options);
recorderManager.onStart(() => {
console.log('recorder start')
});
recorderManager.onError((res) => {
console.log(res);
});
recorderManager.onStop((res) => {
console.log(res);
//动画结束
that.recodeEnd();
var tempFilePath = res.tempFilePath; // 文件临时路径
var temp = tempFilePath.replace('.mp3', '') //转换格式 默认silk后缀
wx.showLoading({
title: '发送中...',
});
wx.uploadFile({
url: 'http://www.recyle/api/record', //上传服务器的地址
filePath: tempFilePath, //临时路径
name: 'file',
header: {
contentType: "multipart/form-data", //按需求增加
},
success: function (res) {
wx.hideLoading();
console.log(res)
},
fail:function(err){
wx.hideLoading();
console.log(err.errMsg);//上传失败
}
});
// wx.request({
// url: 'http://www.recyle/record',
// data: {
// src:res.tempFilePath
// },
// success (res) {
// console.log(res)
// }
// })
// // 自动播放开始
// const innerAudioContext = wx.createInnerAudioContext()
// innerAudioContext.autoplay = true
// innerAudioContext.src = res.tempFilePath
// innerAudioContext.onPlay(() => {
// console.log('开始播放')
// })
// innerAudioContext.onError((res) => {
// console.log(res.errMsg)
// console.log(res.errCode)
// })
// //自动播放结束
});
//动画开始
that.recodeClick();
// //10秒以后结束录音
// setTimeout(function(){
// that.micEnd();
// },10000)
}
}
})
},
//结束长按
micEnd:function(){
console.log('结束长按');
var recorderManager = wx.getRecorderManager(); //获取全局唯一的录音管理器
recorderManager.stop();//结束录音
},
//录音动画函数开始
animationFun:function(animationData){
if(!this.data.animationStatus){
return
}
var animation = wx.createAnimation({
duration: 1000
})
animation.opacity(0).scale(2, 2).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
animationEnd: function (animationData) {
var animation = wx.createAnimation({
duration: 0
})
animation.opacity(1).scale(1, 1).step();
this.setData({
[`${animationData}`]: animation.export()
})
},
recodeEnd: function() {
//动画1结束
var animation1 = wx.createAnimation({
duration: 0
})
animation1.opacity(1).scale(1, 1).step();
//动画2结束
var animation2 = wx.createAnimation({
duration: 0
})
animation2.opacity(1).scale(1, 1).step();
this.setData({
animationData1: animation1.export(),
animationData2: animation2.export(),
animationStatus: false
})
},
recodeClick: function() {
this.setData({
animationStatus: true
})
this.animationFun('animationData1')
setTimeout(()=>{
this.animationFun('animationData2')
},500)
setTimeout(() => {
this.animationRest()
}, 1000)
},
animationRest: function() {
//动画重置
this.animationEnd('animationData1')
setTimeout(()=>{
this.animationEnd('animationData2')
},500)
setTimeout(() => {
if (this.data.animationStatus) {
this.recodeClick()
}
}, 100)
},
//录音动画函数结束
});
更多推荐
已为社区贡献2条内容
所有评论(0)