Spaces:

lewiswu1209
/

MockingBird

Runtime error

File size: 16,425 Bytes

f4dac30

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