diff --git a/README-CN.md b/README-CN.md index 8e4092f..458946c 100644 --- a/README-CN.md +++ b/README-CN.md @@ -73,7 +73,7 @@ ### 3.1 启动Web程序： `python web.py` 运行成功后在浏览器打开地址, 默认为 `http://localhost:8080` -bd64cd80385754afa599e3840504f45 +![123](https://user-images.githubusercontent.com/12797292/135494044-ae59181c-fe3a-406f-9c7d-d21d12fdb4cb.png) > 注：目前界面比较buggy, > * 第一次点击`录制`要等待几秒浏览器正常启动录音，否则会有重音 > * 录制结束不要再点`录制`而是`停止` diff --git a/web/__init__.py b/web/__init__.py index 0f2fe4f..8484d5c 100644 --- a/web/__init__.py +++ b/web/__init__.py @@ -13,6 +13,7 @@ import io import base64 from flask_cors import CORS from flask_wtf import CSRFProtect +import webbrowser def webApp(): # Init and load config @@ -112,10 +113,11 @@ def webApp(): host = app.config.get("HOST") port = app.config.get("PORT") - print(f"Web server: http://{host}:{port}") + web_address = 'http://{}:{}'.format(host, port) + print(f"Web server:" + web_address) + webbrowser.open(web_address) server = wsgi.WSGIServer((host, port), app) server.serve_forever() - return app if __name__ == "__main__": diff --git a/web/static/img/bird-sm.png b/web/static/img/bird-sm.png new file mode 100644 index 0000000..d94ab43 Binary files /dev/null and b/web/static/img/bird-sm.png differ diff --git a/web/static/img/bird.png b/web/static/img/bird.png new file mode 100644 index 0000000..fc02771 Binary files /dev/null and b/web/static/img/bird.png differ diff --git a/web/static/img/mockingbird.png b/web/static/img/mockingbird.png new file mode 100644 index 0000000..9feaf86 Binary files /dev/null and b/web/static/img/mockingbird.png differ diff --git a/web/templates/index.html b/web/templates/index.html index c9720da..9493067 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -4,8 +4,7 @@ - + MockingBird Web Server @@ -24,45 +23,54 @@
-
+
+
+ +
+
+
+ 拟声鸟工具箱 +
+ +
+
+ +
+
请输入中文
+ +
+ +
- - - + + + +
-
+ + -
-
+
--> +
@@ -78,11 +86,11 @@ 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; + // document.querySelector(".recpowerx").style.width = powerLevel + "%"; + // document.querySelector(".recpowert").innerText = bufferDuration + " / " + powerLevel; //可视化图形绘制 - wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate); + // wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate); } }); @@ -93,7 +101,7 @@ rec = newRec; //此处创建这些音频可视化图形绘制浏览器支持妥妥的 - wave = Recorder.FrequencyHistogramView({ elem: ".recwave" }); + // wave = Recorder.FrequencyHistogramView({ elem: ".recwave" }); reclog("已打开录音，可以点击录制开始录音了", 2); }, function (msg, isUserNotAllow) {//用户拒绝未授权或不支持 @@ -194,7 +202,7 @@ //本例子假设使用原始XMLHttpRequest请求方式，实际使用中自行调整为自己的请求方式 //录音结束时拿到了blob文件对象，可以用FileReader读取出内容，或者用FormData上传 - var api = "http://127.0.0.1:8080/api/synthesize"; + var api = "/api/synthesize"; reclog("开始上传到" + api + "，请求稍后..."); @@ -277,7 +285,7 @@ var div = document.createElement("div"); var elem = document.querySelector(".reclog"); elem.insertBefore(div, elem.firstChild); - div.innerHTML = '
[' + t + ']' + s + '
'; + div.innerHTML = '
[' + t + ']' + s + '
'; }; window.onerror = function (message, url, lineNo, columnNo, error) { reclog('【Uncaught Error】' + message + '
' + "at:" + lineNo + ":" + columnNo + " url:" + url + "\n" + (error && error.stack || "不能获得错误堆栈") + '
'); @@ -312,11 +320,11 @@ a { text-decoration: none; - color: #FE76B8; + color: #327de8; } a:hover { - color: #f00; + color: #5da1f5; } .main { @@ -330,7 +338,7 @@ padding: 12px; border-radius: 6px; background: #fff; - --border: 1px solid #f60; + --border: 1px solid #327de8; box-shadow: 2px 2px 3px #aaa; } @@ -340,10 +348,11 @@ cursor: pointer; border: none; border-radius: 3px; - background: #FE76B8; + background: #327de8; color: #fff; padding: 0 15px; - margin: 3px 20px 3px 0; + margin: 3px 10px 3px 0; + width: 70px; line-height: 36px; height: 36px; overflow: hidden; @@ -351,9 +360,12 @@ } .btns button:active { - background: #fd54a6 + background: #5da1f5 } + .btns button:hover { + background: #5da1f5 + } .pd { padding: 0 0 6px 0; } @@ -361,7 +373,7 @@ .lb { display: inline-block; vertical-align: middle; - background: #ff3d9b; + background: #327de8; color: #fff; font-size: 14px; padding: 2px 8px;