mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-17 11:29:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix audio streaming output issues in 4.0 (#6343)

Browse Source 
* changes

* Update processing_utils.py

* add changeset

* changes

* changes

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
aliabid94 2023-11-08 14:57:25 -08:00 committed by GitHub
parent d64787b885
commit 37dd335e5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/red-ties-turn.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/audio": minor
"gradio": minor
---
feat:Fix audio streaming output issues in 4.0

26
js/audio/player/AudioPlayer.svelte
View File

@ -10,6 +10,7 @@
import type { FileData } from "@gradio/client";
export let value: null | FileData = null;
$: url = value?.url;
export let label: string;
export let i18n: I18nFormatter;
export let dispatch: (event: any, detail?: any) => void;
@ -18,12 +19,12 @@
event: "stream" | "change" | "stop_recording"
) => Promise<void> = () => Promise.resolve();
export let interactive = false;
export let waveform_settings = {};
export let waveform_settings: Record<string, any> = {};
export let mode = "";
export let handle_reset_value: () => void = () => {};
let container: HTMLDivElement;
let waveform: WaveSurfer;
let waveform: WaveSurfer | undefined;
let playing = false;
let timeRef: HTMLTimeElement;
@ -84,12 +85,12 @@
end: number
): Promise<void> => {
mode = "";
const decodedData = waveform.getDecodedData();
const decodedData = waveform?.getDecodedData();
if (decodedData)
await process_audio(decodedData, start, end).then(
async (trimmedBlob: Uint8Array) => {
await dispatch_blob([trimmedBlob], "change");
waveform.destroy();
waveform?.destroy();
create_waveform();
}
);
@ -98,15 +99,16 @@
async function load_audio(data: string): Promise<void> {
await resolve_wasm_src(data).then((resolved_src) => {
if (!resolved_src) return;
if (!resolved_src || value?.is_stream) return;
return waveform?.load(resolved_src);
});
}
$: value?.url && load_audio(value.url);
$: url && load_audio(url);
onMount(() => {
window.addEventListener("keydown", (e) => {
if (!waveform) return;
if (e.key === "ArrowRight" && mode !== "edit") {
skipAudio(waveform, 0.1);
} else if (e.key === "ArrowLeft" && mode !== "edit") {
@ -120,6 +122,13 @@
<Empty size="small">
<Music />
</Empty>
{:else if value.is_stream}
<audio
class="standard-player"
src={value.url}
controls
autoplay={waveform_settings.autoplay}
/>
{:else}
<div
class="component-wrapper"
@ -195,4 +204,9 @@
height: 100%;
position: relative;
}
.standard-player {
width: 100%;
padding: var(--size-2);
}
</style>