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> |