160 lines
6.3 KiB
Plaintext
160 lines
6.3 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|||
|
|
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/Recorder-master/recorder.mp3.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<input type="button" onclick="startRec()" value="录音转文字" width="50px">
|
|||
|
|
<input type="button" onclick="timeIng()" value="实时识别" width="50px">
|
|||
|
|
<input type="button" onclick="speckText('测试11111')" value="语音播报" width="50px">
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
<script>
|
|||
|
|
function speckText(str){
|
|||
|
|
let to_speak = window.speechSynthesis;
|
|||
|
|
to_speak = new SpeechSynthesisUtterance(str);
|
|||
|
|
window.speechSynthesis.speak(to_speak);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var rec;
|
|||
|
|
|
|||
|
|
var flag2 = 0;
|
|||
|
|
var websocket = null;
|
|||
|
|
function timeIng(){
|
|||
|
|
flag2 += 1;
|
|||
|
|
if (flag2 % 2 == 1) {
|
|||
|
|
console.log(12);
|
|||
|
|
if ('WebSocket' in window) {
|
|||
|
|
// 创建websocket对象
|
|||
|
|
websocket = new WebSocket('wss://vop.baidu.com/realtime_asr?sn=aaa-bbb-ccc-ddd');
|
|||
|
|
// var userName = "语音识别";
|
|||
|
|
// websocket = new WebSocket(ext.basePath.replace("http", "ws") + "/chat/baiDuAipSpeechMessage");
|
|||
|
|
registerEvent();
|
|||
|
|
} else {
|
|||
|
|
alert('当前浏览器不支持websocket')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function registerEvent() {
|
|||
|
|
websocket.onopen = function (event) {
|
|||
|
|
console.log("WebSocket message received:", event);
|
|||
|
|
}
|
|||
|
|
websocket.onmessage = function (event) {
|
|||
|
|
console.log("WebSocket message received:", event);
|
|||
|
|
};
|
|||
|
|
websocket.onclose = function (event) {
|
|||
|
|
websocket.close();
|
|||
|
|
};
|
|||
|
|
//连接发生错误的回调方法
|
|||
|
|
websocket.onerror = function () {
|
|||
|
|
// $("#Putin").attr('disabled', 'disabled');
|
|||
|
|
websocket.close();
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (flag2 % 2 == 0) {
|
|||
|
|
console.log("websocket关闭");
|
|||
|
|
websocket.close();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var flag = 0;
|
|||
|
|
function startRec() {
|
|||
|
|
flag += 1;
|
|||
|
|
if (flag % 2 == 1) {
|
|||
|
|
rec = Recorder({ type: "mp3", sampleRate: 16000, bitRate: 16, numChannels: 1 });//使用默认配置，mp3格式
|
|||
|
|
|
|||
|
|
//打开麦克风授权获得相关资源
|
|||
|
|
rec.open(function () {
|
|||
|
|
//开始录音
|
|||
|
|
rec.start();
|
|||
|
|
}, function (msg, isUserNotAllow) {
|
|||
|
|
//用户拒绝了权限或浏览器不支持
|
|||
|
|
alert((isUserNotAllow ? "用户拒绝了权限，" : "") + "无法录音:" + msg);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (flag % 2 == 0) {
|
|||
|
|
//停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
|
|||
|
|
rec.stop(function (blob, duration) {
|
|||
|
|
var api=ext.contextPath +"/data/baiDuAipSpeech/save.do";
|
|||
|
|
var reader=new FileReader();
|
|||
|
|
reader.onloadend=function(){
|
|||
|
|
$.ajax({
|
|||
|
|
url:api, //上传接口地址
|
|||
|
|
type:"POST",
|
|||
|
|
dateType:'json',
|
|||
|
|
data:{
|
|||
|
|
type:blob.type, //告诉后端，这个录音是什么格式的，可能前后端都固定的mp3可以不用写
|
|||
|
|
upfile_b64:(/.+;\s*base64\s*,\s*(.+)$/i.exec(reader.result)||[])[1] //录音文件内容，后端进行base64解码成二进制
|
|||
|
|
},
|
|||
|
|
success:function(data){
|
|||
|
|
console.log(data);
|
|||
|
|
// console.log("上传成功",v);
|
|||
|
|
rec.close();
|
|||
|
|
},
|
|||
|
|
error:function(s){
|
|||
|
|
console.error("上传失败",s);
|
|||
|
|
rec.close();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
reader.readAsDataURL(blob);
|
|||
|
|
|
|||
|
|
}, function (msg) {
|
|||
|
|
alert("录音失败:" + msg);
|
|||
|
|
rec.close();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function uploadRec() {
|
|||
|
|
//停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
|
|||
|
|
rec.stop(function (blob, duration) {
|
|||
|
|
/*
|
|||
|
|
blob文件对象，可以用FileReader读取出内容
|
|||
|
|
，或者用FormData上传，本例直接上传二进制文件
|
|||
|
|
，对于普通application/x-www-form-urlencoded表单上传
|
|||
|
|
，请参考github里面的例子
|
|||
|
|
*/
|
|||
|
|
var form = new FormData();
|
|||
|
|
form.append("upfile", blob, "recorder.mp3"); //和普通form表单并无二致，后端接收到 upfile参数的文件，文件名为recorder.mp3
|
|||
|
|
|
|||
|
|
//直接用ajax上传
|
|||
|
|
var xhr = new XMLHttpRequest();
|
|||
|
|
xhr.open("POST", "");//放后端语音处理程序的地址
|
|||
|
|
xhr.onreadystatechange = function () {
|
|||
|
|
if (xhr.readyState == 4) {
|
|||
|
|
alert(xhr.status == 200 ? "上传成功" : "测试请先打开浏览器控制台，然后重新录音，在network选项卡里面就能看到上传请求数据和格式了");
|
|||
|
|
document.getElementById("keyword").value = xhr.responseText;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
xhr.send(form);
|
|||
|
|
}, function (msg) {
|
|||
|
|
alert("录音失败:" + msg);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
function playRec() {
|
|||
|
|
//停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
|
|||
|
|
rec.stop(function (blob, duration) {
|
|||
|
|
var audio = document.createElement("audio");
|
|||
|
|
audio.controls = true;
|
|||
|
|
document.body.appendChild(audio);
|
|||
|
|
|
|||
|
|
//非常简单的就能拿到blob音频url
|
|||
|
|
audio.src = URL.createObjectURL(blob);
|
|||
|
|
audio.play();
|
|||
|
|
}, function (msg) {
|
|||
|
|
alert("录音失败:" + msg);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
</script>
|