技術標籤：vue百度語音識別jsjavascriptvue

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<!-- <text class="title">{{title}}1111</text>
 
 -->
			<button @click="startLuyin" v-show="luyinStatus"  class="recordingStyle">開始錄音</button>
			<button @click="endLuyin" v-show="!luyinStatus" class="recordingStyle">結束錄音</button>
			
		</view>
		<view class=
 
"Sound_btn">
			<button @click="playVoice">試聽錄音</button>
			<!-- <button @click="startYuyin">轉文字</button> -->
		</view>
		<view class="reslut_box" v-show="resContent"><p>{{resContent.result}}</p><
 
/view>
		<!-- <view class="reslut_box" >{{resContent.result}}</view> -->
	</view>
	
</template>

<script>
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	//錄音
	const recorderManager = uni.getRecorderManager();
	//播放錄音
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		components: {
		        // uniPopup
		},
		data() {
			return {
				title: 'Hello',
				token: '',
				adioFileData:'',
				adioSize:'',
				resContent:'',
				luyinStatus:true
			}
		},
		onLoad() {
			let self = this;
			recorderManager.onStop(function(res) {
				//錄音後的回撥函式
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
				self.Audio2dataURL(res.tempFilePath);
			});

		},
		methods: {
			startLuyin() {
				console.log('開始錄音')
				recorderManager.start();
				this.luyinStatus=false
			},
			endLuyin() {
				console.log('錄音結束');
				recorderManager.stop();
				this.luyinStatus=true
				
			},
			startYuyin() {
				var _this=this;
				//獲取token
				uni.request({
					url: 'https://openapi.baidu.com/oauth/2.0/token', //僅為示例，並非真實介面地址。
					data: {
						grant_type: 'client_credentials',
						client_id: '',
						client_secret: '',
					},
					header: {
						'content-type': 'application/json;charset=utf-8' //自定義請求頭資訊
					},
					success: (res) => {
						// console.log(JSON.stringify(res));
						
						_this.token = res.data.access_token;
						// alert( _this.resContent)
						_this.PostData();
						// _this.$refs.popup.open()
					}
				});
				

			},
			PostData(){
				var postData={
						format: 'pcm', //語音檔案的格式，pcm/wav/amr/m4a。不區分大小寫。推薦pcm檔案
						rate: 16000, //	取樣率，16000，固定值 此處文件引數16000，達不到這種高保真音訊，故 使用8000
						// dev_pid: 1537,//普通話
						channel: 1, //聲道數，僅支援單聲道，請填寫固定值 1
						cuid: 'cuid', //使用者唯一標識，用來區分使用者，計算UV值。建議填寫能區分使用者的機器 MAC 地址或 IMEI 碼，長度為60字元以內。
						token: this.token,
						speech: this.adioFileData, //本地語音檔案的的二進位制語音資料 ，需要進行base64 編碼。與len引數連一起使用。
						len: this.adioSize //本地語音檔案的的位元組數，單位位元組 init
				}
				console.log(JSON.stringify(postData)+'1111')
				//呼叫語音識別介面
				uni.request({
					url: 'http://vop.baidu.com/server_api ', //僅為示例，並非真實介面地址。
					data:postData,
					header: {
						'content-type': 'Content-Type: audio/pcm;rate=16000' //自定義請求頭資訊
					},
					method:'POST',
					success: (res) => {
						this.resContent=res.data
						console.log(JSON.stringify(res.data) + "識別結果");
						// this.text = 'request success';
					}
				})
			},
			Audio2dataURL(path) {
				var _this=this;
				plus.io.resolveLocalFileSystemURL(path, function(entry) {
					entry.file(function(file) {
						var reader = new plus.io.FileReader();
						_this.adioSize = file.size;
						reader.onloadend = function(e) {
							console.log(e.target.result);
							_this.adioFileData=e.target.result.split(",")[1];							
						};
						reader.readAsDataURL(file);
						_this.startYuyin()
					}, function(e) {
						alert(e.message)
						// mui.toast("讀寫出現異常: " + e.message);
					})
				})
			},
			//播放
			playVoice() {
				console.log('播放錄音');
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {		
		display: flex;
		justify-content: center;
		margin-top:10vh;
	}
	.text-area	.recordingStyle{
		width:100px;
		height:100px;
		border-radius:50%;
		text-align:center;
		display:flex;
		justify-content:center;
		align-items:center;
		font-size:16px;
		color:#fff;
		background:#409eff;
	}
	.Sound_btn{
		display:flex;
		align-items:center;
		margin:10px 0 0 0;		
	}
	.Sound_btn>button{
		background:none;	
	}
	/* .title {
		font-size: 36rpx;
		color: #8f8f94;
	} */
	.reslut_box{
		width:90%;
		background:#409eff10;
		margin:1em 5%;
		padding:0.5em 0;
		border-radius:10px;
	}
	.reslut_box p{
		margin:0 20px;
	}
</style>