235 lines
8.1 KiB
JavaScript
235 lines
8.1 KiB
JavaScript
|
function CmsTalk() {
|
|||
|
|
this.wasmLoaded = false;
|
|||
|
|
this.logger = new Logger("CmsTalk");
|
|||
|
|
this.urlBufferBuffer = null
|
|||
|
|
this.audioCache = null
|
|||
|
|
this.localAudioStream = null
|
|||
|
|
this.ws = null
|
|||
|
|
this.mediaRecorder = null
|
|||
|
|
this.audioBuffer = null
|
|||
|
|
|
|||
|
|
this.rec = null
|
|||
|
|
// this.recBlob = null;
|
|||
|
|
/**调用open打开录音请求好录音权限**/
|
|||
|
|
|
|||
|
|
this.RecorderOpen()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
CmsTalk.prototype.RecorderOpen = function () {
|
|||
|
|
|
|||
|
|
//recOpen我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调
|
|||
|
|
var showDialog = function () {
|
|||
|
|
if (!/mobile/i.test(navigator.userAgent)) {
|
|||
|
|
return //只在移动端开启没有权限请求的检测
|
|||
|
|
}
|
|||
|
|
dialogCancel()
|
|||
|
|
|
|||
|
|
//显示弹框，应该使用自己的弹框方式
|
|||
|
|
var div = document.createElement("div")
|
|||
|
|
document.body.appendChild(div)
|
|||
|
|
div.innerHTML =
|
|||
|
|
"" +
|
|||
|
|
'<div class="waitDialog" style="z-index:99999;width:100%;height:100%;top:0;left:0;position:fixed;background:rgba(0,0,0,0.3);">' +
|
|||
|
|
'<div style="display:flex;height:100%;align-items:center;">' +
|
|||
|
|
'<div style="flex:1;"></div>' +
|
|||
|
|
'<div style="width:240px;background:#fff;padding:15px 20px;border-radius: 10px;">' +
|
|||
|
|
'<div style="padding-bottom:10px;">录音功能需要麦克风权限，请允许；如果未看到任何请求，请点击忽略~</div>' +
|
|||
|
|
'<div style="text-align:center;"><a onclick="waitDialogClick()" style="color:#0B1">忽略</a></div>' +
|
|||
|
|
"</div>" +
|
|||
|
|
'<div style="flex:1;"></div>' +
|
|||
|
|
"</div>" +
|
|||
|
|
"</div>"
|
|||
|
|
}
|
|||
|
|
var createDelayDialog = function () {
|
|||
|
|
dialogInt = setTimeout(function () {
|
|||
|
|
//定时8秒后打开弹窗，用于监测浏览器没有发起权限请求的情况，在open前放置定时器利于收到了回调能及时取消（不管open是同步还是异步回调的）
|
|||
|
|
showDialog()
|
|||
|
|
}, 8000)
|
|||
|
|
}
|
|||
|
|
var dialogInt
|
|||
|
|
var dialogCancel = function () {
|
|||
|
|
clearTimeout(dialogInt)
|
|||
|
|
|
|||
|
|
//关闭弹框，应该使用自己的弹框方式
|
|||
|
|
var elems = document.querySelectorAll(".waitDialog")
|
|||
|
|
for (var i = 0; i < elems.length; i++) {
|
|||
|
|
elems[i].parentNode.removeChild(elems[i])
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//recOpen弹框End
|
|||
|
|
|
|||
|
|
var formatMs = function (ms, all) {
|
|||
|
|
var f = Math.floor(ms / 60000),
|
|||
|
|
m = Math.floor(ms / 1000) % 60
|
|||
|
|
var s =
|
|||
|
|
(all || f > 0 ? (f < 10 ? "0" : "") + f + ":" : "") +
|
|||
|
|
(all || f > 0 || m > 0 ? ("0" + m).substr(-2) + "″" : "") +
|
|||
|
|
("00" + (ms % 1000)).substr(-3)
|
|||
|
|
return s
|
|||
|
|
}
|
|||
|
|
// var recOpen = function () {//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了
|
|||
|
|
this.newRec = Recorder({
|
|||
|
|
type: "pcm", sampleRate: 8000, bitRate: 16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
|
|||
|
|
, onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
|
|||
|
|
newBufferIdx = 0
|
|||
|
|
var newChunkInfo = Recorder.SampleData(buffers, 48000, 8000, this.prevChunkInfo);
|
|||
|
|
this.sendAudioData(newChunkInfo.data)
|
|||
|
|
this.prevChunkInfo = newChunkInfo
|
|||
|
|
for (let index = buffers.length - 1; index >= 0; index--) {
|
|||
|
|
buffers[index] = null;
|
|||
|
|
}
|
|||
|
|
}.bind(this)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// createDelayDialog(); //我们可以选择性的弹一个对话框：为了防止移动端浏览器存在第三种情况：用户忽略，并且（或者国产系统UC系）浏览器没有任何回调，此处demo省略了弹窗的代码
|
|||
|
|
|
|||
|
|
|
|||
|
|
window.waitDialogClick = function () {
|
|||
|
|
dialogCancel();
|
|||
|
|
console.log("打开失败：权限请求被忽略，<span style='color:#f00'>用户主动点击的弹窗</span>", 1);
|
|||
|
|
};
|
|||
|
|
// };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//打开麦克风授权获得相关资源
|
|||
|
|
CmsTalk.prototype.open = function (callback) {
|
|||
|
|
// dialogCancel(); //如果开启了弹框，此处需要取消
|
|||
|
|
if (this.rec){
|
|||
|
|
console.log("已打开录音设备，可以点击录制开始录音了", 2);
|
|||
|
|
callback(null)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.newRec.open(function () {
|
|||
|
|
this.rec = this.newRec;
|
|||
|
|
console.log("已打开录音设备，可以点击录制开始录音了", 2);
|
|||
|
|
callback()
|
|||
|
|
}.bind(this), function (msg, isUserNotAllow) {
|
|||
|
|
//用户拒绝未授权或不支持
|
|||
|
|
// dialogCancel(); //如果开启了弹框，此处需要取消
|
|||
|
|
var log = (isUserNotAllow ? "UserNotAllow，" : "") + "打开录音失败：" + msg;
|
|||
|
|
console.log(log);
|
|||
|
|
callback(log)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**关闭录音，释放资源**/
|
|||
|
|
CmsTalk.prototype.recClose = function () {
|
|||
|
|
if (this.rec) {
|
|||
|
|
this.rec.close();
|
|||
|
|
this.rec = null
|
|||
|
|
console.log("已关闭");
|
|||
|
|
} else {
|
|||
|
|
console.log("未打开录音", 1);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**开始录音**/
|
|||
|
|
CmsTalk.prototype.recStart = function () {//打开了录音后才能进行start、stop调用
|
|||
|
|
this.prevChunkInfo = null
|
|||
|
|
if (this.rec && Recorder.IsOpen()) {
|
|||
|
|
// this.recBlob = null;
|
|||
|
|
this.rec.start();
|
|||
|
|
console.log("已开始录音...");
|
|||
|
|
} else {
|
|||
|
|
console.log("未打开录音", 1);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**暂停录音**/
|
|||
|
|
CmsTalk.prototype.recPause = function () {
|
|||
|
|
if (this.rec && Recorder.IsOpen()) {
|
|||
|
|
this.rec.pause();
|
|||
|
|
} else {
|
|||
|
|
console.log("未打开录音", 1);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
/**恢复录音**/
|
|||
|
|
CmsTalk.prototype.recResume = function () {
|
|||
|
|
if (this.rec && Recorder.IsOpen()) {
|
|||
|
|
this.rec.resume();
|
|||
|
|
} else {
|
|||
|
|
console.log("未打开录音", 1);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/**结束录音，得到音频文件**/
|
|||
|
|
CmsTalk.prototype.recStop = function () {
|
|||
|
|
if (!(this.rec && Recorder.IsOpen())) {
|
|||
|
|
console.log("未打开录音", 1);
|
|||
|
|
return;
|
|||
|
|
};
|
|||
|
|
this.rec.stop(null, null);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
CmsTalk.prototype.startTalk = function (url, callback) {
|
|||
|
|
this.open((err) => {
|
|||
|
|
if (err) {
|
|||
|
|
callback(err)
|
|||
|
|
} else {
|
|||
|
|
if (url.indexOf("http") != -1) {
|
|||
|
|
//方式1,可手动修改talk-server对应的地址
|
|||
|
|
this.ws = new WebSocket("ws://192.168.0.215:3000");
|
|||
|
|
this.ws.onmessage = function (msg) {
|
|||
|
|
console.log(msg);
|
|||
|
|
};
|
|||
|
|
this.ws.onopen = (ev) => {
|
|||
|
|
console.log("open")
|
|||
|
|
this.ws.send(url)
|
|||
|
|
|
|||
|
|
this.recStart()
|
|||
|
|
if (callback)
|
|||
|
|
callback(null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
//方式2
|
|||
|
|
this.ws = new WebSocket(url);
|
|||
|
|
this.ws.onmessage = function (msg) {
|
|||
|
|
console.log(msg);
|
|||
|
|
};
|
|||
|
|
this.ws.onopen = (ev) => {
|
|||
|
|
console.log("open")
|
|||
|
|
this.recStart()
|
|||
|
|
if (callback)
|
|||
|
|
callback(null)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
CmsTalk.prototype.stopTalk = function () {
|
|||
|
|
if (this.ws) {
|
|||
|
|
this.ws.close();
|
|||
|
|
this.ws = null
|
|||
|
|
}
|
|||
|
|
if (this.audioBuffer) {
|
|||
|
|
delete this.audioBuffer
|
|||
|
|
this.audioBuffer = null
|
|||
|
|
}
|
|||
|
|
this.recStop()
|
|||
|
|
// this.recClose()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
CmsTalk.prototype.sendAudioData = function (samples) {
|
|||
|
|
var u8Data = alawmulaw.alaw.encode(samples);
|
|||
|
|
if (!this.audioBuffer)
|
|||
|
|
this.audioBuffer = new Uint8Array([])
|
|||
|
|
|
|||
|
|
var tmpBuffer = new Uint8Array(this.audioBuffer.byteLength + u8Data.byteLength)
|
|||
|
|
tmpBuffer.set(this.audioBuffer, 0)
|
|||
|
|
tmpBuffer.set(u8Data, this.audioBuffer.byteLength)
|
|||
|
|
while (tmpBuffer.byteLength >= 480) {
|
|||
|
|
var d480 = tmpBuffer.subarray(0, 480);
|
|||
|
|
tmpBuffer = tmpBuffer.subarray(480);
|
|||
|
|
console.log("reserve ", tmpBuffer.length)
|
|||
|
|
if (this.ws)
|
|||
|
|
this.ws.send(d480)
|
|||
|
|
}
|
|||
|
|
this.audioBuffer = tmpBuffer
|
|||
|
|
}
|
|||
|
|
|