add trancate buffer function

This commit is contained in:
wataru 2023-02-28 11:54:40 +09:00
parent 622fa4a64e
commit 31cd9437ef
12 changed files with 98 additions and 53 deletions

File diff suppressed because one or more lines are too long

View File

@ -9,7 +9,7 @@
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"@dannadori/voice-changer-client-js": "^1.0.82",
"@dannadori/voice-changer-client-js": "^1.0.83",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
@ -23,14 +23,14 @@
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@types/node": "^18.14.1",
"@types/node": "^18.14.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"autoprefixer": "^10.4.13",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"eslint": "^8.34.0",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
@ -3187,9 +3187,9 @@
}
},
"node_modules/@dannadori/voice-changer-client-js": {
"version": "1.0.82",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.82.tgz",
"integrity": "sha512-bLlwtTiY6wTuqGanW+2JtKypVWEPrjqYiNM/TtZbDDPYs6zirJYXhQC7X9jUt/X9RnjDHBHcSRre1pnPaqsF8Q==",
"version": "1.0.83",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.83.tgz",
"integrity": "sha512-ZSomy46d5tgtK5OYkY3cJPI3vN1tiUAq3V78toj9//lICUdQYt/BopBiuhURb9Ygp9EJMa+/pQddF+c1aopL/g==",
"dependencies": {
"@types/readable-stream": "^2.3.15",
"amazon-chime-sdk-js": "^3.11.0",
@ -3209,9 +3209,9 @@
}
},
"node_modules/@eslint/eslintrc": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
"integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz",
"integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==",
"dev": true,
"dependencies": {
"ajv": "^6.12.4",
@ -3246,6 +3246,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@eslint/js": {
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz",
"integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==",
"dev": true,
"engines": {
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
@ -3769,9 +3778,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "18.14.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
"integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
"version": "18.14.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.2.tgz",
"integrity": "sha512-1uEQxww3DaghA0RxqHx0O0ppVlo43pJhepY51OxuQIKHpjbnYLA7vcdwioNPzIqmC2u3I/dmylcqjlh0e7AyUA=="
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
@ -5509,12 +5518,13 @@
}
},
"node_modules/eslint": {
"version": "8.34.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
"integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz",
"integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==",
"dev": true,
"dependencies": {
"@eslint/eslintrc": "^1.4.1",
"@eslint/eslintrc": "^2.0.0",
"@eslint/js": "8.35.0",
"@humanwhocodes/config-array": "^0.11.8",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@ -5528,7 +5538,7 @@
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"esquery": "^1.4.0",
"esquery": "^1.4.2",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",
@ -13473,9 +13483,9 @@
}
},
"@dannadori/voice-changer-client-js": {
"version": "1.0.82",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.82.tgz",
"integrity": "sha512-bLlwtTiY6wTuqGanW+2JtKypVWEPrjqYiNM/TtZbDDPYs6zirJYXhQC7X9jUt/X9RnjDHBHcSRre1pnPaqsF8Q==",
"version": "1.0.83",
"resolved": "https://registry.npmjs.org/@dannadori/voice-changer-client-js/-/voice-changer-client-js-1.0.83.tgz",
"integrity": "sha512-ZSomy46d5tgtK5OYkY3cJPI3vN1tiUAq3V78toj9//lICUdQYt/BopBiuhURb9Ygp9EJMa+/pQddF+c1aopL/g==",
"requires": {
"@types/readable-stream": "^2.3.15",
"amazon-chime-sdk-js": "^3.11.0",
@ -13492,9 +13502,9 @@
"dev": true
},
"@eslint/eslintrc": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
"integrity": "sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.0.tgz",
"integrity": "sha512-fluIaaV+GyV24CCu/ggiHdV+j4RNh85yQnAYS/G2mZODZgGmmlrgCydjUcV3YvxCm9x8nMAfThsqTni4KiXT4A==",
"dev": true,
"requires": {
"ajv": "^6.12.4",
@ -13519,6 +13529,12 @@
}
}
},
"@eslint/js": {
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.35.0.tgz",
"integrity": "sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw==",
"dev": true
},
"@fortawesome/fontawesome-common-types": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz",
@ -13964,9 +13980,9 @@
"dev": true
},
"@types/node": {
"version": "18.14.1",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz",
"integrity": "sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ=="
"version": "18.14.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.2.tgz",
"integrity": "sha512-1uEQxww3DaghA0RxqHx0O0ppVlo43pJhepY51OxuQIKHpjbnYLA7vcdwioNPzIqmC2u3I/dmylcqjlh0e7AyUA=="
},
"@types/parse-json": {
"version": "4.0.0",
@ -15325,12 +15341,13 @@
"dev": true
},
"eslint": {
"version": "8.34.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.34.0.tgz",
"integrity": "sha512-1Z8iFsucw+7kSqXNZVslXS8Ioa4u2KM7GPwuKtkTFAqZ/cHMcEaR+1+Br0wLlot49cNxIiZk5wp8EAbPcYZxTg==",
"version": "8.35.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.35.0.tgz",
"integrity": "sha512-BxAf1fVL7w+JLRQhWl2pzGeSiGqbWumV4WNvc9Rhp6tiCtm4oHnyPBSEtMGZwrQgudFQ+otqzWoPB7x+hxoWsw==",
"dev": true,
"requires": {
"@eslint/eslintrc": "^1.4.1",
"@eslint/eslintrc": "^2.0.0",
"@eslint/js": "8.35.0",
"@humanwhocodes/config-array": "^0.11.8",
"@humanwhocodes/module-importer": "^1.0.1",
"@nodelib/fs.walk": "^1.2.8",
@ -15344,7 +15361,7 @@
"eslint-utils": "^3.0.0",
"eslint-visitor-keys": "^3.3.0",
"espree": "^9.4.0",
"esquery": "^1.4.0",
"esquery": "^1.4.2",
"esutils": "^2.0.2",
"fast-deep-equal": "^3.1.3",
"file-entry-cache": "^6.0.1",

View File

@ -23,14 +23,14 @@
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.0",
"@types/node": "^18.14.1",
"@types/node": "^18.14.2",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"autoprefixer": "^10.4.13",
"babel-loader": "^9.1.2",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"eslint": "^8.34.0",
"eslint": "^8.35.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
@ -51,7 +51,7 @@
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@dannadori/voice-changer-client-js": "^1.0.82",
"@dannadori/voice-changer-client-js": "^1.0.83",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",

View File

@ -93,7 +93,7 @@ const App = () => {
const AppStateWrapper = () => {
// エラーバウンダリー設定
const [error, setError] = useState<{ error: Error, errorInfo: ErrorInfo }>()
const { removeItem } = useIndexedDB()
// localForage.config({
// driver: localForage.INDEXEDDB,
// name: INDEXEDDB_DB_APP_NAME,
@ -107,7 +107,7 @@ const AppStateWrapper = () => {
const errorMessage = error?.error.message || "no error message"
const errorInfos = (error?.errorInfo.componentStack || "no error stack").split("\n")
const onClearCacheClicked = () => {
const onClearCacheClicked = async () => {
[
INDEXEDDB_KEY_CLIENT,
INDEXEDDB_KEY_SERVER,
@ -117,6 +117,7 @@ const AppStateWrapper = () => {
].forEach((x) => {
localForage.removeItem(x)
})
await removeItem(INDEXEDDB_KEY_AUDIO_OUTPUT)
location.reload();
}
return (

View File

@ -27,6 +27,7 @@ export const useConvertSetting = (): ConvertSettingState => {
<div className="body-input-container">
<input type="number" min={1} max={256} step={1} value={appState.workletNodeSetting.workletNodeSetting.inputChunkNum} onChange={(e) => {
appState.workletNodeSetting.updateWorkletNodeSetting({ ...appState.workletNodeSetting.workletNodeSetting, inputChunkNum: Number(e.target.value) })
appState.workletNodeSetting.trancateBuffer()
}} />
</div>
<div className="body-item-text">

View File

@ -1,12 +1,12 @@
{
"name": "@dannadori/voice-changer-client-js",
"version": "1.0.82",
"version": "1.0.83",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@dannadori/voice-changer-client-js",
"version": "1.0.82",
"version": "1.0.83",
"license": "ISC",
"dependencies": {
"@types/readable-stream": "^2.3.15",

View File

@ -1,6 +1,6 @@
{
"name": "@dannadori/voice-changer-client-js",
"version": "1.0.82",
"version": "1.0.83",
"description": "",
"main": "dist/index.js",
"directories": {

View File

@ -3,6 +3,7 @@ export declare const RequestType: {
readonly config: "config";
readonly start: "start";
readonly stop: "stop";
readonly trancateBuffer: "trancateBuffer";
};
export type RequestType = typeof RequestType[keyof typeof RequestType];
export declare const ResponseType: {
@ -12,7 +13,7 @@ export declare const ResponseType: {
export type ResponseType = typeof ResponseType[keyof typeof ResponseType];
export type VoiceChangerWorkletProcessorRequest = {
requestType: RequestType;
voice: ArrayBuffer;
voice: Float32Array;
numTrancateTreshold: number;
volTrancateThreshold: number;
volTrancateLength: number;

View File

@ -257,8 +257,9 @@ export class VoiceChangerClient {
stopOutputRecording = () => {
return this.vcNode.stopOutputRecording()
}
trancateBuffer = () => {
this.vcNode.trancateBuffer()
}
//## Worklet Node ##//
updateWorkletNodeSetting = (setting: WorkletNodeSetting) => {
this.vcNode.updateSetting(setting)

View File

@ -248,7 +248,7 @@ export class VoiceChangerWorkletNode extends AudioWorkletNode {
configure = (setting: WorkletSetting) => {
const req: VoiceChangerWorkletProcessorRequest = {
requestType: "config",
voice: new ArrayBuffer(1),
voice: new Float32Array(1),
numTrancateTreshold: setting.numTrancateTreshold,
volTrancateThreshold: setting.volTrancateThreshold,
volTrancateLength: setting.volTrancateLength
@ -259,7 +259,7 @@ export class VoiceChangerWorkletNode extends AudioWorkletNode {
start = () => {
const req: VoiceChangerWorkletProcessorRequest = {
requestType: "start",
voice: new ArrayBuffer(1),
voice: new Float32Array(1),
numTrancateTreshold: 0,
volTrancateThreshold: 0,
volTrancateLength: 0
@ -270,7 +270,17 @@ export class VoiceChangerWorkletNode extends AudioWorkletNode {
stop = () => {
const req: VoiceChangerWorkletProcessorRequest = {
requestType: "stop",
voice: new ArrayBuffer(1),
voice: new Float32Array(1),
numTrancateTreshold: 0,
volTrancateThreshold: 0,
volTrancateLength: 0
}
this.port.postMessage(req)
}
trancateBuffer = () => {
const req: VoiceChangerWorkletProcessorRequest = {
requestType: "trancateBuffer",
voice: new Float32Array(1),
numTrancateTreshold: 0,
volTrancateThreshold: 0,
volTrancateLength: 0

View File

@ -14,7 +14,7 @@ export type WorkletNodeSettingState = {
updateWorkletNodeSetting: (setting: WorkletNodeSetting) => void
startOutputRecording: () => void
stopOutputRecording: () => Promise<Float32Array>
trancateBuffer: () => Promise<void>
}
export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): WorkletNodeSettingState => {
@ -79,12 +79,19 @@ export const useWorkletNodeSetting = (props: UseWorkletNodeSettingProps): Workle
}
}, [props.voiceChangerClient])
const trancateBuffer = useMemo(() => {
return async () => {
if (!props.voiceChangerClient) return
props.voiceChangerClient.trancateBuffer()
}
}, [props.voiceChangerClient])
return {
workletNodeSetting,
clearSetting,
updateWorkletNodeSetting,
startOutputRecording,
stopOutputRecording
stopOutputRecording,
trancateBuffer
}
}

View File

@ -2,7 +2,8 @@ export const RequestType = {
"voice": "voice",
"config": "config",
"start": "start",
"stop": "stop"
"stop": "stop",
"trancateBuffer": "trancateBuffer",
} as const
export type RequestType = typeof RequestType[keyof typeof RequestType]
@ -59,6 +60,12 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
return Math.max(rms, prevVol * 0.95)
}
trancateBuffer = () => {
console.log("[worklet] Buffer truncated")
while (this.playBuffer.length > 2) {
this.playBuffer.shift()
}
}
handleMessage(event: any) {
const request = event.data as VoiceChangerWorkletProcessorRequest
if (request.requestType === "config") {
@ -81,13 +88,13 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
}
this.isRecording = false
return
} else if (request.requestType === "trancateBuffer") {
this.trancateBuffer()
return
}
if (this.playBuffer.length > this.numTrancateTreshold) {
console.log("[worklet] Buffer truncated")
while (this.playBuffer.length > 2) {
this.playBuffer.shift()
}
this.trancateBuffer()
}
const f32Data = request.voice