diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js index ee253048c..a59940410 100644 --- a/client/demo/dist/index.js +++ b/client/demo/dist/index.js @@ -411,7 +411,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DeviceArea: () => (/* binding */ DeviceArea)\n/* harmony export */ });\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_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../const */ \"./src/const.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar DeviceArea = function DeviceArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n audioContext = _useAppState.audioContext,\n setAudioOutputElementId = _useAppState.setAudioOutputElementId,\n initializedRef = _useAppState.initializedRef,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n startOutputRecording = _useAppState.startOutputRecording,\n stopOutputRecording = _useAppState.stopOutputRecording;\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__.useGuiState)(),\n isConverting = _useGuiState.isConverting,\n audioInputForGUI = _useGuiState.audioInputForGUI,\n inputAudioDeviceInfo = _useGuiState.inputAudioDeviceInfo,\n setAudioInputForGUI = _useGuiState.setAudioInputForGUI,\n fileInputEchoback = _useGuiState.fileInputEchoback,\n setFileInputEchoback = _useGuiState.setFileInputEchoback,\n setAudioOutputForGUI = _useGuiState.setAudioOutputForGUI,\n audioOutputForGUI = _useGuiState.audioOutputForGUI,\n outputAudioDeviceInfo = _useGuiState.outputAudioDeviceInfo;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n inputHostApi = _useState2[0],\n setInputHostApi = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n outputHostApi = _useState4[0],\n setOutputHostApi = _useState4[1];\n var audioSrcNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n var _useIndexedDB = (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.useIndexedDB)({\n clientType: null\n }),\n getItem = _useIndexedDB.getItem,\n setItem = _useIndexedDB.setItem;\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState5, 2),\n outputRecordingStarted = _useState6[0],\n setOutputRecordingStarted = _useState6[1];\n\n // (1) Audio Mode\n var deviceModeRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var enableServerAudio = serverSetting.serverSetting.enableServerAudio;\n var clientChecked = enableServerAudio == 1 ? false : true;\n var serverChecked = enableServerAudio == 1 ? true : false;\n var onDeviceModeChanged = function onDeviceModeChanged(val) {\n if (isConverting) {\n alert(\"cannot change mode when voice conversion is enabled\");\n return;\n }\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n enableServerAudio: val\n }));\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"AUDIO:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"radio\",\n id: \"client-device\",\n name: \"device-mode\",\n checked: clientChecked,\n onChange: function onChange() {\n onDeviceModeChanged(0);\n }\n }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"client-device\"\n }, \"client\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n className: \"left-padding-1\",\n type: \"radio\",\n id: \"server-device\",\n name: \"device-mode\",\n checked: serverChecked,\n onChange: function onChange() {\n onDeviceModeChanged(1);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"server-device\"\n }, \"server\")))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings]);\n\n // (2) Audio Input \n // キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず）\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (typeof setting.voiceChangerClientSetting.audioInput == \"string\") {\n if (inputAudioDeviceInfo.find(function (x) {\n // console.log(\"COMPARE:\", x.deviceId, appState.clientSetting.setting.audioInput)\n return x.deviceId == setting.voiceChangerClientSetting.audioInput;\n })) {\n setAudioInputForGUI(setting.voiceChangerClientSetting.audioInput);\n }\n }\n }, [inputAudioDeviceInfo, setting.voiceChangerClientSetting.audioInput]);\n\n // (2-1) クライアント \n var clientAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioInputForGUI,\n onChange: /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee(e) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n setAudioInputForGUI(e.target.value);\n if (!(e.target.value != \"file\")) {\n _context.next = 14;\n break;\n }\n _context.prev = 2;\n _context.next = 5;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: e.target.value\n }));\n case 5:\n _context.next = 14;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](2);\n alert(_context.t0);\n console.error(_context.t0);\n setAudioInputForGUI(\"none\");\n _context.next = 14;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: null\n }));\n case 14:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[2, 7]]);\n }));\n return function (_x) {\n return _ref.apply(this, arguments);\n };\n }()\n }, inputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [setVoiceChangerClientSetting, setting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-2) サーバ\n var serverAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioInputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (inputHostApi != \"ALL\" && x.hostAPI != inputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: inputHostApi,\n onChange: function onChange(e) {\n setInputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: serverSetting.serverSetting.serverInputDeviceId,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [inputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-3) File\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n audio.volume = fileInputEchoback ? 1 : 0;\n }\n });\n }, [fileInputEchoback]);\n var audioInputMediaRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (audioInputForGUI != \"file\" || serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var url, audio, dst, audio_echo, audio_org;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelectorAsDataURL)(\"\");\n case 2:\n url = _context2.sent;\n // input stream for client.\n audio = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED);\n audio.pause();\n audio.srcObject = null;\n audio.src = url;\n _context2.next = 9;\n return audio.play();\n case 9:\n if (!audioSrcNode.current) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n if (audioSrcNode.current.mediaElement != audio) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n dst = audioContext.createMediaStreamDestination();\n audioSrcNode.current.connect(dst);\n try {\n setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: dst.stream\n }));\n } catch (e) {\n console.error(e);\n }\n audio_echo = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK);\n audio_echo.srcObject = dst.stream;\n audio_echo.play();\n audio_echo.volume = 0;\n setFileInputEchoback(false);\n\n // original stream to play.\n audio_org = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL);\n audio_org.src = url;\n audio_org.pause();\n case 22:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var echobackClass = fileInputEchoback ? \"config-sub-area-control-field-wav-file-echoback-button-active\" : \"config-sub-area-control-field-wav-file-echoback-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file-audio-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL,\n controls: true,\n hidden: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n className: \"config-sub-area-control-field-wav-file-audio\",\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED,\n controls: true,\n controlsList: \"nodownload noplaybackrate\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK,\n controls: true,\n hidden: true\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"config-sub-area-control-field-wav-file-folder\",\n src: \"./assets/icons/folder.svg\",\n onClick: onFileLoadClicked\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: echobackClass,\n onClick: function onClick() {\n setFileInputEchoback(!fileInputEchoback);\n }\n }, \"echo\", fileInputEchoback))));\n }, [audioInputForGUI, fileInputEchoback, serverSetting.serverSetting]);\n\n // (3) Audio Output\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var loadCache = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var key;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return getItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT);\n case 2:\n key = _context3.sent;\n if (key) {\n setAudioOutputForGUI(key);\n }\n case 4:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function loadCache() {\n return _ref3.apply(this, arguments);\n };\n }();\n loadCache();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var setAudioOutput = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n var mediaDeviceInfos;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return navigator.mediaDevices.enumerateDevices();\n case 2:\n mediaDeviceInfos = _context4.sent;\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n // Server Audio を使う場合はElementから音は出さない。\n audio.volume = 0;\n } else if (audioOutputForGUI == \"none\") {\n // @ts-ignore\n audio.setSinkId(\"\");\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = 0;\n } else {\n audio.volume = 0;\n }\n } else {\n var audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n var found = audioOutputs.some(function (x) {\n return x.deviceId == audioOutputForGUI;\n });\n if (found) {\n // @ts-ignore // 例外キャッチできないので事前にIDチェックが必要らしい。！？\n audio.setSinkId(audioOutputForGUI);\n } else {\n console.warn(\"No audio output device. use default\");\n }\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = fileInputEchoback ? 1 : 0;\n } else {\n audio.volume = 1;\n }\n }\n }\n });\n case 4:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function setAudioOutput() {\n return _ref4.apply(this, arguments);\n };\n }();\n setAudioOutput();\n }, [audioOutputForGUI, fileInputEchoback, serverSetting.serverSetting.enableServerAudio]);\n\n // (3-1) クライアント \n var clientAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioOutputForGUI,\n onChange: function onChange(e) {\n setAudioOutputForGUI(e.target.value);\n setItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT, e.target.value);\n }\n }, outputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [serverSetting.serverSetting.enableServerAudio, outputAudioDeviceInfo, audioOutputForGUI]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n console.log(\"initializedRef.current\", initializedRef.current);\n setAudioOutputElementId(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT);\n }, [initializedRef.current]);\n\n // (3-2) サーバ\n var serverAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (outputHostApi != \"ALL\" && x.hostAPI != outputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: outputHostApi,\n onChange: function onChange(e) {\n setOutputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: serverSetting.serverSetting.serverOutputDeviceId,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [outputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (4) レコーダー\n var outputRecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onOutputRecordStartClicked = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n setOutputRecordingStarted(true);\n _context5.next = 3;\n return startOutputRecording();\n case 3:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function onOutputRecordStartClicked() {\n return _ref5.apply(this, arguments);\n };\n }();\n var onOutputRecordStopClicked = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6() {\n var record;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n setOutputRecordingStarted(false);\n _context6.next = 3;\n return stopOutputRecording();\n case 3:\n record = _context6.sent;\n downloadRecord(record);\n case 5:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOutputRecordStopClicked() {\n return _ref6.apply(this, arguments);\n };\n }();\n var startClassName = outputRecordingStarted ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var stopClassName = outputRecordingStarted ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"REC.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStopClicked,\n className: stopClassName\n }, \"stop\"))));\n }, [outputRecordingStarted, startOutputRecording, stopOutputRecording]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, deviceModeRow, clientAudioInputRow, serverAudioInputRow, audioInputMediaRow, clientAudioOutputRow, serverAudioOutputRow, outputRecorderRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n hidden: true,\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT\n }));\n};\nvar downloadRecord = function downloadRecord(data) {\n var writeString = function writeString(view, offset, string) {\n for (var i = 0; i < string.length; i++) {\n view.setUint8(offset + i, string.charCodeAt(i));\n }\n };\n var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {\n for (var i = 0; i < input.length; i++, offset += 2) {\n var s = Math.max(-1, Math.min(1, input[i]));\n output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);\n }\n };\n var buffer = new ArrayBuffer(44 + data.length * 2);\n var view = new DataView(buffer);\n\n // https://www.youfit.co.jp/archives/1418\n writeString(view, 0, 'RIFF'); // RIFFヘッダ\n view.setUint32(4, 32 + data.length * 2, true); // これ以降のファイルサイズ\n writeString(view, 8, 'WAVE'); // WAVEヘッダ\n writeString(view, 12, 'fmt '); // fmtチャンク\n view.setUint32(16, 16, true); // fmtチャンクのバイト数\n view.setUint16(20, 1, true); // フォーマットID\n view.setUint16(22, 1, true); // チャンネル数\n view.setUint32(24, 48000, true); // サンプリングレート\n view.setUint32(28, 48000 * 2, true); // データ速度\n view.setUint16(32, 2, true); // ブロックサイズ\n view.setUint16(34, 16, true); // サンプルあたりのビット数\n writeString(view, 36, 'data'); // dataチャンク\n view.setUint32(40, data.length * 2, true); // 波形データのバイト数\n floatTo16BitPCM(view, 44, data); // 波形データ\n var audioBlob = new Blob([view], {\n type: 'audio/wav'\n });\n var url = URL.createObjectURL(audioBlob);\n var a = document.createElement(\"a\");\n a.href = url;\n a.download = \"output.wav\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-3_DeviceArea.tsx?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ DeviceArea: () => (/* binding */ DeviceArea)\n/* harmony export */ });\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_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ \"./node_modules/@babel/runtime/helpers/esm/defineProperty.js\");\n/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ \"./node_modules/@babel/runtime/helpers/esm/slicedToArray.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babel/runtime/regenerator */ \"./node_modules/@babel/runtime/regenerator/index.js\");\n/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../001_provider/001_AppStateProvider */ \"./src/001_provider/001_AppStateProvider.tsx\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @dannadori/voice-changer-client-js */ \"./node_modules/@dannadori/voice-changer-client-js/dist/index.js\");\n/* harmony import */ var _dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var _001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../001_GuiStateProvider */ \"./src/components/demo/001_GuiStateProvider.tsx\");\n/* harmony import */ var _const__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../const */ \"./src/const.ts\");\n\n\n\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__[\"default\"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }\n\n\n\n\n\nvar DeviceArea = function DeviceArea(_props) {\n var _useAppState = (0,_001_provider_001_AppStateProvider__WEBPACK_IMPORTED_MODULE_5__.useAppState)(),\n setting = _useAppState.setting,\n serverSetting = _useAppState.serverSetting,\n audioContext = _useAppState.audioContext,\n setAudioOutputElementId = _useAppState.setAudioOutputElementId,\n initializedRef = _useAppState.initializedRef,\n setVoiceChangerClientSetting = _useAppState.setVoiceChangerClientSetting,\n startOutputRecording = _useAppState.startOutputRecording,\n stopOutputRecording = _useAppState.stopOutputRecording;\n var _useGuiState = (0,_001_GuiStateProvider__WEBPACK_IMPORTED_MODULE_7__.useGuiState)(),\n isConverting = _useGuiState.isConverting,\n audioInputForGUI = _useGuiState.audioInputForGUI,\n inputAudioDeviceInfo = _useGuiState.inputAudioDeviceInfo,\n setAudioInputForGUI = _useGuiState.setAudioInputForGUI,\n fileInputEchoback = _useGuiState.fileInputEchoback,\n setFileInputEchoback = _useGuiState.setFileInputEchoback,\n setAudioOutputForGUI = _useGuiState.setAudioOutputForGUI,\n audioOutputForGUI = _useGuiState.audioOutputForGUI,\n outputAudioDeviceInfo = _useGuiState.outputAudioDeviceInfo;\n var _useState = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState2 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState, 2),\n inputHostApi = _useState2[0],\n setInputHostApi = _useState2[1];\n var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(\"ALL\"),\n _useState4 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState3, 2),\n outputHostApi = _useState4[0],\n setOutputHostApi = _useState4[1];\n var audioSrcNode = (0,react__WEBPACK_IMPORTED_MODULE_4__.useRef)();\n var _useIndexedDB = (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.useIndexedDB)({\n clientType: null\n }),\n getItem = _useIndexedDB.getItem,\n setItem = _useIndexedDB.setItem;\n var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_4__.useState)(false),\n _useState6 = (0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(_useState5, 2),\n outputRecordingStarted = _useState6[0],\n setOutputRecordingStarted = _useState6[1];\n\n // (1) Audio Mode\n var deviceModeRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n var enableServerAudio = serverSetting.serverSetting.enableServerAudio;\n var clientChecked = enableServerAudio == 1 ? false : true;\n var serverChecked = enableServerAudio == 1 ? true : false;\n var onDeviceModeChanged = function onDeviceModeChanged(val) {\n if (isConverting) {\n alert(\"cannot change mode when voice conversion is enabled\");\n return;\n }\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n enableServerAudio: val\n }));\n };\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"AUDIO:\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n type: \"radio\",\n id: \"client-device\",\n name: \"device-mode\",\n checked: clientChecked,\n onChange: function onChange() {\n onDeviceModeChanged(0);\n }\n }), \" \", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"client-device\"\n }, \"client\")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-noise-checkbox-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"input\", {\n className: \"left-padding-1\",\n type: \"radio\",\n id: \"server-device\",\n name: \"device-mode\",\n checked: serverChecked,\n onChange: function onChange() {\n onDeviceModeChanged(1);\n }\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"label\", {\n htmlFor: \"server-device\"\n }, \"server\")))));\n }, [serverSetting.serverSetting, serverSetting.updateServerSettings, isConverting]);\n\n // (2) Audio Input \n // キャッシュの設定は反映（たぶん、設定操作の時も起動していしまう。が問題は起こらないはず）\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n if (typeof setting.voiceChangerClientSetting.audioInput == \"string\") {\n if (inputAudioDeviceInfo.find(function (x) {\n // console.log(\"COMPARE:\", x.deviceId, appState.clientSetting.setting.audioInput)\n return x.deviceId == setting.voiceChangerClientSetting.audioInput;\n })) {\n setAudioInputForGUI(setting.voiceChangerClientSetting.audioInput);\n }\n }\n }, [inputAudioDeviceInfo, setting.voiceChangerClientSetting.audioInput]);\n\n // (2-1) クライアント \n var clientAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioInputForGUI,\n onChange: /*#__PURE__*/function () {\n var _ref = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee(e) {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee$(_context) {\n while (1) switch (_context.prev = _context.next) {\n case 0:\n setAudioInputForGUI(e.target.value);\n if (!(e.target.value != \"file\")) {\n _context.next = 14;\n break;\n }\n _context.prev = 2;\n _context.next = 5;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: e.target.value\n }));\n case 5:\n _context.next = 14;\n break;\n case 7:\n _context.prev = 7;\n _context.t0 = _context[\"catch\"](2);\n alert(_context.t0);\n console.error(_context.t0);\n setAudioInputForGUI(\"none\");\n _context.next = 14;\n return setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: null\n }));\n case 14:\n case \"end\":\n return _context.stop();\n }\n }, _callee, null, [[2, 7]]);\n }));\n return function (_x) {\n return _ref.apply(this, arguments);\n };\n }()\n }, inputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [setVoiceChangerClientSetting, setting, inputAudioDeviceInfo, audioInputForGUI, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-2) サーバ\n var serverAudioInputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioInputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (inputHostApi != \"ALL\" && x.hostAPI != inputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"input\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: inputHostApi,\n onChange: function onChange(e) {\n setInputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: serverSetting.serverSetting.serverInputDeviceId,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverInputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [inputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (2-3) File\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n audio.volume = fileInputEchoback ? 1 : 0;\n }\n });\n }, [fileInputEchoback]);\n var audioInputMediaRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (audioInputForGUI != \"file\" || serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onFileLoadClicked = /*#__PURE__*/function () {\n var _ref2 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee2() {\n var url, audio, dst, audio_echo, audio_org;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee2$(_context2) {\n while (1) switch (_context2.prev = _context2.next) {\n case 0:\n _context2.next = 2;\n return (0,_dannadori_voice_changer_client_js__WEBPACK_IMPORTED_MODULE_6__.fileSelectorAsDataURL)(\"\");\n case 2:\n url = _context2.sent;\n // input stream for client.\n audio = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED);\n audio.pause();\n audio.srcObject = null;\n audio.src = url;\n _context2.next = 9;\n return audio.play();\n case 9:\n if (!audioSrcNode.current) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n if (audioSrcNode.current.mediaElement != audio) {\n audioSrcNode.current = audioContext.createMediaElementSource(audio);\n }\n dst = audioContext.createMediaStreamDestination();\n audioSrcNode.current.connect(dst);\n try {\n setVoiceChangerClientSetting(_objectSpread(_objectSpread({}, setting.voiceChangerClientSetting), {}, {\n audioInput: dst.stream\n }));\n } catch (e) {\n console.error(e);\n }\n audio_echo = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK);\n audio_echo.srcObject = dst.stream;\n audio_echo.play();\n audio_echo.volume = 0;\n setFileInputEchoback(false);\n\n // original stream to play.\n audio_org = document.getElementById(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL);\n audio_org.src = url;\n audio_org.pause();\n case 22:\n case \"end\":\n return _context2.stop();\n }\n }, _callee2);\n }));\n return function onFileLoadClicked() {\n return _ref2.apply(this, arguments);\n };\n }();\n var echobackClass = fileInputEchoback ? \"config-sub-area-control-field-wav-file-echoback-button-active\" : \"config-sub-area-control-field-wav-file-echoback-button\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file left-padding-1\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-wav-file-audio-container\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL,\n controls: true,\n hidden: true\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n className: \"config-sub-area-control-field-wav-file-audio\",\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED,\n controls: true,\n controlsList: \"nodownload noplaybackrate\"\n }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK,\n controls: true,\n hidden: true\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"img\", {\n className: \"config-sub-area-control-field-wav-file-folder\",\n src: \"./assets/icons/folder.svg\",\n onClick: onFileLoadClicked\n })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: echobackClass,\n onClick: function onClick() {\n setFileInputEchoback(!fileInputEchoback);\n }\n }, \"echo\", fileInputEchoback))));\n }, [audioInputForGUI, fileInputEchoback, serverSetting.serverSetting]);\n\n // (3) Audio Output\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var loadCache = /*#__PURE__*/function () {\n var _ref3 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee3() {\n var key;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee3$(_context3) {\n while (1) switch (_context3.prev = _context3.next) {\n case 0:\n _context3.next = 2;\n return getItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT);\n case 2:\n key = _context3.sent;\n if (key) {\n setAudioOutputForGUI(key);\n }\n case 4:\n case \"end\":\n return _context3.stop();\n }\n }, _callee3);\n }));\n return function loadCache() {\n return _ref3.apply(this, arguments);\n };\n }();\n loadCache();\n }, []);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n var setAudioOutput = /*#__PURE__*/function () {\n var _ref4 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee4() {\n var mediaDeviceInfos;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee4$(_context4) {\n while (1) switch (_context4.prev = _context4.next) {\n case 0:\n _context4.next = 2;\n return navigator.mediaDevices.enumerateDevices();\n case 2:\n mediaDeviceInfos = _context4.sent;\n [_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_ORIGINAL, _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK].forEach(function (x) {\n var audio = document.getElementById(x);\n if (audio) {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n // Server Audio を使う場合はElementから音は出さない。\n audio.volume = 0;\n } else if (audioOutputForGUI == \"none\") {\n // @ts-ignore\n audio.setSinkId(\"\");\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = 0;\n } else {\n audio.volume = 0;\n }\n } else {\n var audioOutputs = mediaDeviceInfos.filter(function (x) {\n return x.kind == \"audiooutput\";\n });\n var found = audioOutputs.some(function (x) {\n return x.deviceId == audioOutputForGUI;\n });\n if (found) {\n // @ts-ignore // 例外キャッチできないので事前にIDチェックが必要らしい。！？\n audio.setSinkId(audioOutputForGUI);\n } else {\n console.warn(\"No audio output device. use default\");\n }\n if (x == _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK) {\n audio.volume = fileInputEchoback ? 1 : 0;\n } else {\n audio.volume = 1;\n }\n }\n }\n });\n case 4:\n case \"end\":\n return _context4.stop();\n }\n }, _callee4);\n }));\n return function setAudioOutput() {\n return _ref4.apply(this, arguments);\n };\n }();\n setAudioOutput();\n }, [audioOutputForGUI, fileInputEchoback, serverSetting.serverSetting.enableServerAudio]);\n\n // (3-1) クライアント \n var clientAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"body-select\",\n value: audioOutputForGUI,\n onChange: function onChange(e) {\n setAudioOutputForGUI(e.target.value);\n setItem(_const__WEBPACK_IMPORTED_MODULE_8__.INDEXEDDB_KEY_AUDIO_OUTPUT, e.target.value);\n }\n }, outputAudioDeviceInfo.map(function (x) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n key: x.deviceId,\n value: x.deviceId\n }, x.label);\n }))));\n }, [serverSetting.serverSetting.enableServerAudio, outputAudioDeviceInfo, audioOutputForGUI]);\n (0,react__WEBPACK_IMPORTED_MODULE_4__.useEffect)(function () {\n console.log(\"initializedRef.current\", initializedRef.current);\n setAudioOutputElementId(_const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT);\n }, [initializedRef.current]);\n\n // (3-2) サーバ\n var serverAudioOutputRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 0) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var devices = serverSetting.serverSetting.serverAudioOutputDevices;\n var hostAPIs = new Set(devices.map(function (x) {\n return x.hostAPI;\n }));\n var hostAPIOptions = Array.from(hostAPIs).map(function (x, index) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x,\n key: index\n }, x);\n });\n var filteredDevice = devices.map(function (x, index) {\n if (outputHostApi != \"ALL\" && x.hostAPI != outputHostApi) {\n return null;\n }\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: x.index,\n key: index\n }, \"[\", x.hostAPI, \"]\", x.name);\n }).filter(function (x) {\n return x != null;\n });\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title left-padding-1\"\n }, \"output\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field-auido-io\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-filter\",\n name: \"kinds\",\n id: \"kinds\",\n value: outputHostApi,\n onChange: function onChange(e) {\n setOutputHostApi(e.target.value);\n }\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"option\", {\n value: \"ALL\",\n key: \"ALL\"\n }, \"ALL\"), hostAPIOptions), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"select\", {\n className: \"config-sub-area-control-field-auido-io-select\",\n value: serverSetting.serverSetting.serverOutputDeviceId,\n onChange: function onChange(e) {\n serverSetting.updateServerSettings(_objectSpread(_objectSpread({}, serverSetting.serverSetting), {}, {\n serverOutputDeviceId: Number(e.target.value)\n }));\n }\n }, filteredDevice))));\n }, [outputHostApi, serverSetting.serverSetting, serverSetting.updateServerSettings, serverSetting.serverSetting.enableServerAudio]);\n\n // (4) レコーダー\n var outputRecorderRow = (0,react__WEBPACK_IMPORTED_MODULE_4__.useMemo)(function () {\n if (serverSetting.serverSetting.enableServerAudio == 1) {\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement((react__WEBPACK_IMPORTED_MODULE_4___default().Fragment), null);\n }\n var onOutputRecordStartClicked = /*#__PURE__*/function () {\n var _ref5 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee5() {\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee5$(_context5) {\n while (1) switch (_context5.prev = _context5.next) {\n case 0:\n setOutputRecordingStarted(true);\n _context5.next = 3;\n return startOutputRecording();\n case 3:\n case \"end\":\n return _context5.stop();\n }\n }, _callee5);\n }));\n return function onOutputRecordStartClicked() {\n return _ref5.apply(this, arguments);\n };\n }();\n var onOutputRecordStopClicked = /*#__PURE__*/function () {\n var _ref6 = (0,_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_0__[\"default\"])( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().mark(function _callee6() {\n var record;\n return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_3___default().wrap(function _callee6$(_context6) {\n while (1) switch (_context6.prev = _context6.next) {\n case 0:\n setOutputRecordingStarted(false);\n _context6.next = 3;\n return stopOutputRecording();\n case 3:\n record = _context6.sent;\n downloadRecord(record);\n case 5:\n case \"end\":\n return _context6.stop();\n }\n }, _callee6);\n }));\n return function onOutputRecordStopClicked() {\n return _ref6.apply(this, arguments);\n };\n }();\n var startClassName = outputRecordingStarted ? \"config-sub-area-button-active\" : \"config-sub-area-button\";\n var stopClassName = outputRecordingStarted ? \"config-sub-area-button\" : \"config-sub-area-button-active\";\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-title\"\n }, \"REC.\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-control-field\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area-buttons\"\n }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStartClicked,\n className: startClassName\n }, \"start\"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n onClick: onOutputRecordStopClicked,\n className: stopClassName\n }, \"stop\"))));\n }, [outputRecordingStarted, startOutputRecording, stopOutputRecording]);\n return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"div\", {\n className: \"config-sub-area\"\n }, deviceModeRow, clientAudioInputRow, serverAudioInputRow, audioInputMediaRow, clientAudioOutputRow, serverAudioOutputRow, outputRecorderRow, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_4___default().createElement(\"audio\", {\n hidden: true,\n id: _const__WEBPACK_IMPORTED_MODULE_8__.AUDIO_ELEMENT_FOR_PLAY_RESULT\n }));\n};\nvar downloadRecord = function downloadRecord(data) {\n var writeString = function writeString(view, offset, string) {\n for (var i = 0; i < string.length; i++) {\n view.setUint8(offset + i, string.charCodeAt(i));\n }\n };\n var floatTo16BitPCM = function floatTo16BitPCM(output, offset, input) {\n for (var i = 0; i < input.length; i++, offset += 2) {\n var s = Math.max(-1, Math.min(1, input[i]));\n output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);\n }\n };\n var buffer = new ArrayBuffer(44 + data.length * 2);\n var view = new DataView(buffer);\n\n // https://www.youfit.co.jp/archives/1418\n writeString(view, 0, 'RIFF'); // RIFFヘッダ\n view.setUint32(4, 32 + data.length * 2, true); // これ以降のファイルサイズ\n writeString(view, 8, 'WAVE'); // WAVEヘッダ\n writeString(view, 12, 'fmt '); // fmtチャンク\n view.setUint32(16, 16, true); // fmtチャンクのバイト数\n view.setUint16(20, 1, true); // フォーマットID\n view.setUint16(22, 1, true); // チャンネル数\n view.setUint32(24, 48000, true); // サンプリングレート\n view.setUint32(28, 48000 * 2, true); // データ速度\n view.setUint16(32, 2, true); // ブロックサイズ\n view.setUint16(34, 16, true); // サンプルあたりのビット数\n writeString(view, 36, 'data'); // dataチャンク\n view.setUint32(40, data.length * 2, true); // 波形データのバイト数\n floatTo16BitPCM(view, 44, data); // 波形データ\n var audioBlob = new Blob([view], {\n type: 'audio/wav'\n });\n var url = URL.createObjectURL(audioBlob);\n var a = document.createElement(\"a\");\n a.href = url;\n a.download = \"output.wav\";\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n};\n\n//# sourceURL=webpack://demo/./src/components/demo/components2/102-3_DeviceArea.tsx?"); /***/ }), diff --git a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx index 29badd307..b44f31323 100644 --- a/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx +++ b/client/demo/src/components/demo/components2/102-3_DeviceArea.tsx @@ -47,7 +47,7 @@ export const DeviceArea = (_props: DeviceAreaProps) => { ) - }, [serverSetting.serverSetting, serverSetting.updateServerSettings]) + }, [serverSetting.serverSetting, serverSetting.updateServerSettings, isConverting]) diff --git a/server/voice_changer/Local/ServerDevice.py b/server/voice_changer/Local/ServerDevice.py index 41ded6bbe..968ca6376 100644 --- a/server/voice_changer/Local/ServerDevice.py +++ b/server/voice_changer/Local/ServerDevice.py @@ -82,9 +82,10 @@ def audio_callback(self, indata: np.ndarray, outdata: np.ndarray, frames, times, indata = indata * self.settings.serverInputAudioGain with Timer("all_inference_time") as t: unpackedData = librosa.to_mono(indata.T) * 32768.0 + unpackedData = unpackedData.astype(np.int16) out_wav, times = self.serverDeviceCallbacks.on_request(unpackedData) - outputChunnels = outdata.shape[1] - outdata[:] = np.repeat(out_wav, outputChunnels).reshape(-1, outputChunnels) / 32768.0 + outputChannels = outdata.shape[1] + outdata[:] = np.repeat(out_wav, outputChannels).reshape(-1, outputChannels) / 32768.0 outdata[:] = outdata * self.settings.serverOutputAudioGain all_inference_time = t.secs self.performance = [all_inference_time] + times @@ -100,7 +101,6 @@ def start(self): currentModelSamplingRate = -1 while True: if self.settings.serverAudioStated == 0 or self.settings.serverInputDeviceId == -1: - # self.settings.inputSampleRate = 48000 time.sleep(2) else: sd._terminate() @@ -135,6 +135,7 @@ def start(self): blocksize=block_frame, # samplerate=currentModelSamplingRate, dtype="float32", + # dtype="int16", # channels=[currentInputChannelNum, currentOutputChannelNum], ): pass @@ -156,6 +157,7 @@ def start(self): # blocksize=block_frame, # samplerate=vc.settings.serverInputAudioSampleRate, dtype="float32", + # dtype="int16", # channels=[currentInputChannelNum, currentOutputChannelNum], ): while self.settings.serverAudioStated == 1 and sd.default.device[0] == self.settings.serverInputDeviceId and sd.default.device[1] == self.settings.serverOutputDeviceId and currentModelSamplingRate == self.serverDeviceCallbacks.get_processing_sampling_rate() and currentInputChunkNum == self.settings.serverReadChunkSize: diff --git a/server/voice_changer/VoiceChanger.py b/server/voice_changer/VoiceChanger.py index 567cc7062..f1516b87a 100755 --- a/server/voice_changer/VoiceChanger.py +++ b/server/voice_changer/VoiceChanger.py @@ -113,6 +113,9 @@ def update_settings(self, key: str, val: Any): print("[Voice Changer] Voice Changer is not selected.") return self.get_info() + if key == "serverAudioStated" and val == 0: + self.settings.inputSampleRate = 48000 + if key in self.settings.intData: setattr(self.settings, key, int(val)) if key == "crossFadeOffsetRate" or key == "crossFadeEndRate":