PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-02 16:23:58 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

skip pass through confirmation

Browse Source
This commit is contained in:
w-okada 2023-08-26 12:32:12 +09:00
parent e8e339bd7e
commit 8974bf78d2
7 changed files with 1415 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
client/demo/dist/index.html vendored
View File

@ -1 +1,10 @@
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html> <!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8" />
<title>Voice Changer Client Demo</title>
<script defer src="index.js"></script></head>
<body style="width: 100%; height: 100%; margin: 0px">
<div id="app" style="width: 100%; height: 100%"></div>
</body>
</html>

1255
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

31
client/demo/dist/index.js.LICENSE.txt vendored
View File

@ -1,31 +0,0 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

206
client/demo/src/components/demo/906_AdvancedSettingDialog.tsx
View File

@ -3,159 +3,215 @@ import { useGuiState } from "./001_GuiStateProvider";
import { useAppState } from "../../001_provider/001_AppStateProvider"; import { useAppState } from "../../001_provider/001_AppStateProvider";
import { CrossFadeOverlapSize, Protocol } from "@dannadori/voice-changer-client-js"; import { CrossFadeOverlapSize, Protocol } from "@dannadori/voice-changer-client-js";
export const AdvancedSettingDialog = () => { export const AdvancedSettingDialog = () => {
const guiState = useGuiState() const guiState = useGuiState();
const { setting, serverSetting, setWorkletNodeSetting, setWorkletSetting } = useAppState() const { setting, serverSetting, setWorkletNodeSetting, setWorkletSetting, setVoiceChangerClientSetting } = useAppState();
const dialog = useMemo(() => { const dialog = useMemo(() => {
const closeButtonRow = ( const closeButtonRow = (
<div className="body-row split-3-4-3 left-padding-1"> <div className="body-row split-3-4-3 left-padding-1">
<div className="body-item-text"> <div className="body-item-text"></div>
</div>
<div className="body-button-container body-button-container-space-around"> <div className="body-button-container body-button-container-space-around">
<div className="body-button" onClick={() => { guiState.stateControls.showAdvancedSettingCheckbox.updateState(false) }} >close</div> <div
className="body-button"
onClick={() => {
guiState.stateControls.showAdvancedSettingCheckbox.updateState(false);
}}
>
close
</div>
</div> </div>
<div className="body-item-text"></div> <div className="body-item-text"></div>
</div> </div>
);
)
const onProtocolChanged = async (val: Protocol) => { const onProtocolChanged = async (val: Protocol) => {
setWorkletNodeSetting({ ...setting.workletNodeSetting, protocol: val }) setWorkletNodeSetting({ ...setting.workletNodeSetting, protocol: val });
} };
const protocolRow = ( const protocolRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">protocol</div>
protocol
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<select value={setting.workletNodeSetting.protocol} onChange={(e) => { <select
onProtocolChanged(e.target.value as value={setting.workletNodeSetting.protocol}
Protocol) onChange={(e) => {
}}> onProtocolChanged(e.target.value as Protocol);
{ }}
Object.values(Protocol).map(x => { >
return <option key={x} value={x}>{x}</option> {Object.values(Protocol).map((x) => {
}) return (
} <option key={x} value={x}>
{x}
</option>
);
})}
</select> </select>
</div> </div>
</div> </div>
) );
const crossfaceRow = ( const crossfaceRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">Crossfade</div>
Crossfade
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<div className="advanced-setting-container-row-field-crossfade-container"> <div className="advanced-setting-container-row-field-crossfade-container">
<div> <div>
<div>overlap:</div> <div>overlap:</div>
<div> <div>
<select className="body-select" value={serverSetting.serverSetting.crossFadeOverlapSize} onChange={(e) => { <select
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOverlapSize: Number(e.target.value) as CrossFadeOverlapSize }) className="body-select"
}}> value={serverSetting.serverSetting.crossFadeOverlapSize}
{ onChange={(e) => {
Object.values(CrossFadeOverlapSize).map(x => { serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOverlapSize: Number(e.target.value) as CrossFadeOverlapSize });
return <option key={x} value={x}>{x}</option> }}
}) >
} {Object.values(CrossFadeOverlapSize).map((x) => {
return (
<option key={x} value={x}>
{x}
</option>
);
})}
</select> </select>
</div> </div>
</div> </div>
<div> <div>
<div>start:</div> <div>start:</div>
<div> <div>
<input type="number" min={0} max={1} step={0.1} value={serverSetting.serverSetting.crossFadeOffsetRate} onChange={(e) => { <input
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOffsetRate: Number(e.target.value) }) type="number"
}} /> min={0}
max={1}
step={0.1}
value={serverSetting.serverSetting.crossFadeOffsetRate}
onChange={(e) => {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeOffsetRate: Number(e.target.value) });
}}
/>
</div> </div>
</div> </div>
<div> <div>
<div>end:</div> <div>end:</div>
<div> <div>
<input type="number" min={0} max={1} step={0.1} value={serverSetting.serverSetting.crossFadeEndRate} onChange={(e) => { <input
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeEndRate: Number(e.target.value) }) type="number"
}} /> min={0}
max={1}
step={0.1}
value={serverSetting.serverSetting.crossFadeEndRate}
onChange={(e) => {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, crossFadeEndRate: Number(e.target.value) });
}}
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) );
const trancateRow = ( const trancateRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">Trancate</div>
Trancate
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<input type="number" min={5} max={300} step={1} value={setting.workletSetting.numTrancateTreshold} onChange={(e) => { <input
type="number"
min={5}
max={300}
step={1}
value={setting.workletSetting.numTrancateTreshold}
onChange={(e) => {
setWorkletSetting({ setWorkletSetting({
...setting.workletSetting, ...setting.workletSetting,
numTrancateTreshold: Number(e.target.value) numTrancateTreshold: Number(e.target.value),
}) });
}} /> }}
/>
</div> </div>
</div> </div>
) );
const onSilenceFrontChanged = (val: number) => { const onSilenceFrontChanged = (val: number) => {
serverSetting.updateServerSettings({ serverSetting.updateServerSettings({
...serverSetting.serverSetting, ...serverSetting.serverSetting,
silenceFront: val silenceFront: val,
}) });
} };
const silenceFrontRow = ( const silenceFrontRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">SilenceFront</div>
SilenceFront
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<select value={serverSetting.serverSetting.silenceFront} onChange={(e) => { onSilenceFrontChanged(Number(e.target.value)) }}> <select
value={serverSetting.serverSetting.silenceFront}
onChange={(e) => {
onSilenceFrontChanged(Number(e.target.value));
}}
>
<option value="0">off</option> <option value="0">off</option>
<option value="1">on</option> <option value="1">on</option>
</select> </select>
</div> </div>
</div> </div>
) );
const protectRow = ( const protectRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">Protect</div>
Protect
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<div> <div>
<input type="range" className="body-item-input-slider" min="0" max="0.5" step="0.1" value={serverSetting.serverSetting.protect || 0} onChange={(e) => { <input
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, protect: Number(e.target.value) }) type="range"
}}></input> className="body-item-input-slider"
min="0"
max="0.5"
step="0.1"
value={serverSetting.serverSetting.protect || 0}
onChange={(e) => {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, protect: Number(e.target.value) });
}}
></input>
<span className="body-item-input-slider-val">{serverSetting.serverSetting.protect}</span> <span className="body-item-input-slider-val">{serverSetting.serverSetting.protect}</span>
</div> </div>
</div> </div>
</div> </div>
) );
const onRVCQualityChanged = (val: number) => { const onRVCQualityChanged = (val: number) => {
serverSetting.updateServerSettings({ serverSetting.updateServerSettings({
...serverSetting.serverSetting, ...serverSetting.serverSetting,
rvcQuality: val rvcQuality: val,
}) });
} };
const rvcQualityRow = ( const rvcQualityRow = (
<div className="advanced-setting-container-row"> <div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title"> <div className="advanced-setting-container-row-title">RVC Quality</div>
RVC Quality
</div>
<div className="advanced-setting-container-row-field"> <div className="advanced-setting-container-row-field">
<select value={serverSetting.serverSetting.rvcQuality} onChange={(e) => { onRVCQualityChanged(Number(e.target.value)) }}> <select
value={serverSetting.serverSetting.rvcQuality}
onChange={(e) => {
onRVCQualityChanged(Number(e.target.value));
}}
>
<option value="0">low</option> <option value="0">low</option>
<option value="1">high</option> <option value="1">high</option>
</select> </select>
</div> </div>
</div> </div>
) );
const skipPassThroughConfirmationRow = (
<div className="advanced-setting-container-row">
<div className="advanced-setting-container-row-title-long">Skip Pass through confirmation</div>
<div className="advanced-setting-container-row-field">
<select
value={setting.voiceChangerClientSetting.passThroughConfirmationSkip ? "1" : "0"}
onChange={(e) => {
setVoiceChangerClientSetting({ ...setting.voiceChangerClientSetting, passThroughConfirmationSkip: e.target.value == "1" ? true : false });
}}
>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
</div>
);
const content = ( const content = (
<div className="advanced-setting-container"> <div className="advanced-setting-container">
{protocolRow} {protocolRow}
@ -164,8 +220,9 @@ export const AdvancedSettingDialog = () => {
{silenceFrontRow} {silenceFrontRow}
{protectRow} {protectRow}
{rvcQualityRow} {rvcQualityRow}
{skipPassThroughConfirmationRow}
</div> </div>
) );
return ( return (
<div className="dialog-frame"> <div className="dialog-frame">
@ -178,5 +235,4 @@ export const AdvancedSettingDialog = () => {
); );
}, [serverSetting.serverSetting, serverSetting.updateServerSettings, setting.workletNodeSetting, setWorkletNodeSetting, setting.workletSetting, setWorkletSetting]); }, [serverSetting.serverSetting, serverSetting.updateServerSettings, setting.workletNodeSetting, setWorkletNodeSetting, setting.workletSetting, setWorkletSetting]);
return dialog; return dialog;
}; };

5
client/demo/src/components/demo/components2/101_CharacterArea.tsx
View File

@ -124,7 +124,12 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
}; };
const onPassThroughClicked = async () => { const onPassThroughClicked = async () => {
if (serverSetting.serverSetting.passThrough == false) { if (serverSetting.serverSetting.passThrough == false) {
if (setting.voiceChangerClientSetting.passThroughConfirmationSkip) {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: true });
guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(false);
} else {
guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(true); guiState.stateControls.showEnablePassThroughDialogCheckbox.updateState(true);
}
} else { } else {
serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: false }); serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: false });
} }

5
client/demo/src/css/App.css
View File

@ -1709,6 +1709,11 @@ audio::-webkit-media-controls-overlay-enclosure{
font-weight: 700; font-weight: 700;
font-size: 0.9rem; font-size: 0.9rem;
} }
.advanced-setting-container-row-title-long {
width: 20rem;
font-weight: 700;
font-size: 0.9rem;
}
.advanced-setting-container-row-field { .advanced-setting-container-row-field {
width: 15rem; width: 15rem;
font-size: 0.9rem; font-size: 0.9rem;

5
client/lib/src/const.ts
View File

@ -490,6 +490,8 @@ export type VoiceChangerClientSetting = {
inputGain: number inputGain: number
outputGain: number outputGain: number
monitorGain: number monitorGain: number
passThroughConfirmationSkip: boolean
} }
/////////////////////// ///////////////////////
@ -521,7 +523,8 @@ export const DefaultClientSettng: ClientSetting = {
noiseSuppression2: false, noiseSuppression2: false,
inputGain: 1.0, inputGain: 1.0,
outputGain: 1.0, outputGain: 1.0,
monitorGain: 1.0 monitorGain: 1.0,
passThroughConfirmationSkip: false
} }
} }