diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
index de6291c4..6ce051dc 100644
--- a/client/demo/dist/index.js
+++ b/client/demo/dist/index.js
@@ -26,7 +26,7 @@ eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _css_App_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css/App.css */ \"./src/css/App.css\");\n/* harmony import */ var _100_options_microphone__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./100_options_microphone */ \"./src/100_options_microphone.tsx\");\n\n\n\n\n\n\n\nvar container = document.getElementById(\"app\");\nvar root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_3__.createRoot)(container);\nvar App = function App() {\n var _useMicrophoneOptions = (0,_100_options_microphone__WEBPACK_IMPORTED_MODULE_5__.useMicrophoneOptions)(),\n voiceChangerSetting = _useMicrophoneOptions.voiceChangerSetting,\n clearSetting = _useMicrophoneOptions.clearSetting;\n var onClearSettingClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n clearSetting();\n location.reload();\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onClearSettingClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var clearRow = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-button\",\n onClick: onClearSettingClicked\n }, \"clear setting\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-item-text\"\n })));\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"main-body\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-row split-6-4\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-top-title\"\n }, \"Voice Changer Setting\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-top-title-belongings\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"belonging-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"a\", {\n className: \"link\",\n href: \"https://github.com/w-okada/voice-changer\",\n target: \"_blank\",\n rel: \"noopener noreferrer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"img\", {\n src: \"./assets/icons/github.svg\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"span\", null, \"github\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"belonging-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"a\", {\n className: \"link\",\n href: \"https://zenn.dev/wok/articles/s01_vc001_top\",\n target: \"_blank\",\n rel: \"noopener noreferrer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"img\", {\n src: \"./assets/icons/help-circle.svg\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"span\", null, \"manual\"))))), clearRow, voiceChangerSetting, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"audio\", {\n id: \"audio-output\"\n })));\n};\nroot.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(App, null));\n\n//# sourceURL=webpack://demo/./src/000_index.tsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ \"./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var react_dom_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-dom/client */ \"./node_modules/react-dom/client.js\");\n/* harmony import */ var _css_App_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./css/App.css */ \"./src/css/App.css\");\n/* harmony import */ var _100_options_microphone__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./100_options_microphone */ \"./src/100_options_microphone.tsx\");\n\n\n\n\n\n\n\nvar container = document.getElementById(\"app\");\nvar root = (0,react_dom_client__WEBPACK_IMPORTED_MODULE_3__.createRoot)(container);\nvar App = function App() {\n var _useMicrophoneOptions = (0,_100_options_microphone__WEBPACK_IMPORTED_MODULE_5__.useMicrophoneOptions)(),\n voiceChangerSetting = _useMicrophoneOptions.voiceChangerSetting,\n clearSetting = _useMicrophoneOptions.clearSetting;\n var onClearSettingClicked = /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().mark(function _callee() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_1___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n clearSetting();\n location.reload();\n case 2:\n case \"end\":\n return _context.stop();\n }\n }, _callee);\n }));\n return function onClearSettingClicked() {\n return _ref.apply(this, arguments);\n };\n }();\n var clearRow = (0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)(function () {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-row split-3-3-4 left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-button-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-button\",\n onClick: onClearSettingClicked\n }, \"clear setting\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-item-text\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-item-text\"\n })));\n }, []);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"main-body\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-row split-6-4\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-top-title\"\n }, \"Voice Changer Setting\", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"span\", {\n className: \"body-top-title-version\"\n }, \"for v.1.5.x\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"body-top-title-belongings\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"belonging-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"a\", {\n className: \"link\",\n href: \"https://github.com/w-okada/voice-changer\",\n target: \"_blank\",\n rel: \"noopener noreferrer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"img\", {\n src: \"./assets/icons/github.svg\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"span\", null, \"github\"))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", {\n className: \"belonging-item\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"a\", {\n className: \"link\",\n href: \"https://zenn.dev/wok/articles/s01_vc001_top\",\n target: \"_blank\",\n rel: \"noopener noreferrer\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"img\", {\n src: \"./assets/icons/help-circle.svg\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"span\", null, \"manual\"))))), clearRow, voiceChangerSetting, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(\"audio\", {\n id: \"audio-output\"\n })));\n};\nroot.render( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_2__.createElement(App, null));\n\n//# sourceURL=webpack://demo/./src/000_index.tsx?");
/***/ }),
@@ -125,7 +125,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ ((module, __webpack_exports__, __webpack_require__) => {
"use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":root {\\n --text-color: #333;\\n --company-color1: rgba(64, 119, 187, 1);\\n --company-color2: rgba(29, 47, 78, 1);\\n --company-color3: rgba(255, 255, 255, 1);\\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\\n --global-shadow-color: rgba(0, 0, 0, 0.4);\\n\\n --sidebar-transition-time: 0.3s;\\n --sidebar-transition-time-quick: 0.1s;\\n --sidebar-transition-animation: ease-in-out;\\n\\n --header-height: 1.5rem;\\n --right-sidebar-width: 320px;\\n\\n --dialog-border-color: rgba(100, 100, 100, 1);\\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\\n --dialog-background-color: rgba(255, 255, 255, 1);\\n --dialog-primary-color: rgba(19, 70, 209, 1);\\n --dialog-active-color: rgba(40, 70, 209, 1);\\n --dialog-input-border-color: rgba(200, 200, 200, 1);\\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\\n\\n --body-video-seeker-height: 3rem;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n font-family: \\\"Poppins\\\", sans-serif;\\n}\\nhtml {\\n font-size: 16px;\\n}\\nbody {\\n height: 100%;\\n width: 100%;\\n overflow-y: scroll;\\n overflow-x: hidden;\\n color: var(--text-color);\\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%);\\n}\\n#app {\\n height: 100%;\\n width: 100%;\\n}\\n.main-body {\\n height: 100%;\\n width: 100%;\\n padding: 2rem;\\n font-family: \\\"Yusei Magic\\\", sans-serif;\\n display: flex;\\n flex-direction: column;\\n font-size: 1rem;\\n}\\n.body-row {\\n}\\n.split-6-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-6-4 > div:nth-child(1) {\\n left: 0px;\\n width: 60%;\\n }\\n.split-6-4 > div:nth-child(2) {\\n left: 60%;\\n width: 40%;\\n }\\n\\n.split-4-6 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.split-4-6 > div:nth-child(1) {\\n left: 0px;\\n width: 40%;\\n }\\n\\n.split-4-6 > div:nth-child(2) {\\n left: 40%;\\n width: 60%;\\n }\\n.split-3-7 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-7 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-7 > div:nth-child(2) {\\n left: 30%;\\n width: 70%;\\n }\\n\\n.split-3-3-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.split-3-3-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n\\n.split-3-3-4 > div:nth-child(2) {\\n left: 30%;\\n width: 30%;\\n }\\n\\n.split-3-3-4 > div:nth-child(3) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-1-2-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-1-2-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-1-2-4 > div:nth-child(2) {\\n left: 30%;\\n width: 10%;\\n }\\n.split-3-1-2-4 > div:nth-child(3) {\\n left: 40%;\\n width: 20%;\\n }\\n.split-3-1-2-4 > div:nth-child(4) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-2-1-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-2-1-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-2-1-4 > div:nth-child(2) {\\n left: 30%;\\n width: 20%;\\n }\\n.split-3-2-1-4 > div:nth-child(3) {\\n left: 50%;\\n width: 10%;\\n }\\n.split-3-2-1-4 > div:nth-child(4) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-2-2-2-1 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-2-2-2-1 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(2) {\\n left: 30%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(3) {\\n left: 50%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(4) {\\n left: 70%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(5) {\\n left: 90%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-1-1-1-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(2) {\\n left: 30%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(3) {\\n left: 40%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(4) {\\n left: 50%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(5) {\\n left: 60%;\\n width: 40%;\\n }\\n.underline {\\n border-bottom: 3px solid #333;\\n}\\n.left-padding-1 {\\n padding-left: 1rem;\\n}\\n.left-padding-2 {\\n padding-left: 2rem;\\n}\\n.left-margin-1 {\\n margin-left: 1rem;\\n}\\n.left-margin-2 {\\n margin-left: 2rem;\\n}\\n.highlight {\\n background-color: rgba(200, 200, 255, 0.3);\\n}\\n.guided {\\n /* background-color: rgba(9, 133, 67, 0.3); */\\n background-color: rgba(159, 165, 162, 0.1);\\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\\n}\\n\\n.divider {\\n height: 4px;\\n /* background-color: rgba(16, 210, 113, 0.1); */\\n background-color: rgba(31, 42, 36, 0.1);\\n}\\n\\n.body-top-title {\\n font-size: 3rem;\\n}\\n.body-top-title-belongings {\\n display: flex;\\n align-items: flex-end;\\n justify-content: flex-start;\\n}\\n.body-top-title-belongings > div {\\n margin-left: 10px;\\n margin-right: 10px;\\n }\\n.body-top-title-belongings > .belonging-item > .link {\\n text-decoration: none;\\n }\\n.body-top-title-belongings > .belonging-item > .link > span {\\n font-size: small;\\n }\\n\\n.body-section-title {\\n font-size: 1.5rem;\\n color: rgb(51, 49, 49);\\n}\\n.body-sub-section-title {\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: rgb(3, 53, 12);\\n}\\n\\n.body-item-title {\\n color: rgb(51, 99, 49);\\n}\\n.body-item-text {\\n color: rgb(30, 30, 30);\\n}\\n.body-item-text .body-item-text-item {\\n padding-left: 1rem;\\n }\\n.body-item-text-small {\\n color: rgb(30, 30, 30);\\n font-size: 0.7rem;\\n}\\n.body-item-input {\\n width: 90%;\\n}\\n\\n.body-button-container {\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n}\\n\\n.body-button-container > div {\\n margin-left: 5px;\\n margin-right: 5px;\\n padding-left: 20px;\\n padding-right: 20px;\\n }\\n\\n.body-button-container .body-button {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n cursor: pointer;\\n vertical-align: middle;\\n }\\n\\n.body-button-container .body-button:hover {\\n border: solid 1px #000;\\n }\\n\\n.body-button-container .body-button-disabled {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n vertical-align: middle;\\n background: #ddd;\\n }\\n\\n.body-button-container .body-button-active {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #333;\\n border-radius: 2px;\\n background: #ada;\\n }\\n\\n.body-button-container .body-button-stanby {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n background: #aba;\\n cursor: pointer;\\n }\\n\\n.body-button-container .body-button-stanby:hover {\\n border: solid 1px #000;\\n }\\n.body-select-container .body-select {\\n color: rgb(30, 30, 30);\\n }\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Chicle&family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":root {\\n --text-color: #333;\\n --company-color1: rgba(64, 119, 187, 1);\\n --company-color2: rgba(29, 47, 78, 1);\\n --company-color3: rgba(255, 255, 255, 1);\\n --company-color1-alpha: rgba(64, 119, 187, 0.3);\\n --company-color2-alpha: rgba(29, 47, 78, 0.3);\\n --company-color3-alpha: rgba(255, 255, 255, 0.3);\\n --global-shadow-color: rgba(0, 0, 0, 0.4);\\n\\n --sidebar-transition-time: 0.3s;\\n --sidebar-transition-time-quick: 0.1s;\\n --sidebar-transition-animation: ease-in-out;\\n\\n --header-height: 1.5rem;\\n --right-sidebar-width: 320px;\\n\\n --dialog-border-color: rgba(100, 100, 100, 1);\\n --dialog-shadow-color: rgba(0, 0, 0, 0.3);\\n --dialog-background-color: rgba(255, 255, 255, 1);\\n --dialog-primary-color: rgba(19, 70, 209, 1);\\n --dialog-active-color: rgba(40, 70, 209, 1);\\n --dialog-input-border-color: rgba(200, 200, 200, 1);\\n --dialog-submit-button-color: rgba(180, 190, 230, 1);\\n --dialog-cancel-button-color: rgba(235, 80, 80, 1);\\n\\n --body-video-seeker-height: 3rem;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box;\\n font-family: \\\"Poppins\\\", sans-serif;\\n}\\nhtml {\\n font-size: 16px;\\n}\\nbody {\\n height: 100%;\\n width: 100%;\\n overflow-y: scroll;\\n overflow-x: hidden;\\n color: var(--text-color);\\n /* background: linear-gradient(45deg, var(--company-color1) 0, 5%, var(--company-color2) 5% 10%, var(--company-color3) 10% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%); */\\n background: linear-gradient(45deg, var(--company-color1) 0, 1%, var(--company-color2) 1% 5%, var(--company-color3) 5% 80%, var(--company-color1) 80% 85%, var(--company-color2) 85% 100%);\\n}\\n#app {\\n height: 100%;\\n width: 100%;\\n}\\n.main-body {\\n height: 100%;\\n width: 100%;\\n padding: 2rem;\\n font-family: \\\"Yusei Magic\\\", sans-serif;\\n display: flex;\\n flex-direction: column;\\n font-size: 1rem;\\n}\\n.body-row {\\n}\\n.split-6-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-6-4 > div:nth-child(1) {\\n left: 0px;\\n width: 60%;\\n }\\n.split-6-4 > div:nth-child(2) {\\n left: 60%;\\n width: 40%;\\n }\\n\\n.split-4-6 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.split-4-6 > div:nth-child(1) {\\n left: 0px;\\n width: 40%;\\n }\\n\\n.split-4-6 > div:nth-child(2) {\\n left: 40%;\\n width: 60%;\\n }\\n.split-3-7 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-7 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-7 > div:nth-child(2) {\\n left: 30%;\\n width: 70%;\\n }\\n\\n.split-3-3-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n\\n.split-3-3-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n\\n.split-3-3-4 > div:nth-child(2) {\\n left: 30%;\\n width: 30%;\\n }\\n\\n.split-3-3-4 > div:nth-child(3) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-1-2-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-1-2-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-1-2-4 > div:nth-child(2) {\\n left: 30%;\\n width: 10%;\\n }\\n.split-3-1-2-4 > div:nth-child(3) {\\n left: 40%;\\n width: 20%;\\n }\\n.split-3-1-2-4 > div:nth-child(4) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-2-1-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-2-1-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-2-1-4 > div:nth-child(2) {\\n left: 30%;\\n width: 20%;\\n }\\n.split-3-2-1-4 > div:nth-child(3) {\\n left: 50%;\\n width: 10%;\\n }\\n.split-3-2-1-4 > div:nth-child(4) {\\n left: 60%;\\n width: 40%;\\n }\\n.split-3-2-2-2-1 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-2-2-2-1 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(2) {\\n left: 30%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(3) {\\n left: 50%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(4) {\\n left: 70%;\\n width: 20%;\\n }\\n.split-3-2-2-2-1 > div:nth-child(5) {\\n left: 90%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 {\\n display: flex;\\n width: 100%;\\n justify-content: center;\\n margin: 1px 0px 1px 0px;\\n}\\n.split-3-1-1-1-4 > div:nth-child(1) {\\n left: 0px;\\n width: 30%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(2) {\\n left: 30%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(3) {\\n left: 40%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(4) {\\n left: 50%;\\n width: 10%;\\n }\\n.split-3-1-1-1-4 > div:nth-child(5) {\\n left: 60%;\\n width: 40%;\\n }\\n.underline {\\n border-bottom: 3px solid #333;\\n}\\n.left-padding-1 {\\n padding-left: 1rem;\\n}\\n.left-padding-2 {\\n padding-left: 2rem;\\n}\\n.left-margin-1 {\\n margin-left: 1rem;\\n}\\n.left-margin-2 {\\n margin-left: 2rem;\\n}\\n.highlight {\\n background-color: rgba(200, 200, 255, 0.3);\\n}\\n.guided {\\n /* background-color: rgba(9, 133, 67, 0.3); */\\n background-color: rgba(159, 165, 162, 0.1);\\n /* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */\\n}\\n\\n.divider {\\n height: 4px;\\n /* background-color: rgba(16, 210, 113, 0.1); */\\n background-color: rgba(31, 42, 36, 0.1);\\n}\\n\\n.body-top-title {\\n font-size: 3rem;\\n}\\n.body-top-title-version {\\n margin-left: 2rem;\\n font-size: 1.2rem;\\n background: linear-gradient(transparent 60%, yellow 30%);\\n}\\n.body-top-title-belongings {\\n display: flex;\\n align-items: flex-end;\\n justify-content: flex-start;\\n}\\n.body-top-title-belongings > div {\\n margin-left: 10px;\\n margin-right: 10px;\\n }\\n.body-top-title-belongings > .belonging-item > .link {\\n text-decoration: none;\\n }\\n.body-top-title-belongings > .belonging-item > .link > span {\\n font-size: small;\\n }\\n\\n.body-section-title {\\n font-size: 1.5rem;\\n color: rgb(51, 49, 49);\\n}\\n.body-sub-section-title {\\n font-size: 1.1rem;\\n font-weight: 700;\\n color: rgb(3, 53, 12);\\n}\\n\\n.body-item-title {\\n color: rgb(51, 99, 49);\\n}\\n.body-item-text {\\n color: rgb(30, 30, 30);\\n}\\n.body-item-text .body-item-text-item {\\n padding-left: 1rem;\\n }\\n.body-item-text-small {\\n color: rgb(30, 30, 30);\\n font-size: 0.7rem;\\n}\\n.body-item-input {\\n width: 90%;\\n}\\n\\n.body-button-container {\\n display: flex;\\n flex-direction: row;\\n align-items: center;\\n}\\n\\n.body-button-container > div {\\n margin-left: 5px;\\n margin-right: 5px;\\n padding-left: 20px;\\n padding-right: 20px;\\n }\\n\\n.body-button-container .body-button {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n cursor: pointer;\\n vertical-align: middle;\\n }\\n\\n.body-button-container .body-button:hover {\\n border: solid 1px #000;\\n }\\n\\n.body-button-container .body-button-disabled {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n vertical-align: middle;\\n background: #ddd;\\n }\\n\\n.body-button-container .body-button-active {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #333;\\n border-radius: 2px;\\n background: #ada;\\n }\\n\\n.body-button-container .body-button-stanby {\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n user-select: none;\\n border: solid 1px #999;\\n border-radius: 2px;\\n background: #aba;\\n cursor: pointer;\\n }\\n\\n.body-button-container .body-button-stanby:hover {\\n border: solid 1px #000;\\n }\\n.body-select-container .body-select {\\n color: rgb(30, 30, 30);\\n }\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://demo/./src/css/App.css?./node_modules/css-loader/dist/cjs.js??ruleSet%5B1%5D.rules%5B2%5D.use%5B1%5D!./node_modules/postcss-loader/dist/cjs.js");
/***/ }),
diff --git a/client/demo/src/000_index.tsx b/client/demo/src/000_index.tsx
index fcf5a69c..7e4b99f7 100644
--- a/client/demo/src/000_index.tsx
+++ b/client/demo/src/000_index.tsx
@@ -36,6 +36,7 @@ const App = () => {
<div className="body-row split-6-4">
<div className="body-top-title">
Voice Changer Setting
+ <span className="body-top-title-version">for v.1.5.x</span>
</div>
<div className="body-top-title-belongings">
<div className="belonging-item">
diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css
index 3701d3ec..d299823a 100644
--- a/client/demo/src/css/App.css
+++ b/client/demo/src/css/App.css
@@ -254,6 +254,11 @@ body {
.body-top-title {
font-size: 3rem;
}
+.body-top-title-version {
+ margin-left: 2rem;
+ font-size: 1.2rem;
+ background: linear-gradient(transparent 60%, yellow 30%);
+}
.body-top-title-belongings {
display: flex;
align-items: flex-end;