deepgeek/gradio-webrtc
2
0
Fork 0
mirror of https://github.com/HumanAIGC-Engineering/gradio-webrtc.git synced 2026-02-04 17:39: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() {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
analyser = audioContext.createAnalyser();
console.log("audio_source", audio_source.srcObject);
const source = audioContext.createMediaStreamSource(audio_source.srcObject);
// Only connect to analyser, not to destination
source.connect(analyser);
analyser.connect(audioContext.destination);
// Configure analyser
analyser.fftSize = 64;
analyser.smoothingTimeConstant = 0.8; // Add smoothing to make visualization less jittery
dataArray = new Uint8Array(analyser.frequencyBinCount);
updateBars();
@@ -49,39 +51,37 @@
animationId = requestAnimationFrame(updateBars);
}
</script>
<div class="waveContainer">
<div class="boxContainer" style:width={containerWidth}>
{#each Array(numBars) as _}
<div class="box"></div>
{/each}
<div class="waveContainer">
<div class="boxContainer" style:width={containerWidth}>
{#each Array(numBars) as _}
<div class="box"></div>
{/each}
</div>
</div>
<style>
.waveContainer {
position: relative;
display: flex;
min-height: 100px;
max-height: 128px;
}
.boxContainer {
display: flex;
justify-content: space-between;
height: 64px;
--boxSize: 8px;
--gutter: 4px;
}
.box {
height: 100%;
width: var(--boxSize);
background: var(--color-accent);
border-radius: 8px;
transition: transform 0.05s ease;
}
<style>
.waveContainer {
position: relative;
display: flex;
min-height: 100px;
max-height: 128px;
}
.boxContainer {
display: flex;
justify-content: space-between;
height: 64px;
--boxSize: 8px;
--gutter: 4px;
}
.box {
height: 100%;
width: var(--boxSize);
background: var(--color-accent);
border-radius: 8px;
transition: transform 0.05s ease;
}
</style>

2
pyproject.toml
View File

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