diff --git a/docs/advanced-configuration.md b/docs/advanced-configuration.md index 392a2d5..ac4fd53 100644 --- a/docs/advanced-configuration.md +++ b/docs/advanced-configuration.md @@ -70,6 +70,23 @@ demo.launch() 2. If the chunk has more than 0.2 seconds of speech, the user started talking. 3. If, after the user started speaking, there is a chunk with less than 0.1 seconds of speech, the user stopped speaking. + +## Stream Handler Input Audio + +You can configure the sampling rate of the audio passed to the `ReplyOnPause` or `StreamHandler` instance with the `input_sampling_rate` parameter. The current default is `48000` + +```python +from gradio_webrtc import ReplyOnPause, WebRTC + +with gr.Blocks as demo: + audio = WebRTC(...) + audio.stream(ReplyOnPause(..., input_sampling_rate=24000) + ) + +demo.launch() +``` + + ## Stream Handler Output Audio You can configure the output audio chunk size of `ReplyOnPause` (and any `StreamHandler`) @@ -86,4 +103,9 @@ with gr.Blocks as demo: ) demo.launch() -``` \ No newline at end of file +``` + +!!! tip + + In general it is best to leave these settings untouched. In some cases, + lowering the output_frame_size can yield smoother audio playback. \ No newline at end of file diff --git a/frontend/shared/AudioWave.svelte b/frontend/shared/AudioWave.svelte index cae982a..465370b 100644 --- a/frontend/shared/AudioWave.svelte +++ b/frontend/shared/AudioWave.svelte @@ -41,7 +41,7 @@ function updateBars() { analyser.getByteFrequencyData(dataArray); - const bars = document.querySelectorAll('.waveContainer .box'); + const bars = document.querySelectorAll('.gradio-webrtc-waveContainer .gradio-webrtc-box'); for (let i = 0; i < bars.length; i++) { const barHeight = (dataArray[i] / 255) * 2; // Amplify the effect bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`; @@ -51,23 +51,23 @@ } -
-
+
+
{#each Array(numBars) as _} -
+
{/each}