MockingBird/web/templates/index.html
2021-11-08 23:55:16 +08:00

523 lines
16 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/png" href="../static/img/bird-sm.png">
<title>MockingBird Web Server</title>
<script src="{{ url_for('static',filename='js/recorder-core.js') }}"></script>
<script src="{{ url_for('static',filename='js/mp3.js') }}"></script>
<script src="{{ url_for('static',filename='js/wav.js') }}"></script>
<script src="{{ url_for('static',filename='js/mp3-engine.js') }}"></script>
<script src="{{ url_for('static',filename='js/frequency.histogram.view.js') }}"></script>
<script src="{{ url_for('static',filename='js/lib.fft.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery.js') }}"></script>
</head>
<body>
<div class="main">
<div class="mainBox">
<div class="title" >
<div style="width: 15%;float: left;margin-left: 5%;">
<img src="../static/img/bird.png" style="width: 100%;border-radius:50%;"></img>
</div>
<div style="width: 80% ;height: 15%;; margin-left: 15%;overflow: hidden;">
<div style="margin-left: 5%;margin-top: 15px;font-size: xx-large;font-weight: bolder;">
拟声鸟工具箱
</div>
<div style="margin-left: 5%;margin-top: 3px;font-size: large;">
<a href="https://github.com/babysor/MockingBird" target="_blank">https://github.com/babysor/MockingBird</a>
</div>
</div>
</div>
<div style="margin-left: 5%;margin-top: 50px;width: 90%;">
<div style="font-size: larger;font-weight: bolder;">1. 请输入中文</div>
<textarea id="user_input_text"
style="border:1px solid #ccc; width: 100%; height: 100px; font-size: 15px; margin-top: 10px;"></textarea>
</div>
<div class="pd btns" style="margin-left: 5%;margin-top: 20px;width: 90%; ">
<!-- <div>
<button onclick="recOpen()" style="margin-right:10px">打开录音,请求权限</button>
<button onclick="recClose()" style="margin-right:0">关闭录音,释放资源</button>
</div> -->
<div style="font-size: larger;font-weight: bolder;">2. 请直接录音,点击停止结束</div>
<button onclick="recStart()" >录制</button>
<button onclick="recStop()">停止</button>
<button onclick="recPlay()" >播放</button>
</div>
<div class="pd btns" style="margin-left: 5%;margin-top: 20px;width: 90%; ">
<div style="font-size: larger;font-weight: bolder;">或上传音频</div>
<input type="file" id="fileInput" accept=".wav" />
<label for="fileInput">选择音频</label>
<div id="audio1"></div>
</div>
<div class="pd btns" style="margin-left: 5%;margin-top: 20px;width: 90%; ">
<div style="font-size: larger;font-weight: bolder;">3. 选择Synthesizer模型</div>
<span class="box">
<select id="selectSynt">
</select>
</span>
</div>
<div class="pd btns" style="margin-left: 5%;margin-top: 20px;width: 90%; ">
<div style="font-size: larger;font-weight: bolder;">4. 选择Vocoder模型</div>
<span class="box">
<select id="selectVocoder">
<option>WaveRNN</option>
<option>HifiGAN</option>
</select>
</span>
</div>
<div class="pd btns" style="margin-left: 5%;margin-top: 20px;width: 90%; text-align:right;">
<button id="upload" onclick="recUpload()">上传合成</button>
</div>
<!-- 波形绘制区域 -->
<!-- <div class="pd recpower">
<div style="height:40px;width:100%;background:#fff;position:relative;">
<div class="recpowerx" style="height:40px;background:#ff3295;position:absolute;"></div>
<div class="recpowert" style="padding-left:50px; line-height:40px; position: relative;"></div>
</div>
</div> -->
<!-- <div class="pd waveBox" style="height:100px;">
<div style="border:1px solid #ccc;display:inline-block; width: 100%; height: 100px;">
<div style="height:100px; width: 100%; background-color: #5da1f5; position: relative;left: 0px;top: 0px;z-index: 10;"
class="recwave"></div>
<div
style="background-color: transparent;position: relative;top: -80px;left: 30%;z-index: 20;font-size: 48px;color: #fff;">
音频预览</div>
</div>
</div> -->
<div class="reclog" style="margin-left: 5%;margin-top: 20px;width: 90%;"></div>
</div>
</div>
<script>
$("#fileInput").change(function(){
var file = $("#fileInput").get(0).files;
if (file.length > 0) {
var path = URL.createObjectURL(file[0]);
var audio = document.createElement('audio');
audio.src = path;
audio.controls = true;
$('#audio1').empty().append(audio);
}
});
fetch("/api/synthesizers", {
method: 'get',
headers: {
"X-CSRFToken": "{{ csrf_token() }}"
}
}).then(function (res) {
if (!res.ok) throw Error(res.statusText);
return res.json();
}).then(function (data) {
for (var synt of data) {
var option = document.createElement('option');
option.text = synt.name
option.value = synt.path
$("#selectSynt").append(option);
}
}).catch(function (err) {
console.log('Error: ' + err.message);
})
var rec, wave, recBlob;
/**调用open打开录音请求好录音权限**/
var recOpen = function () {//一般在显示出录音按钮或相关的录音界面时进行此方法调用,后面用户点击开始录音时就能畅通无阻了
rec = null;
wave = null;
recBlob = null;
var newRec = Recorder({
type: "wav", bitRate: 16, sampleRate: 16000
, onProcess: function (buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
//录音实时回调大约1秒调用12次本回调
// document.querySelector(".recpowerx").style.width = powerLevel + "%";
// document.querySelector(".recpowert").innerText = bufferDuration + " / " + powerLevel;
//可视化图形绘制
// wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate);
}
});
createDelayDialog(); //我们可以选择性的弹一个对话框为了防止移动端浏览器存在第三种情况用户忽略并且或者国产系统UC系浏览器没有任何回调此处demo省略了弹窗的代码
newRec.open(function () {//打开麦克风授权获得相关资源
dialogCancel(); //如果开启了弹框,此处需要取消
rec = newRec;
//此处创建这些音频可视化图形绘制浏览器支持妥妥的
// wave = Recorder.FrequencyHistogramView({ elem: ".recwave" });
reclog("已打开录音,可以点击录制开始录音了", 2);
}, function (msg, isUserNotAllow) {//用户拒绝未授权或不支持
dialogCancel(); //如果开启了弹框,此处需要取消
reclog((isUserNotAllow ? "UserNotAllow" : "") + "打开录音失败:" + msg, 1);
});
window.waitDialogClick = function () {
dialogCancel();
reclog("打开失败:权限请求被忽略,<span style='color:#f00'>用户主动点击的弹窗</span>", 1);
};
};
/**关闭录音,释放资源**/
function recClose() {
if (rec) {
rec.close();
reclog("已关闭");
} else {
reclog("未打开录音", 1);
};
};
/**开始录音**/
function recStart() {//打开了录音后才能进行start、stop调用
if (rec && Recorder.IsOpen()) {
recBlob = null;
rec.start();
reclog("已开始录音...");
} else {
reclog("未打开录音,请求录音权限,如已允许录音权限,请再次点击录制", 1);
recOpen();
};
};
function recStop() {
rec.stop(function (blob, duration) {
rec.close();//释放录音资源
console.log(blob, (window.URL || webkitURL).createObjectURL(blob), "时长:" + duration + "ms");
recBlob = blob;
reclog("已录制wav" + duration + "ms " + blob.size + "字节,可以点击播放、上传了", 2);
}, function (msg) {
reclog("录音失败:" + msg, 1);
});
};
/**播放**/
function recPlay() {
if (!recBlob) {
reclog("请先录音,然后停止后再播放", 1);
return;
};
var cls = ("a" + Math.random()).replace(".", "");
reclog('播放中: <span class="' + cls + '"></span>');
var audio = document.createElement("audio");
audio.controls = true;
document.querySelector("." + cls).appendChild(audio);
//简单利用URL生成播放地址注意不用了时需要revokeObjectURL否则霸占内存
audio.src = (window.URL || webkitURL).createObjectURL(recBlob);
audio.play();
setTimeout(function () {
(window.URL || webkitURL).revokeObjectURL(audio.src);
}, 5000);
};
function playResult(resultBlob) {
if (!resultBlob) {
reclog("服务端出错,请重试", 1);
return;
};
var cls = ("a" + Math.random()).replace(".", "");
reclog('播放中: <span class="' + cls + '"></span>');
var audio = document.createElement("audio");
audio.controls = true;
document.querySelector("." + cls).appendChild(audio);
//简单利用URL生成播放地址注意不用了时需要revokeObjectURL否则霸占内存
audio.src = (window.URL || webkitURL).createObjectURL(resultBlob);
audio.play();
setTimeout(function () {
(window.URL || webkitURL).revokeObjectURL(audio.src);
}, 12000);
};
/**上传**/
function recUpload() {
var blob
var loadedAudios = $("#fileInput").get(0).files
if (loadedAudios.length > 0) {
blob = loadedAudios[0];
} else {
blob = recBlob;
}
if (!blob) {
reclog("请先录音或选择音频,然后停止后再上传", 1);
return;
};
//本例子假设使用原始XMLHttpRequest请求方式实际使用中自行调整为自己的请求方式
//录音结束时拿到了blob文件对象可以用FileReader读取出内容或者用FormData上传
var api = "/api/synthesize";
reclog("开始上传到" + api + ",请求稍后...");
var reader = new FileReader();
reader.onloadend = function () {
var csrftoken = "{{ csrf_token() }}";
var user_input_text = document.getElementById("user_input_text");
var input_text = user_input_text.value;
var postData = new FormData();
postData.append("text", input_text)
postData.append("file", blob)
var syntSelect = document.getElementById("selectSynt");
var path = syntSelect.options[syntSelect.selectedIndex].value;
if (!!path) {
postData.append("synt_path", path);
}
var vocoderSelect = document.getElementById("selectVocoder");
var vocoder = vocoderSelect.options[vocoderSelect.selectedIndex].value;
if (!!vocoder) {
postData.append("vocoder", vocoder);
}
fetch(api, {
method: 'post',
headers: {
"X-CSRFToken": csrftoken
},
body: postData
}).then(function (res) {
if (!res.ok) throw Error(res.statusText);
return res.blob();
}).then(function (blob) {
playResult(blob)
}).catch(function (err) {
console.log('Error: ' + err.message);
})
};
reader.readAsDataURL(blob);
};
//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
</script>
<!--以下这坨可以忽略-->
<script>
function reclog(s, color) {
var now = new Date();
var t = ("0" + now.getHours()).substr(-2)
+ ":" + ("0" + now.getMinutes()).substr(-2)
+ ":" + ("0" + now.getSeconds()).substr(-2);
var div = document.createElement("div");
var elem = document.querySelector(".reclog");
elem.insertBefore(div, elem.firstChild);
div.innerHTML = '<div style="color:' + (!color ? "" : color == 1 ? "#327de8" : color == 2 ? "#5da1f5" : color) + '">[' + t + ']' + s + '</div>';
};
window.onerror = function (message, url, lineNo, columnNo, error) {
reclog('<span style="color:red">【Uncaught Error】' + message + '<pre>' + "at:" + lineNo + ":" + columnNo + " url:" + url + "\n" + (error && error.stack || "不能获得错误堆栈") + '</pre></span>');
};
</script>
<script>
if (/mobile/i.test(navigator.userAgent)) {
//移动端加载控制台组件
var elem = document.createElement("script");
elem.setAttribute("type", "text/javascript");
elem.setAttribute("src", "{{ url_for('static',filename='js/eruda.min.js') }}");
document.body.appendChild(elem);
elem.onload = function () {
eruda.init();
};
};
</script>
<style>
body {
word-wrap: break-word;
background: #f5f5f5 center top no-repeat;
background-size: auto 680px;
}
pre {
white-space: pre-wrap;
}
a {
text-decoration: none;
color: #327de8;
}
a:hover {
color: #5da1f5;
}
.main {
max-width: 700px;
margin: 0 auto;
padding-bottom: 80px
}
.mainBox {
margin-top: 12px;
padding: 12px;
border-radius: 6px;
background: #fff;
box-shadow: 2px 2px 3px #aaa;
}
.btns button {
display: inline-block;
cursor: pointer;
border: none;
border-radius: 3px;
background: #5698c3;
color: #fff;
padding: 0 15px;
margin: 3px 10px 3px 0;
width: 70px;
line-height: 36px;
height: 36px;
overflow: hidden;
vertical-align: middle;
}
.btns #upload {
background: #5698c3;
color: #fff;
width: 100px;
height: 42px;
}
.btns button:active {
background: #5da1f5
}
.btns button:hover {
background: #5da1f5
}
.pd {
padding: 0 0 6px 0;
}
.lb {
display: inline-block;
vertical-align: middle;
background: #327de8;
color: #fff;
font-size: 14px;
padding: 2px 8px;
border-radius: 99px;
}
#fileInput {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
#fileInput + label {
padding: 0 15px;
border-radius: 4px;
color: white;
background-color: #5698c3;
display: inline-block;
width: 70px;
line-height: 36px;
height: 36px;
}
#fileInput + label {
cursor: pointer; /* "hand" cursor */
}
#fileInput:focus + label,
#fileInput + label:hover {
background-color: #5da1f5;
}
.box select {
background-color: #5698c3;
color: white;
padding: 8px;
width: 120px;
border: none;
border-radius: 4px;
font-size: 0.5em;
outline: none;
margin: 3px 10px 3px 0;
}
.box::before {
content: "\f13a";
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100%;
text-align: center;
font-size: 28px;
line-height: 45px;
color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
pointer-events: none;
}
.box:hover::before {
color: rgba(255, 255, 255, 0.6);
background-color: rgba(255, 255, 255, 0.2);
}
.box select option {
padding: 30px;
}
</style>
</body>
</html>