deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-05 18:09:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix metallic sound

Browse Source
This commit is contained in:
freddyaboulton
2024-10-24 17:23:38 -07:00
parent d67275ad55
commit e27af437dc
2 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
frontend/shared/AudioWave.svelte
View File

@@ -27,12 +27,14 @@
function setupAudioContext() { function setupAudioContext() {
audioContext = new (window.AudioContext || window.webkitAudioContext)(); audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser(); analyser = audioContext.createAnalyser();
console.log("audio_source", audio_source.srcObject);
const source = audioContext.createMediaStreamSource(audio_source.srcObject); const source = audioContext.createMediaStreamSource(audio_source.srcObject);
// Only connect to analyser, not to destination
source.connect(analyser); source.connect(analyser);
analyser.connect(audioContext.destination);
// Configure analyser
analyser.fftSize = 64; analyser.fftSize = 64;
analyser.smoothingTimeConstant = 0.8; // Add smoothing to make visualization less jittery
dataArray = new Uint8Array(analyser.frequencyBinCount); dataArray = new Uint8Array(analyser.frequencyBinCount);
updateBars(); updateBars();
@@ -49,39 +51,37 @@
animationId = requestAnimationFrame(updateBars); animationId = requestAnimationFrame(updateBars);
} }
</script>
<div class="waveContainer">
<div class="waveContainer"> <div class="boxContainer" style:width={containerWidth}>
<div class="boxContainer" style:width={containerWidth}> {#each Array(numBars) as _}
{#each Array(numBars) as _} <div class="box"></div>
<div class="box"></div> {/each}
{/each}
</div> </div>
</div>
<style>
<style> .waveContainer {
.waveContainer { position: relative;
position: relative; display: flex;
display: flex; min-height: 100px;
min-height: 100px; max-height: 128px;
max-height: 128px; }
}
.boxContainer {
.boxContainer { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; height: 64px;
height: 64px; --boxSize: 8px;
--boxSize: 8px; --gutter: 4px;
--gutter: 4px; }
}
.box {
.box { height: 100%;
height: 100%; width: var(--boxSize);
width: var(--boxSize); background: var(--color-accent);
background: var(--color-accent); border-radius: 8px;
border-radius: 8px; transition: transform 0.05s ease;
transition: transform 0.05s ease; }
} </style>

2
pyproject.toml
View File

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
[project] [project]
name = "gradio_webrtc" name = "gradio_webrtc"
version = "0.0.6" version = "0.0.7"
description = "Stream images in realtime with webrtc" description = "Stream images in realtime with webrtc"
readme = "README.md" readme = "README.md"
license = "apache-2.0" license = "apache-2.0"