diff --git a/.vscode/settings.json b/.vscode/settings.json index e603f77..c458adf 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,13 +3,13 @@ "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { - "editor.defaultFormatter": "vscode.typescript-language-features" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[svelte]": { - "editor.defaultFormatter": "svelte.svelte-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "svelte.enable-ts-plugin": true, "eslint.validate": [ diff --git a/README.md b/README.md index edc5309..fcbf6d4 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,15 @@ A soundboard with direct access to [myinstants](https://www.myinstants.com)' library. -## Recommended IDE Setup +## Installation -- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) +To use throughmic, you need to install [vbcable](https://vb-audio.com/Cable/), then download the latest version of throughmic in the releases tabs. +Once done you need to select in the app the vbcable device. You should pick `CABLE Input (VB-Audio Virtual Cable)` with audiooutput selected. If you can't find it, check that you installed correctly VBCable. +Then you need to go to the app you want to use this with, for example discord, and you need to change the micro to `CABLE Output (VB-Audio Virtual Cable)`. +Finally to be able to speak and use the soundboard you need to go to windows sound settings and enable "listen to this device" to send your mic's output to `CABLE Input (VB-Audio Virtual Cable)`. +You should now be able to play sounds. + +You don't need to use the myinstants windows, it's for developpement purposes and will probably be removed later. ## Project Setup diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte index 422691b..e322fb1 100644 --- a/src/renderer/src/App.svelte +++ b/src/renderer/src/App.svelte @@ -1,186 +1,11 @@ -
- -
+
-
- - - - {#each sounds as sound (sound)} - - - - - - - - - - {/each} - - -
+ - + diff --git a/src/renderer/src/lib/audio.ts b/src/renderer/src/lib/audio.ts index da82302..67b4094 100644 --- a/src/renderer/src/lib/audio.ts +++ b/src/renderer/src/lib/audio.ts @@ -1,21 +1,29 @@ export class _Audio { src: string audio: HTMLAudioElement + secondaryAudio: HTMLAudioElement constructor(src: string) { this.src = src this.audio = new Audio(src) + this.secondaryAudio = new Audio(src) } play() { this.audio.play() + this.secondaryAudio.play() } stop() { this.audio.pause() + this.secondaryAudio.pause() this.audio.remove() + this.secondaryAudio.remove() } - setOuputDevice(id: string) { + setMainOuputDevice(id: string) { this.audio.setSinkId(id) } + setSecondaryOuputDevice(id: string) { + this.secondaryAudio.setSinkId(id) + } } diff --git a/src/renderer/src/lib/components/DevicesSelector.svelte b/src/renderer/src/lib/components/DevicesSelector.svelte new file mode 100644 index 0000000..238dd97 --- /dev/null +++ b/src/renderer/src/lib/components/DevicesSelector.svelte @@ -0,0 +1,130 @@ + + + + + + + Select main audio device + Usually you should select "CABLE Input" + + + {#each kinds as kind (kind)} +
+ + +
+ {/each} + + + + {mainTriggerContent} + + + + Devices + {#each devices as device (`${device.deviceId}`)} + + {device.label} + + {/each} + + + +
+ + Select secondary audio device + Usually you should your headset + + + {#each kinds as secondaryKind (secondaryKind)} +
+ + +
+ {/each} + + + + {secondaryTriggerContent} + + + + Devices + {#each devices as device (`${device.deviceId}`)} + + {device.label} + + {/each} + + + + + + + + diff --git a/src/renderer/src/lib/components/Footer.svelte b/src/renderer/src/lib/components/Footer.svelte new file mode 100644 index 0000000..0b81305 --- /dev/null +++ b/src/renderer/src/lib/components/Footer.svelte @@ -0,0 +1,7 @@ + + + diff --git a/src/renderer/src/lib/components/Header.svelte b/src/renderer/src/lib/components/Header.svelte new file mode 100644 index 0000000..794285b --- /dev/null +++ b/src/renderer/src/lib/components/Header.svelte @@ -0,0 +1,30 @@ + + +
+ +
diff --git a/src/renderer/src/lib/components/Results.svelte b/src/renderer/src/lib/components/Results.svelte new file mode 100644 index 0000000..4dcf106 --- /dev/null +++ b/src/renderer/src/lib/components/Results.svelte @@ -0,0 +1,63 @@ + + +
+ + + + {#each states.sounds as sound (sound)} + + + + + + + + + + {/each} + + +
diff --git a/src/renderer/src/lib/states.svelte.ts b/src/renderer/src/lib/states.svelte.ts new file mode 100644 index 0000000..cb3cc07 --- /dev/null +++ b/src/renderer/src/lib/states.svelte.ts @@ -0,0 +1,14 @@ +type Sound = { + name: string + // author: string + // favorited: number + // viewed: number + link: string + src: string +} + +type States = { sounds: Sound[] } + +export const states: States = $state({ + sounds: [] +})