init gradio custom component

app.py

@@ -0,0 +1,12 @@
+import gradio as gr
+from gradio_sourceviewer import SourceViewer
+
+
+example = SourceViewer().example_value()
+
+with gr.Blocks() as demo:
+    gr.Markdown("WORK IN PROGRESS")
+    source_viewer = SourceViewer()
+
+if __name__ == "__main__":
+    demo.launch()

sourceviewer/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

sourceviewer/README.md

@@ -0,0 +1,15 @@
+---
+tags: [gradio-custom-component, Audio]
+title: gradio_sourceviewer
+short_description: A gradio custom component
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# gradio_sourceviewer
+
+You can auto-generate documentation for your custom component with the `gradio cc docs` command.
+You can also edit this file however you like.

sourceviewer/backend/gradio_sourceviewer/__init__.py

@@ -0,0 +1,4 @@
+
+from .sourceviewer import SourceViewer
+
+__all__ = ['SourceViewer']

sourceviewer/backend/gradio_sourceviewer/sourceviewer.py

@@ -0,0 +1,400 @@
+"""gr.Audio() component."""
+
+from __future__ import annotations
+
+import dataclasses
+import io
+from collections.abc import Callable, Sequence
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, Literal
+
+import anyio
+import httpx
+import numpy as np
+from gradio_client import handle_file
+from gradio_client import utils as client_utils
+from gradio_client.documentation import document
+from pydub import AudioSegment
+
+from gradio import processing_utils, utils, wasm_utils
+from gradio.components.base import Component, StreamingInput, StreamingOutput
+from gradio.data_classes import FileData, FileDataDict, MediaStreamChunk
+from gradio.events import Events
+from gradio.exceptions import Error
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+@dataclasses.dataclass
+class WaveformOptions:
+    """
+    A dataclass for specifying options for the waveform display in the SourceViewer component. An instance of this class can be passed into the `waveform_options` parameter of `gr.Audio`.
+    Parameters:
+        waveform_color: The color (as a hex string or valid CSS color) of the full waveform representing the amplitude of the audio. Defaults to a light gray color.
+        waveform_progress_color: The color (as a hex string or valid CSS color) that the waveform fills with to as the audio plays. Defaults to the accent color.
+        trim_region_color: The color (as a hex string or valid CSS color) of the trim region. Defaults to the accent color.
+        show_recording_waveform: Whether to show the waveform when recording audio. Defaults to True.
+        show_controls: Whether to show the standard HTML audio player below the waveform when recording audio or playing recorded audio. Defaults to False.
+        skip_length: The percentage (between 0 and 100) of the audio to skip when clicking on the skip forward / skip backward buttons. Defaults to 5.
+        sample_rate: The output sample rate (in Hz) of the audio after editing. Defaults to 44100.
+    """
+
+    waveform_color: str | None = None
+    waveform_progress_color: str | None = None
+    trim_region_color: str | None = None
+    show_recording_waveform: bool = True
+    show_controls: bool = False
+    skip_length: int | float = 5
+    sample_rate: int = 44100
+
+
+class SourceViewer(
+    StreamingInput,
+    StreamingOutput,
+    Component,
+):
+    """
+    Creates an audio component that can be used to upload/record audio (as an input) or display audio (as an output).
+    Demos: generate_tone, reverse_audio
+    Guides: real-time-speech-recognition
+    """
+
+    EVENTS = [
+        Events.stream,
+        Events.change,
+        Events.clear,
+        Events.play,
+        Events.pause,
+        Events.stop,
+        Events.pause,
+        Events.start_recording,
+        Events.pause_recording,
+        Events.stop_recording,
+        Events.upload,
+        Events.input,
+    ]
+
+    data_model = FileData
+
+    def __init__(
+        self,
+        value: str | Path | tuple[int, np.ndarray] | Callable | None = None,
+        *,
+        sources: list[Literal["upload", "microphone"]]
+        | Literal["upload", "microphone"]
+        | None = None,
+        type: Literal["numpy", "filepath"] = "numpy",
+        label: str | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        streaming: bool = False,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+        format: Literal["wav", "mp3"] | None = None,
+        autoplay: bool = False,
+        show_download_button: bool | None = None,
+        show_share_button: bool | None = None,
+        editable: bool = True,
+        min_length: int | None = None,
+        max_length: int | None = None,
+        waveform_options: WaveformOptions | dict | None = None,
+        loop: bool = False,
+        recording: bool = False,
+    ):
+        """
+        Parameters:
+            value: A path, URL, or [sample_rate, numpy array] tuple (sample rate in Hz, audio data as a float or int numpy array) for the default value that SourceViewer component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
+            sources: A list of sources permitted for audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. The first element in the list will be used as the default source. If None, defaults to ["upload", "microphone"], or ["microphone"] if `streaming` is True.
+            type: The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.
+            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
+            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            show_label: if True, will display label.
+            container: If True, will place the component in a container - providing some extra padding around the border.
+            scale: Relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
+            min_width: Minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+            interactive: If True, will allow users to upload and edit an audio file. If False, can only be used to play audio. If not provided, this is inferred based on whether the component is used as an input or output.
+            visible: If False, component will be hidden.
+            streaming: If set to True when used in a `live` interface as an input, will automatically stream webcam feed. When used set as an output, takes audio chunks yield from the backend and combines them into one streaming audio output.
+            elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+            render: if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            format: the file extension with which to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. This parameter applies both when this component is used as an input (and `type` is "filepath") to determine which file format to convert user-provided audio to, and when this component is used as an output to determine the format of audio returned to the user. If None, no file format conversion is done and the audio is kept as is. In the case where output audio is returned from the prediction function as numpy array and no `format` is provided, it will be returned as a "wav" file.
+            autoplay: Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet.
+            show_download_button: If True, will show a download button in the corner of the component for saving audio. If False, icon does not appear. By default, it will be True for output components and False for input components.
+            show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+            editable: If True, allows users to manipulate the audio file if the component is interactive. Defaults to True.
+            min_length: The minimum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
+            max_length: The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
+            waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options).
+            loop: If True, the audio will loop when it reaches the end and continue playing from the beginning.
+            recording: If True, the audio component will be set to record audio from the microphone if the source is set to "microphone". Defaults to False.
+        """
+        valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
+        if sources is None:
+            self.sources = ["microphone"] if streaming else valid_sources
+        elif isinstance(sources, str) and sources in valid_sources:
+            self.sources = [sources]
+        elif isinstance(sources, list):
+            self.sources = sources
+        else:
+            raise ValueError(
+                f"`sources` must be a list consisting of elements in {valid_sources}"
+            )
+        for source in self.sources:
+            if source not in valid_sources:
+                raise ValueError(
+                    f"`sources` must a list consisting of elements in {valid_sources}"
+                )
+        valid_types = ["numpy", "filepath"]
+        if type not in valid_types:
+            raise ValueError(
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {' '.join(valid_types)}"
+            )
+        self.type = type
+        self.streaming = streaming
+        if self.streaming and "microphone" not in self.sources:
+            raise ValueError(
+                "SourceViewer streaming only available if sources includes 'microphone'."
+            )
+        valid_formats = ["wav", "mp3"]
+        if format is not None and format.lower() not in valid_formats:
+            raise ValueError(
+                f"Invalid value for parameter `format`: {format}. Please choose from one of: {' '.join(valid_formats)}"
+            )
+        self.format = format and format.lower()
+        self.autoplay = autoplay
+        self.loop = loop
+        self.show_download_button = show_download_button
+        self.show_share_button = (
+            (utils.get_space() is not None)
+            if show_share_button is None
+            else show_share_button
+        )
+        self.editable = editable
+        if waveform_options is None:
+            self.waveform_options = WaveformOptions()
+        elif isinstance(waveform_options, dict):
+            self.waveform_options = WaveformOptions(**waveform_options)
+        else:
+            self.waveform_options = waveform_options
+        self.min_length = min_length
+        self.max_length = max_length
+        self.recording = recording
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+        )
+
+    def example_payload(self) -> Any:
+        return handle_file(
+            "https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"
+        )
+
+    def example_value(self) -> Any:
+        return "https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"
+
+    def preprocess(
+        self, payload: FileData | None
+    ) -> str | tuple[int, np.ndarray] | None:
+        """
+        Parameters:
+            payload: audio data as a FileData object, or None.
+        Returns:
+            passes audio as one of these formats (depending on `type`): a `str` filepath, or `tuple` of (sample rate in Hz, audio data as numpy array). If the latter, the audio data is a 16-bit `int` array whose values range from -32768 to 32767 and shape of the audio data array is (samples,) for mono audio or (samples, channels) for multi-channel audio.
+        """
+        if payload is None:
+            return payload
+
+        if not payload.path:
+            raise ValueError("payload path missing")
+
+        needs_conversion = False
+        original_suffix = Path(payload.path).suffix.lower()
+        if self.format is not None and original_suffix != f".{self.format}":
+            needs_conversion = True
+
+        if self.min_length is not None or self.max_length is not None:
+            sample_rate, data = processing_utils.audio_from_file(payload.path)
+            duration = len(data) / sample_rate
+            if self.min_length is not None and duration < self.min_length:
+                raise Error(
+                    f"SourceViewer is too short, and must be at least {self.min_length} seconds"
+                )
+            if self.max_length is not None and duration > self.max_length:
+                raise Error(
+                    f"SourceViewer is too long, and must be at most {self.max_length} seconds"
+                )
+
+        if self.type == "numpy":
+            return processing_utils.audio_from_file(payload.path)
+        elif self.type == "filepath":
+            if not needs_conversion:
+                return payload.path
+            sample_rate, data = processing_utils.audio_from_file(payload.path)
+            output_file = str(Path(payload.path).with_suffix(f".{self.format}"))
+            assert self.format is not None  # noqa: S101
+            processing_utils.audio_to_file(
+                sample_rate, data, output_file, format=self.format
+            )
+            return output_file
+        else:
+            raise ValueError(
+                "Unknown type: "
+                + str(self.type)
+                + ". Please choose from: 'numpy', 'filepath'."
+            )
+
+    def postprocess(
+        self, value: str | Path | bytes | tuple[int, np.ndarray] | None
+    ) -> FileData | bytes | None:
+        """
+        Parameters:
+            value: expects audio data in any of these formats: a `str` or `pathlib.Path` filepath or URL to an audio file, or a `bytes` object (recommended for streaming), or a `tuple` of (sample rate in Hz, audio data as numpy array). Note: if audio is supplied as a numpy array, the audio will be normalized by its peak value to avoid distortion or clipping in the resulting audio.
+        Returns:
+            FileData object, bytes, or None.
+        """
+        orig_name = None
+        if value is None:
+            return None
+
+        if isinstance(value, bytes):
+            if self.streaming:
+                return value
+            file_path = processing_utils.save_bytes_to_cache(
+                value, "audio", cache_dir=self.GRADIO_CACHE
+            )
+            orig_name = Path(file_path).name
+        elif isinstance(value, tuple):
+            sample_rate, data = value
+            file_path = processing_utils.save_audio_to_cache(
+                data,
+                sample_rate,
+                format=self.format or "wav",
+                cache_dir=self.GRADIO_CACHE,
+            )
+            orig_name = Path(file_path).name
+        elif isinstance(value, (str, Path)):
+            original_suffix = Path(value).suffix.lower()
+            if self.format is not None and original_suffix != f".{self.format}":
+                sample_rate, data = processing_utils.audio_from_file(str(value))
+                file_path = processing_utils.save_audio_to_cache(
+                    data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
+                )
+            else:
+                file_path = str(value)
+            orig_name = Path(file_path).name if Path(file_path).exists() else None
+        else:
+            raise ValueError(f"Cannot process {value} as SourceViewer")
+        return FileData(path=file_path, orig_name=orig_name)
+
+    @staticmethod
+    def _convert_to_adts(data: bytes):
+        if wasm_utils.IS_WASM:
+            raise wasm_utils.WasmUnsupportedError(
+                "SourceViewer streaming is not supported in the Wasm mode."
+            )
+        segment = AudioSegment.from_file(io.BytesIO(data))
+
+        buffer = io.BytesIO()
+        segment.export(buffer, format="adts")  # ADTS is a container format for AAC
+        aac_data = buffer.getvalue()
+        return aac_data, len(segment) / 1000.0
+
+    @staticmethod
+    async def covert_to_adts(data: bytes) -> tuple[bytes, float]:
+        return await anyio.to_thread.run_sync(SourceViewer._convert_to_adts, data)
+
+    async def stream_output(
+        self,
+        value,
+        output_id: str,
+        first_chunk: bool,  # noqa: ARG002
+    ) -> tuple[MediaStreamChunk | None, FileDataDict]:
+        output_file: FileDataDict = {
+            "path": output_id,
+            "is_stream": True,
+            "orig_name": "audio-stream.mp3",
+            "meta": {"_type": "gradio.FileData"},
+        }
+        if value is None:
+            return None, output_file
+        if isinstance(value, bytes):
+            value, duration = await self.covert_to_adts(value)
+            return {
+                "data": value,
+                "duration": duration,
+                "extension": ".aac",
+            }, output_file
+        if client_utils.is_http_url_like(value["path"]):
+            response = httpx.get(value["path"])
+            binary_data = response.content
+        else:
+            output_file["orig_name"] = value["orig_name"]
+            file_path = value["path"]
+            with open(file_path, "rb") as f:
+                binary_data = f.read()
+        value, duration = await self.covert_to_adts(binary_data)
+        return {"data": value, "duration": duration, "extension": ".aac"}, output_file
+
+    async def combine_stream(
+        self,
+        stream: list[bytes],
+        desired_output_format: str | None = None,
+        only_file=False,  # noqa: ARG002
+    ) -> FileData:
+        output_file = FileData(
+            path=processing_utils.save_bytes_to_cache(
+                b"".join(stream), "audio.mp3", cache_dir=self.GRADIO_CACHE
+            ),
+            is_stream=False,
+            orig_name="audio-stream.mp3",
+        )
+        if desired_output_format and desired_output_format != "mp3":
+            new_path = Path(output_file.path).with_suffix(f".{desired_output_format}")
+            AudioSegment.from_file(output_file.path).export(
+                new_path, format=desired_output_format
+            )
+            output_file.path = str(new_path)
+        return output_file
+
+    def process_example(
+        self, value: tuple[int, np.ndarray] | str | Path | bytes | None
+    ) -> str:
+        if value is None:
+            return ""
+        elif isinstance(value, (str, Path)):
+            return Path(value).name
+        return "(audio)"
+
+    def check_streamable(self):
+        if (
+            self.sources is not None
+            and "microphone" not in self.sources
+            and self.streaming
+        ):
+            raise ValueError(
+                "SourceViewer streaming only available if source includes 'microphone'."
+            )

sourceviewer/demo/app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_sourceviewer import SourceViewer
+
+
+example = SourceViewer().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    SourceViewer(),  # interactive version of your component
+    SourceViewer(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

sourceviewer/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_sourceviewer

sourceviewer/frontend/Example.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? value : ""}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>

sourceviewer/frontend/Index.svelte

@@ -0,0 +1,275 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio, ShareData } from "@gradio/utils";
+
+	import type { FileData } from "@gradio/client";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { afterUpdate, onMount } from "svelte";
+
+	import StaticAudio from "./static/StaticAudio.svelte";
+	import InteractiveAudio from "./interactive/InteractiveAudio.svelte";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { Block, UploadText } from "@gradio/atoms";
+	import type { WaveformOptions } from "./shared/types";
+
+	export let value_is_output = false;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let interactive: boolean;
+	export let value: null | FileData = null;
+	export let sources:
+		| ["microphone"]
+		| ["upload"]
+		| ["microphone", "upload"]
+		| ["upload", "microphone"];
+	export let label: string;
+	export let root: string;
+	export let show_label: boolean;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let autoplay = false;
+	export let loop = false;
+	export let show_download_button: boolean;
+	export let show_share_button = false;
+	export let editable = true;
+	export let waveform_options: WaveformOptions = {};
+	export let pending: boolean;
+	export let streaming: boolean;
+	export let stream_every: number;
+	export let input_ready: boolean;
+	export let recording = false;
+	let uploading = false;
+	$: input_ready = !uploading;
+
+	let stream_state = "closed";
+	let _modify_stream: (state: "open" | "closed" | "waiting") => void;
+	export function modify_stream_state(
+		state: "open" | "closed" | "waiting"
+	): void {
+		stream_state = state;
+		_modify_stream(state);
+	}
+	export const get_stream_state: () => void = () => stream_state;
+	export let set_time_limit: (time: number) => void;
+	export let gradio: Gradio<{
+		input: never;
+		change: typeof value;
+		stream: typeof value;
+		error: string;
+		warning: string;
+		edit: never;
+		play: never;
+		pause: never;
+		stop: never;
+		end: never;
+		start_recording: never;
+		pause_recording: never;
+		stop_recording: never;
+		upload: never;
+		clear: never;
+		share: ShareData;
+		clear_status: LoadingStatus;
+		close_stream: string;
+	}>;
+
+	let old_value: null | FileData = null;
+
+	let active_source: "microphone" | "upload";
+
+	let initial_value: null | FileData = value;
+
+	$: if (value && initial_value === null) {
+		initial_value = value;
+	}
+
+	const handle_reset_value = (): void => {
+		if (initial_value === null || value === initial_value) {
+			return;
+		}
+
+		value = initial_value;
+	};
+
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			gradio.dispatch("change");
+			if (!value_is_output) {
+				gradio.dispatch("input");
+			}
+		}
+	}
+
+	let dragging: boolean;
+
+	$: if (!active_source && sources) {
+		active_source = sources[0];
+	}
+
+	let waveform_settings: Record<string, any>;
+
+	let color_accent = "darkorange";
+
+	onMount(() => {
+		color_accent = getComputedStyle(document?.documentElement).getPropertyValue(
+			"--color-accent"
+		);
+		set_trim_region_colour();
+		waveform_settings.waveColor = waveform_options.waveform_color || "#9ca3af";
+		waveform_settings.progressColor =
+			waveform_options.waveform_progress_color || color_accent;
+		waveform_settings.mediaControls = waveform_options.show_controls;
+		waveform_settings.sampleRate = waveform_options.sample_rate || 44100;
+	});
+
+	$: waveform_settings = {
+		height: 50,
+
+		barWidth: 2,
+		barGap: 3,
+		cursorWidth: 2,
+		cursorColor: "#ddd5e9",
+		autoplay: autoplay,
+		barRadius: 10,
+		dragToSeek: true,
+		normalize: true,
+		minPxPerSec: 20
+	};
+
+	const trim_region_settings = {
+		color: waveform_options.trim_region_color,
+		drag: true,
+		resize: true
+	};
+
+	function set_trim_region_colour(): void {
+		document.documentElement.style.setProperty(
+			"--trim-region-color",
+			trim_region_settings.color || color_accent
+		);
+	}
+
+	function handle_error({ detail }: CustomEvent<string>): void {
+		const [level, status] = detail.includes("Invalid file type")
+			? ["warning", "complete"]
+			: ["error", "error"];
+		loading_status = loading_status || {};
+		loading_status.status = status as LoadingStatus["status"];
+		loading_status.message = detail;
+		gradio.dispatch(level as "error" | "warning", detail);
+	}
+
+	afterUpdate(() => {
+		value_is_output = false;
+	});
+</script>
+
+{#if !interactive}
+	<Block
+		variant={"solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		allow_overflow={false}
+		{elem_id}
+		{elem_classes}
+		{visible}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<StaticAudio
+			i18n={gradio.i18n}
+			{show_label}
+			{show_download_button}
+			{show_share_button}
+			{value}
+			{label}
+			{loop}
+			{waveform_settings}
+			{waveform_options}
+			{editable}
+			on:share={(e) => gradio.dispatch("share", e.detail)}
+			on:error={(e) => gradio.dispatch("error", e.detail)}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:stop={() => gradio.dispatch("stop")}
+		/>
+	</Block>
+{:else}
+	<Block
+		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		allow_overflow={false}
+		{elem_id}
+		{elem_classes}
+		{visible}
+		{container}
+		{scale}
+		{min_width}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+		<InteractiveAudio
+			{label}
+			{show_label}
+			{show_download_button}
+			{value}
+			on:change={({ detail }) => (value = detail)}
+			on:stream={({ detail }) => {
+				value = detail;
+				gradio.dispatch("stream", value);
+			}}
+			on:drag={({ detail }) => (dragging = detail)}
+			{root}
+			{sources}
+			{active_source}
+			{pending}
+			{streaming}
+			bind:recording
+			{loop}
+			max_file_size={gradio.max_file_size}
+			{handle_reset_value}
+			{editable}
+			bind:dragging
+			bind:uploading
+			on:edit={() => gradio.dispatch("edit")}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:start_recording={() => gradio.dispatch("start_recording")}
+			on:pause_recording={() => gradio.dispatch("pause_recording")}
+			on:stop_recording={(e) => gradio.dispatch("stop_recording")}
+			on:upload={() => gradio.dispatch("upload")}
+			on:clear={() => gradio.dispatch("clear")}
+			on:error={handle_error}
+			on:close_stream={() => gradio.dispatch("close_stream", "stream")}
+			i18n={gradio.i18n}
+			{waveform_settings}
+			{waveform_options}
+			{trim_region_settings}
+			{stream_every}
+			bind:modify_stream={_modify_stream}
+			bind:set_time_limit
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
+		>
+			<UploadText i18n={gradio.i18n} type="audio" />
+		</InteractiveAudio>
+	</Block>
+{/if}

sourceviewer/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

sourceviewer/frontend/index.ts

@@ -0,0 +1,7 @@
+import { default as Index } from "./Index.svelte";
+export default Index;
+export { default as BaseStaticAudio } from "./static/StaticAudio.svelte";
+export { default as BaseInteractiveAudio } from "./interactive/InteractiveAudio.svelte";
+export { default as BasePlayer } from "./player/AudioPlayer.svelte";
+export type { WaveformOptions } from "./shared/types";
+export { default as BaseExample } from "./Example.svelte";

sourceviewer/frontend/interactive/InteractiveAudio.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+	import { onDestroy, createEventDispatcher, tick } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import { prepare_files, type FileData, type Client } from "@gradio/client";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Music } from "@gradio/icons";
+	import { StreamingBar } from "@gradio/statustracker";
+	import AudioPlayer from "../player/AudioPlayer.svelte";
+
+	import type { IBlobEvent, IMediaRecorder } from "extendable-media-recorder";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import AudioRecorder from "../recorder/AudioRecorder.svelte";
+	import StreamAudio from "../streaming/StreamAudio.svelte";
+	import { SelectSource } from "@gradio/atoms";
+	import type { WaveformOptions } from "../shared/types";
+
+	export let value: null | FileData = null;
+	export let label: string;
+	export let root: string;
+	export let loop: boolean;
+	export let show_label = true;
+	export let show_download_button = false;
+	export let sources:
+		| ["microphone"]
+		| ["upload"]
+		| ["microphone", "upload"]
+		| ["upload", "microphone"] = ["microphone", "upload"];
+	export let pending = false;
+	export let streaming = false;
+	export let i18n: I18nFormatter;
+	export let waveform_settings: Record<string, any>;
+	export let trim_region_settings = {};
+	export let waveform_options: WaveformOptions = {};
+	export let dragging: boolean;
+	export let active_source: "microphone" | "upload";
+	export let handle_reset_value: () => void = () => {};
+	export let editable = true;
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let stream_every: number;
+	export let uploading = false;
+	export let recording = false;
+
+	let time_limit: number | null = null;
+	let stream_state: "open" | "waiting" | "closed" = "closed";
+
+	export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
+		state: "open" | "closed" | "waiting"
+	) => {
+		if (state === "closed") {
+			time_limit = null;
+			stream_state = "closed";
+		} else if (state === "waiting") {
+			stream_state = "waiting";
+		} else {
+			stream_state = "open";
+		}
+	};
+
+	export const set_time_limit = (time: number): void => {
+		if (recording) time_limit = time;
+	};
+
+	$: dispatch("drag", dragging);
+
+	// TODO: make use of this
+	// export let type: "normal" | "numpy" = "normal";
+	let recorder: IMediaRecorder;
+	let mode = "";
+	let header: Uint8Array | undefined = undefined;
+	let pending_stream: Uint8Array[] = [];
+	let submit_pending_stream_on_pending_end = false;
+	let inited = false;
+
+	const NUM_HEADER_BYTES = 44;
+	let audio_chunks: Blob[] = [];
+	let module_promises: [
+		Promise<typeof import("extendable-media-recorder")>,
+		Promise<typeof import("extendable-media-recorder-wav-encoder")>
+	];
+
+	function get_modules(): void {
+		module_promises = [
+			import("extendable-media-recorder"),
+			import("extendable-media-recorder-wav-encoder")
+		];
+	}
+
+	const is_browser = typeof window !== "undefined";
+	if (is_browser && streaming) {
+		get_modules();
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: FileData | null;
+		stream: FileData;
+		edit: never;
+		play: never;
+		pause: never;
+		stop: never;
+		end: never;
+		drag: boolean;
+		error: string;
+		upload: FileData;
+		clear: undefined;
+		start_recording: undefined;
+		pause_recording: undefined;
+		stop_recording: undefined;
+		close_stream: undefined;
+	}>();
+
+	const dispatch_blob = async (
+		blobs: Uint8Array[] | Blob[],
+		event: "stream" | "change" | "stop_recording"
+	): Promise<void> => {
+		let _audio_blob = new File(blobs, "audio.wav");
+		const val = await prepare_files([_audio_blob], event === "stream");
+		value = (
+			(await upload(val, root, undefined, max_file_size || undefined))?.filter(
+				Boolean
+			) as FileData[]
+		)[0];
+		dispatch(event, value);
+	};
+
+	onDestroy(() => {
+		if (streaming && recorder && recorder.state !== "inactive") {
+			recorder.stop();
+		}
+	});
+
+	async function prepare_audio(): Promise<void> {
+		let stream: MediaStream | null;
+
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+		} catch (err) {
+			if (!navigator.mediaDevices) {
+				dispatch("error", i18n("audio.no_device_support"));
+				return;
+			}
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", i18n("audio.allow_recording_access"));
+				return;
+			}
+			throw err;
+		}
+		if (stream == null) return;
+
+		if (streaming) {
+			const [{ MediaRecorder, register }, { connect }] =
+				await Promise.all(module_promises);
+			await register(await connect());
+			recorder = new MediaRecorder(stream, { mimeType: "audio/wav" });
+			recorder.addEventListener("dataavailable", handle_chunk);
+		} else {
+			recorder = new MediaRecorder(stream);
+			recorder.addEventListener("dataavailable", (event) => {
+				audio_chunks.push(event.data);
+			});
+		}
+		recorder.addEventListener("stop", async () => {
+			recording = false;
+			// recorder.stop();
+			await dispatch_blob(audio_chunks, "change");
+			await dispatch_blob(audio_chunks, "stop_recording");
+			audio_chunks = [];
+		});
+		inited = true;
+	}
+
+	async function handle_chunk(event: IBlobEvent): Promise<void> {
+		let buffer = await event.data.arrayBuffer();
+		let payload = new Uint8Array(buffer);
+		if (!header) {
+			header = new Uint8Array(buffer.slice(0, NUM_HEADER_BYTES));
+			payload = new Uint8Array(buffer.slice(NUM_HEADER_BYTES));
+		}
+		if (pending) {
+			pending_stream.push(payload);
+		} else {
+			let blobParts = [header].concat(pending_stream, [payload]);
+			if (!recording || stream_state === "waiting") return;
+			dispatch_blob(blobParts, "stream");
+			pending_stream = [];
+		}
+	}
+
+	$: if (submit_pending_stream_on_pending_end && pending === false) {
+		submit_pending_stream_on_pending_end = false;
+		if (header && pending_stream) {
+			let blobParts: Uint8Array[] = [header].concat(pending_stream);
+			pending_stream = [];
+			dispatch_blob(blobParts, "stream");
+		}
+	}
+
+	async function record(): Promise<void> {
+		recording = true;
+		dispatch("start_recording");
+		if (!inited) await prepare_audio();
+		header = undefined;
+		if (streaming && recorder.state != "recording") {
+			recorder.start(stream_every * 1000);
+		}
+	}
+
+	function clear(): void {
+		dispatch("change", null);
+		dispatch("clear");
+		mode = "";
+		value = null;
+	}
+
+	function handle_load({ detail }: { detail: FileData }): void {
+		value = detail;
+		dispatch("change", detail);
+		dispatch("upload", detail);
+	}
+
+	async function stop(): Promise<void> {
+		recording = false;
+
+		if (streaming) {
+			dispatch("close_stream");
+			dispatch("stop_recording");
+			recorder.stop();
+
+			if (pending) {
+				submit_pending_stream_on_pending_end = true;
+			}
+			dispatch_blob(audio_chunks, "stop_recording");
+			dispatch("clear");
+			mode = "";
+		}
+	}
+
+	$: if (!recording && recorder) stop();
+	$: if (recording && recorder) record();
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={Music}
+	float={active_source === "upload" && value === null}
+	label={label || i18n("audio.audio")}
+/>
+<div class="audio-container">
+	<StreamingBar {time_limit} />
+	{#if value === null || streaming}
+		{#if active_source === "microphone"}
+			<ModifyUpload {i18n} on:clear={clear} />
+			{#if streaming}
+				<StreamAudio
+					{record}
+					{recording}
+					{stop}
+					{i18n}
+					{waveform_settings}
+					{waveform_options}
+					waiting={stream_state === "waiting"}
+				/>
+			{:else}
+				<AudioRecorder
+					bind:mode
+					{i18n}
+					{editable}
+					{recording}
+					{dispatch_blob}
+					{waveform_settings}
+					{waveform_options}
+					{handle_reset_value}
+					on:start_recording
+					on:pause_recording
+					on:stop_recording
+				/>
+			{/if}
+		{:else if active_source === "upload"}
+			<!-- explicitly listed out audio mimetypes due to iOS bug not recognizing audio/* -->
+			<Upload
+				filetype="audio/aac,audio/midi,audio/mpeg,audio/ogg,audio/wav,audio/x-wav,audio/opus,audio/webm,audio/flac,audio/vnd.rn-realaudio,audio/x-ms-wma,audio/x-aiff,audio/amr,audio/*"
+				on:load={handle_load}
+				bind:dragging
+				bind:uploading
+				on:error={({ detail }) => dispatch("error", detail)}
+				{root}
+				{max_file_size}
+				{upload}
+				{stream_handler}
+			>
+				<slot />
+			</Upload>
+		{/if}
+	{:else}
+		<ModifyUpload
+			{i18n}
+			on:clear={clear}
+			on:edit={() => (mode = "edit")}
+			download={show_download_button ? value.url : null}
+		/>
+
+		<AudioPlayer
+			bind:mode
+			{value}
+			{label}
+			{i18n}
+			{dispatch_blob}
+			{waveform_settings}
+			{waveform_options}
+			{trim_region_settings}
+			{handle_reset_value}
+			{editable}
+			{loop}
+			interactive
+			on:stop
+			on:play
+			on:pause
+			on:edit
+		/>
+	{/if}
+	<SelectSource {sources} bind:active_source handle_clear={clear} />
+</div>
+
+<style>
+	.audio-container {
+		height: calc(var(--size-full) - var(--size-6));
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+</style>

sourceviewer/frontend/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "gradio_sourceviewer",
+  "version": "0.14.8",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.11.1",
+    "@gradio/button": "0.3.7",
+    "@gradio/client": "1.8.0",
+    "@gradio/icons": "0.8.1",
+    "@gradio/statustracker": "0.9.5",
+    "@gradio/upload": "0.14.1",
+    "@gradio/utils": "0.8.0",
+    "@gradio/wasm": "0.15.0",
+    "@types/wavesurfer.js": "^6.0.10",
+    "extendable-media-recorder": "^9.0.0",
+    "extendable-media-recorder-wav-encoder": "^7.0.76",
+    "hls.js": "^1.5.13",
+    "resize-observer-polyfill": "^1.5.1",
+    "svelte-range-slider-pips": "^2.0.1",
+    "wavesurfer.js": "^7.4.2"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.0"
+  },
+  "main_changeset": true,
+  "main": "index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./index.ts",
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./shared": {
+      "gradio": "./shared/index.ts",
+      "svelte": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
+    },
+    "./base": {
+      "gradio": "./static/StaticAudio.svelte",
+      "svelte": "./dist/static/StaticAudio.svelte",
+      "types": "./dist/static/StaticAudio.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/audio"
+  }
+}

sourceviewer/frontend/player/AudioPlayer.svelte

@@ -0,0 +1,314 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { Music } from "@gradio/icons";
+	import { format_time, type I18nFormatter } from "@gradio/utils";
+	import WaveSurfer from "wavesurfer.js";
+	import { skip_audio, process_audio } from "../shared/utils";
+	import WaveformControls from "../shared/WaveformControls.svelte";
+	import { Empty } from "@gradio/atoms";
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+	import type { FileData } from "@gradio/client";
+	import type { WaveformOptions } from "../shared/types";
+	import { createEventDispatcher } from "svelte";
+
+	import Hls from "hls.js";
+
+	export let value: null | FileData = null;
+	$: url = value?.url;
+	export let label: string;
+	export let i18n: I18nFormatter;
+	export let dispatch_blob: (
+		blobs: Uint8Array[] | Blob[],
+		event: "stream" | "change" | "stop_recording"
+	) => Promise<void> = () => Promise.resolve();
+	export let interactive = false;
+	export let editable = true;
+	export let trim_region_settings = {};
+	export let waveform_settings: Record<string, any>;
+	export let waveform_options: WaveformOptions;
+	export let mode = "";
+	export let loop: boolean;
+	export let handle_reset_value: () => void = () => {};
+
+	let container: HTMLDivElement;
+	let waveform: WaveSurfer | undefined;
+	let playing = false;
+
+	let timeRef: HTMLTimeElement;
+	let durationRef: HTMLTimeElement;
+	let audio_duration: number;
+
+	let trimDuration = 0;
+
+	let show_volume_slider = false;
+	let audio_player: HTMLAudioElement;
+
+	let stream_active = false;
+
+	const dispatch = createEventDispatcher<{
+		stop: undefined;
+		play: undefined;
+		pause: undefined;
+		edit: undefined;
+		end: undefined;
+		load: undefined;
+	}>();
+
+	const create_waveform = (): void => {
+		waveform = WaveSurfer.create({
+			container: container,
+			...waveform_settings
+		});
+		resolve_wasm_src(value?.url).then((resolved_src) => {
+			if (resolved_src && waveform) {
+				return waveform.load(resolved_src);
+			}
+		});
+	};
+
+	$: if (!value?.is_stream && container !== undefined && container !== null) {
+		if (waveform !== undefined) waveform.destroy();
+		container.innerHTML = "";
+		create_waveform();
+		playing = false;
+	}
+
+	$: waveform?.on("decode", (duration: any) => {
+		audio_duration = duration;
+		durationRef && (durationRef.textContent = format_time(duration));
+	});
+
+	$: waveform?.on(
+		"timeupdate",
+		(currentTime: any) =>
+			timeRef && (timeRef.textContent = format_time(currentTime))
+	);
+
+	$: waveform?.on("ready", () => {
+		if (!waveform_settings.autoplay) {
+			waveform?.stop();
+		} else {
+			waveform?.play();
+		}
+	});
+
+	$: waveform?.on("finish", () => {
+		if (loop) {
+			waveform?.play();
+		} else {
+			playing = false;
+			dispatch("stop");
+		}
+	});
+	$: waveform?.on("pause", () => {
+		playing = false;
+		dispatch("pause");
+	});
+	$: waveform?.on("play", () => {
+		playing = true;
+		dispatch("play");
+	});
+
+	$: waveform?.on("load", () => {
+		dispatch("load");
+	});
+
+	const handle_trim_audio = async (
+		start: number,
+		end: number
+	): Promise<void> => {
+		mode = "";
+		const decodedData = waveform?.getDecodedData();
+		if (decodedData)
+			await process_audio(
+				decodedData,
+				start,
+				end,
+				waveform_settings.sampleRate
+			).then(async (trimmedBlob: Uint8Array) => {
+				await dispatch_blob([trimmedBlob], "change");
+				waveform?.destroy();
+				container.innerHTML = "";
+			});
+		dispatch("edit");
+	};
+
+	async function load_audio(data: string): Promise<void> {
+		stream_active = false;
+		await resolve_wasm_src(data).then((resolved_src) => {
+			if (!resolved_src || value?.is_stream) return;
+			return waveform?.load(resolved_src);
+		});
+	}
+
+	$: url && load_audio(url);
+
+	function load_stream(value: FileData | null): void {
+		if (!value || !value.is_stream || !value.url) return;
+		if (!audio_player) return;
+		if (Hls.isSupported() && !stream_active) {
+			// Set config to start playback after 1 second of data received
+			const hls = new Hls({
+				maxBufferLength: 1,
+				maxMaxBufferLength: 1,
+				lowLatencyMode: true
+			});
+			hls.loadSource(value.url);
+			hls.attachMedia(audio_player);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				if (waveform_settings.autoplay) audio_player.play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				console.error("HLS error:", event, data);
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							console.error(
+								"Fatal network error encountered, trying to recover"
+							);
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							console.error("Fatal media error encountered, trying to recover");
+							hls.recoverMediaError();
+							break;
+						default:
+							console.error("Fatal error, cannot recover");
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		} else if (!stream_active) {
+			audio_player.src = value.url;
+			if (waveform_settings.autoplay) audio_player.play();
+			stream_active = true;
+		}
+	}
+
+	$: load_stream(value);
+
+	onMount(() => {
+		window.addEventListener("keydown", (e) => {
+			if (!waveform || show_volume_slider) return;
+			if (e.key === "ArrowRight" && mode !== "edit") {
+				skip_audio(waveform, 0.1);
+			} else if (e.key === "ArrowLeft" && mode !== "edit") {
+				skip_audio(waveform, -0.1);
+			}
+		});
+	});
+</script>
+
+<audio
+	class="standard-player"
+	class:hidden={!(value && value.is_stream)}
+	controls
+	autoplay={waveform_settings.autoplay}
+	on:load
+	bind:this={audio_player}
+	on:ended={() => dispatch("stop")}
+	on:play={() => dispatch("play")}
+/>
+{#if value === null}
+	<Empty size="small">
+		<Music />
+	</Empty>
+{:else if !value.is_stream}
+	<div
+		class="component-wrapper"
+		data-testid={label ? "waveform-" + label : "unlabelled-audio"}
+	>
+		<div class="waveform-container">
+			<div
+				id="waveform"
+				bind:this={container}
+				style:height={container ? null : "58px"}
+			/>
+		</div>
+
+		<div class="timestamps">
+			<time bind:this={timeRef} id="time">0:00</time>
+			<div>
+				{#if mode === "edit" && trimDuration > 0}
+					<time id="trim-duration">{format_time(trimDuration)}</time>
+				{/if}
+				<time bind:this={durationRef} id="duration">0:00</time>
+			</div>
+		</div>
+
+		<!-- {#if waveform} -->
+		<WaveformControls
+			{container}
+			{waveform}
+			{playing}
+			{audio_duration}
+			{i18n}
+			{interactive}
+			{handle_trim_audio}
+			bind:mode
+			bind:trimDuration
+			bind:show_volume_slider
+			show_redo={interactive}
+			{handle_reset_value}
+			{waveform_options}
+			{trim_region_settings}
+			{editable}
+		/>
+		<!-- {/if} -->
+	</div>
+{/if}
+
+<style>
+	.component-wrapper {
+		padding: var(--size-3);
+		width: 100%;
+	}
+
+	:global(::part(wrapper)) {
+		margin-bottom: var(--size-2);
+	}
+
+	.timestamps {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: var(--size-1) 0;
+	}
+
+	#time {
+		color: var(--neutral-400);
+	}
+
+	#duration {
+		color: var(--neutral-400);
+	}
+
+	#trim-duration {
+		color: var(--color-accent);
+		margin-right: var(--spacing-sm);
+	}
+	.waveform-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size-full);
+	}
+
+	#waveform {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+
+	.standard-player {
+		width: 100%;
+		padding: var(--size-2);
+	}
+
+	.hidden {
+		display: none;
+	}
+</style>

sourceviewer/frontend/recorder/AudioRecorder.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
+	import WaveSurfer from "wavesurfer.js";
+	import { skip_audio, process_audio } from "../shared/utils";
+	import WSRecord from "wavesurfer.js/dist/plugins/record.js";
+	import WaveformControls from "../shared/WaveformControls.svelte";
+	import WaveformRecordControls from "../shared/WaveformRecordControls.svelte";
+	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import type { WaveformOptions } from "../shared/types";
+	import { format_time } from "@gradio/utils";
+
+	export let mode: string;
+	export let i18n: I18nFormatter;
+	export let dispatch_blob: (
+		blobs: Uint8Array[] | Blob[],
+		event: "stream" | "change" | "stop_recording"
+	) => Promise<void> | undefined;
+	export let waveform_settings: Record<string, any>;
+	export let waveform_options: WaveformOptions = {
+		show_recording_waveform: true
+	};
+	export let handle_reset_value: () => void;
+	export let editable = true;
+	export let recording = false;
+
+	let micWaveform: WaveSurfer;
+	let recordingWaveform: WaveSurfer;
+	let playing = false;
+
+	let recordingContainer: HTMLDivElement;
+	let microphoneContainer: HTMLDivElement;
+
+	let record: WSRecord;
+	let recordedAudio: string | null = null;
+
+	// timestamps
+	let timeRef: HTMLTimeElement;
+	let durationRef: HTMLTimeElement;
+	let audio_duration: number;
+	let seconds = 0;
+	let interval: NodeJS.Timeout;
+	let timing = false;
+	// trimming
+	let trimDuration = 0;
+
+	const start_interval = (): void => {
+		clearInterval(interval);
+		interval = setInterval(() => {
+			seconds++;
+		}, 1000);
+	};
+
+	const dispatch = createEventDispatcher<{
+		start_recording: undefined;
+		pause_recording: undefined;
+		stop_recording: undefined;
+		stop: undefined;
+		play: undefined;
+		pause: undefined;
+		end: undefined;
+		edit: undefined;
+	}>();
+
+	function record_start_callback(): void {
+		start_interval();
+		timing = true;
+		dispatch("start_recording");
+		if (waveform_options.show_recording_waveform) {
+			let waveformCanvas = microphoneContainer;
+			if (waveformCanvas) waveformCanvas.style.display = "block";
+		}
+	}
+
+	async function record_end_callback(blob: Blob): Promise<void> {
+		seconds = 0;
+		timing = false;
+		clearInterval(interval);
+		try {
+			const array_buffer = await blob.arrayBuffer();
+			const context = new AudioContext({
+				sampleRate: waveform_settings.sampleRate
+			});
+			const audio_buffer = await context.decodeAudioData(array_buffer);
+
+			if (audio_buffer)
+				await process_audio(audio_buffer).then(async (audio: Uint8Array) => {
+					await dispatch_blob([audio], "change");
+					await dispatch_blob([audio], "stop_recording");
+				});
+		} catch (e) {
+			console.error(e);
+		}
+	}
+
+	$: record?.on("record-resume", () => {
+		start_interval();
+	});
+
+	$: recordingWaveform?.on("decode", (duration: any) => {
+		audio_duration = duration;
+		durationRef && (durationRef.textContent = format_time(duration));
+	});
+
+	$: recordingWaveform?.on(
+		"timeupdate",
+		(currentTime: any) =>
+			timeRef && (timeRef.textContent = format_time(currentTime))
+	);
+
+	$: recordingWaveform?.on("pause", () => {
+		dispatch("pause");
+		playing = false;
+	});
+
+	$: recordingWaveform?.on("play", () => {
+		dispatch("play");
+		playing = true;
+	});
+
+	$: recordingWaveform?.on("finish", () => {
+		dispatch("stop");
+		playing = false;
+	});
+
+	const create_mic_waveform = (): void => {
+		if (microphoneContainer) microphoneContainer.innerHTML = "";
+		if (micWaveform !== undefined) micWaveform.destroy();
+		if (!microphoneContainer) return;
+		micWaveform = WaveSurfer.create({
+			...waveform_settings,
+			normalize: false,
+			container: microphoneContainer
+		});
+
+		record = micWaveform.registerPlugin(RecordPlugin.create());
+		record.startMic();
+		record?.on("record-end", record_end_callback);
+		record?.on("record-start", record_start_callback);
+		record?.on("record-pause", () => {
+			dispatch("pause_recording");
+			clearInterval(interval);
+		});
+
+		record?.on("record-end", (blob) => {
+			recordedAudio = URL.createObjectURL(blob);
+
+			const microphone = microphoneContainer;
+			const recording = recordingContainer;
+
+			if (microphone) microphone.style.display = "none";
+			if (recording && recordedAudio) {
+				recording.innerHTML = "";
+				create_recording_waveform();
+			}
+		});
+	};
+
+	const create_recording_waveform = (): void => {
+		let recording = recordingContainer;
+		if (!recordedAudio || !recording) return;
+		recordingWaveform = WaveSurfer.create({
+			container: recording,
+			url: recordedAudio,
+			...waveform_settings
+		});
+	};
+
+	const handle_trim_audio = async (
+		start: number,
+		end: number
+	): Promise<void> => {
+		mode = "edit";
+		const decodedData = recordingWaveform.getDecodedData();
+		if (decodedData)
+			await process_audio(decodedData, start, end).then(
+				async (trimmedAudio: Uint8Array) => {
+					await dispatch_blob([trimmedAudio], "change");
+					await dispatch_blob([trimmedAudio], "stop_recording");
+					recordingWaveform.destroy();
+					create_recording_waveform();
+				}
+			);
+		dispatch("edit");
+	};
+
+	onMount(() => {
+		create_mic_waveform();
+
+		window.addEventListener("keydown", (e) => {
+			if (e.key === "ArrowRight") {
+				skip_audio(recordingWaveform, 0.1);
+			} else if (e.key === "ArrowLeft") {
+				skip_audio(recordingWaveform, -0.1);
+			}
+		});
+	});
+</script>
+
+<div class="component-wrapper">
+	<div
+		class="microphone"
+		bind:this={microphoneContainer}
+		data-testid="microphone-waveform"
+	/>
+	<div bind:this={recordingContainer} data-testid="recording-waveform" />
+
+	{#if (timing || recordedAudio) && waveform_options.show_recording_waveform}
+		<div class="timestamps">
+			<time bind:this={timeRef} class="time">0:00</time>
+			<div>
+				{#if mode === "edit" && trimDuration > 0}
+					<time class="trim-duration">{format_time(trimDuration)}</time>
+				{/if}
+				{#if timing}
+					<time class="duration">{format_time(seconds)}</time>
+				{:else}
+					<time bind:this={durationRef} class="duration">0:00</time>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	{#if microphoneContainer && !recordedAudio}
+		<WaveformRecordControls
+			bind:record
+			{i18n}
+			{timing}
+			{recording}
+			show_recording_waveform={waveform_options.show_recording_waveform}
+			record_time={format_time(seconds)}
+		/>
+	{/if}
+
+	{#if recordingWaveform && recordedAudio}
+		<WaveformControls
+			bind:waveform={recordingWaveform}
+			container={recordingContainer}
+			{playing}
+			{audio_duration}
+			{i18n}
+			{editable}
+			interactive={true}
+			{handle_trim_audio}
+			bind:trimDuration
+			bind:mode
+			show_redo
+			{handle_reset_value}
+			{waveform_options}
+		/>
+	{/if}
+</div>
+
+<style>
+	.microphone {
+		width: 100%;
+		display: none;
+	}
+
+	.component-wrapper {
+		padding: var(--size-3);
+		width: 100%;
+	}
+
+	.timestamps {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: var(--size-1) 0;
+		margin: var(--spacing-md) 0;
+	}
+
+	.time {
+		color: var(--neutral-400);
+	}
+
+	.duration {
+		color: var(--neutral-400);
+	}
+
+	.trim-duration {
+		color: var(--color-accent);
+		margin-right: var(--spacing-sm);
+	}
+</style>

sourceviewer/frontend/shared/Audio.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { HTMLAudioAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+	interface Props extends HTMLAudioAttributes {
+		"data-testid"?: string;
+	}
+	type $$Props = Props;
+
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let src: HTMLAudioAttributes["src"] = undefined;
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// In normal (non-Wasm) Gradio, the `<audio>` element should be rendered with the passed `src` props immediately
+		// without waiting for `resolve_wasm_src()` to resolve.
+		// If it waits, a black image is displayed until the async task finishes
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<audio
+	src={resolved_src}
+	{...$$restProps}
+	on:play={dispatch.bind(null, "play")}
+	on:pause={dispatch.bind(null, "pause")}
+	on:ended={dispatch.bind(null, "ended")}
+/>

sourceviewer/frontend/shared/DeviceSelect.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { createEventDispatcher } from "svelte";
+
+	export let i18n: I18nFormatter;
+	export let micDevices: MediaDeviceInfo[] = [];
+
+	const dispatch = createEventDispatcher<{
+		error: string;
+	}>();
+
+	$: if (typeof window !== "undefined") {
+		try {
+			let tempDevices: MediaDeviceInfo[] = [];
+			RecordPlugin.getAvailableAudioDevices().then(
+				(devices: MediaDeviceInfo[]) => {
+					micDevices = devices;
+					devices.forEach((device) => {
+						if (device.deviceId) {
+							tempDevices.push(device);
+						}
+					});
+					micDevices = tempDevices;
+				}
+			);
+		} catch (err) {
+			if (err instanceof DOMException && err.name == "NotAllowedError") {
+				dispatch("error", i18n("audio.allow_recording_access"));
+			}
+			throw err;
+		}
+	}
+</script>
+
+<select
+	class="mic-select"
+	aria-label="Select input device"
+	disabled={micDevices.length === 0}
+>
+	{#if micDevices.length === 0}
+		<option value="">{i18n("audio.no_microphone")}</option>
+	{:else}
+		{#each micDevices as micDevice}
+			<option value={micDevice.deviceId}>{micDevice.label}</option>
+		{/each}
+	{/if}
+</select>
+
+<style>
+	.mic-select {
+		height: var(--size-8);
+		background: var(--block-background-fill);
+		padding: 0px var(--spacing-xxl);
+		border-radius: var(--button-large-radius);
+		font-size: var(--text-md);
+		border: 1px solid var(--block-border-color);
+		gap: var(--size-1);
+	}
+
+	select {
+		text-overflow: ellipsis;
+		max-width: var(--size-40);
+	}
+
+	@media (max-width: 375px) {
+		select {
+			width: 100%;
+		}
+	}
+</style>

sourceviewer/frontend/shared/VolumeControl.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import WaveSurfer from "wavesurfer.js";
+
+	export let currentVolume = 1;
+	export let show_volume_slider = false;
+	export let waveform: WaveSurfer | undefined;
+
+	let volumeElement: HTMLInputElement;
+
+	onMount(() => {
+		adjustSlider();
+	});
+
+	const adjustSlider = (): void => {
+		let slider = volumeElement;
+		if (!slider) return;
+
+		slider.style.background = `linear-gradient(to right, var(--color-accent) ${
+			currentVolume * 100
+		}%, var(--neutral-400) ${currentVolume * 100}%)`;
+	};
+
+	$: currentVolume, adjustSlider();
+</script>
+
+<input
+	bind:this={volumeElement}
+	id="volume"
+	class="volume-slider"
+	type="range"
+	min="0"
+	max="1"
+	step="0.01"
+	value={currentVolume}
+	on:focusout={() => (show_volume_slider = false)}
+	on:input={(e) => {
+		if (e.target instanceof HTMLInputElement) {
+			currentVolume = parseFloat(e.target.value);
+			waveform?.setVolume(currentVolume);
+		}
+	}}
+/>
+
+<style>
+	.volume-slider {
+		-webkit-appearance: none;
+		appearance: none;
+		width: var(--size-20);
+		accent-color: var(--color-accent);
+		height: 4px;
+		cursor: pointer;
+		outline: none;
+		border-radius: 15px;
+		background-color: var(--neutral-400);
+	}
+
+	input[type="range"]::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		height: 15px;
+		width: 15px;
+		background-color: var(--color-accent);
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+
+	input[type="range"]::-moz-range-thumb {
+		height: 15px;
+		width: 15px;
+		background-color: var(--color-accent);
+		border-radius: 50%;
+		border: none;
+		transition: 0.2s ease-in-out;
+	}
+</style>

sourceviewer/frontend/shared/VolumeLevels.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { VolumeMuted, VolumeHigh, VolumeLow } from "@gradio/icons";
+	export let currentVolume: number;
+</script>
+
+{#if currentVolume == 0}
+	<VolumeMuted />
+{:else if currentVolume < 0.5}
+	<VolumeLow />
+{:else if currentVolume >= 0.5}
+	<VolumeHigh />
+{/if}

sourceviewer/frontend/shared/WaveformControls.svelte

@@ -0,0 +1,406 @@
+<script lang="ts">
+	import { Play, Pause, Forward, Backward, Undo, Trim } from "@gradio/icons";
+	import { get_skip_rewind_amount } from "../shared/utils";
+	import type { I18nFormatter } from "@gradio/utils";
+	import WaveSurfer from "wavesurfer.js";
+	import RegionsPlugin, {
+		type Region
+	} from "wavesurfer.js/dist/plugins/regions.js";
+	import type { WaveformOptions } from "./types";
+	import VolumeLevels from "./VolumeLevels.svelte";
+	import VolumeControl from "./VolumeControl.svelte";
+
+	export let waveform: WaveSurfer | undefined;
+	export let audio_duration: number;
+	export let i18n: I18nFormatter;
+	export let playing: boolean;
+	export let show_redo = false;
+	export let interactive = false;
+	export let handle_trim_audio: (start: number, end: number) => void;
+	export let mode = "";
+	export let container: HTMLDivElement;
+	export let handle_reset_value: () => void;
+	export let waveform_options: WaveformOptions = {};
+	export let trim_region_settings: WaveformOptions = {};
+	export let show_volume_slider = false;
+	export let editable = true;
+
+	export let trimDuration = 0;
+
+	let playbackSpeeds = [0.5, 1, 1.5, 2];
+	let playbackSpeed = playbackSpeeds[1];
+
+	let trimRegion: RegionsPlugin | null = null;
+	let activeRegion: Region | null = null;
+
+	let leftRegionHandle: HTMLDivElement | null;
+	let rightRegionHandle: HTMLDivElement | null;
+	let activeHandle = "";
+
+	let currentVolume = 1;
+
+	$: trimRegion =
+		container && waveform
+			? waveform.registerPlugin(RegionsPlugin.create())
+			: null;
+
+	$: trimRegion?.on("region-out", (region) => {
+		region.play();
+	});
+
+	$: trimRegion?.on("region-updated", (region) => {
+		trimDuration = region.end - region.start;
+	});
+
+	$: trimRegion?.on("region-clicked", (region, e) => {
+		e.stopPropagation(); // prevent triggering a click on the waveform
+		activeRegion = region;
+		region.play();
+	});
+
+	const addTrimRegion = (): void => {
+		if (!trimRegion) return;
+		activeRegion = trimRegion?.addRegion({
+			start: audio_duration / 4,
+			end: audio_duration / 2,
+			...trim_region_settings
+		});
+
+		trimDuration = activeRegion.end - activeRegion.start;
+	};
+
+	$: if (activeRegion) {
+		const shadowRoot = container.children[0]!.shadowRoot!;
+
+		rightRegionHandle = shadowRoot.querySelector('[data-resize="right"]');
+		leftRegionHandle = shadowRoot.querySelector('[data-resize="left"]');
+
+		if (leftRegionHandle && rightRegionHandle) {
+			leftRegionHandle.setAttribute("role", "button");
+			rightRegionHandle.setAttribute("role", "button");
+			leftRegionHandle?.setAttribute("aria-label", "Drag to adjust start time");
+			rightRegionHandle?.setAttribute("aria-label", "Drag to adjust end time");
+			leftRegionHandle?.setAttribute("tabindex", "0");
+			rightRegionHandle?.setAttribute("tabindex", "0");
+
+			leftRegionHandle.addEventListener("focus", () => {
+				if (trimRegion) activeHandle = "left";
+			});
+
+			rightRegionHandle.addEventListener("focus", () => {
+				if (trimRegion) activeHandle = "right";
+			});
+		}
+	}
+
+	const trimAudio = (): void => {
+		if (waveform && trimRegion) {
+			if (activeRegion) {
+				const start = activeRegion.start;
+				const end = activeRegion.end;
+				handle_trim_audio(start, end);
+				mode = "";
+				activeRegion = null;
+			}
+		}
+	};
+
+	const clearRegions = (): void => {
+		trimRegion?.getRegions().forEach((region) => {
+			region.remove();
+		});
+		trimRegion?.clearRegions();
+	};
+
+	const toggleTrimmingMode = (): void => {
+		clearRegions();
+		if (mode === "edit") {
+			mode = "";
+		} else {
+			mode = "edit";
+			addTrimRegion();
+		}
+	};
+
+	const adjustRegionHandles = (handle: string, key: string): void => {
+		let newStart;
+		let newEnd;
+
+		if (!activeRegion) return;
+		if (handle === "left") {
+			if (key === "ArrowLeft") {
+				newStart = activeRegion.start - 0.05;
+				newEnd = activeRegion.end;
+			} else {
+				newStart = activeRegion.start + 0.05;
+				newEnd = activeRegion.end;
+			}
+		} else {
+			if (key === "ArrowLeft") {
+				newStart = activeRegion.start;
+				newEnd = activeRegion.end - 0.05;
+			} else {
+				newStart = activeRegion.start;
+				newEnd = activeRegion.end + 0.05;
+			}
+		}
+
+		activeRegion.setOptions({
+			start: newStart,
+			end: newEnd
+		});
+
+		trimDuration = activeRegion.end - activeRegion.start;
+	};
+
+	$: trimRegion &&
+		window.addEventListener("keydown", (e) => {
+			if (e.key === "ArrowLeft") {
+				adjustRegionHandles(activeHandle, "ArrowLeft");
+			} else if (e.key === "ArrowRight") {
+				adjustRegionHandles(activeHandle, "ArrowRight");
+			}
+		});
+</script>
+
+<div class="controls" data-testid="waveform-controls">
+	<div class="control-wrapper">
+		<button
+			class="action icon volume"
+			style:color={show_volume_slider
+				? "var(--color-accent)"
+				: "var(--neutral-400)"}
+			aria-label="Adjust volume"
+			on:click={() => (show_volume_slider = !show_volume_slider)}
+		>
+			<VolumeLevels {currentVolume} />
+		</button>
+
+		{#if show_volume_slider}
+			<VolumeControl bind:currentVolume bind:show_volume_slider {waveform} />
+		{/if}
+
+		<button
+			class:hidden={show_volume_slider}
+			class="playback icon"
+			aria-label={`Adjust playback speed to ${
+				playbackSpeeds[
+					(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length
+				]
+			}x`}
+			on:click={() => {
+				playbackSpeed =
+					playbackSpeeds[
+						(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length
+					];
+
+				waveform?.setPlaybackRate(playbackSpeed);
+			}}
+		>
+			<span>{playbackSpeed}x</span>
+		</button>
+	</div>
+
+	<div class="play-pause-wrapper">
+		<button
+			class="rewind icon"
+			aria-label={`Skip backwards by ${get_skip_rewind_amount(
+				audio_duration,
+				waveform_options.skip_length
+			)} seconds`}
+			on:click={() =>
+				waveform?.skip(
+					get_skip_rewind_amount(audio_duration, waveform_options.skip_length) *
+						-1
+				)}
+		>
+			<Backward />
+		</button>
+		<button
+			class="play-pause-button icon"
+			on:click={() => waveform?.playPause()}
+			aria-label={playing ? i18n("audio.pause") : i18n("audio.play")}
+		>
+			{#if playing}
+				<Pause />
+			{:else}
+				<Play />
+			{/if}
+		</button>
+		<button
+			class="skip icon"
+			aria-label="Skip forward by {get_skip_rewind_amount(
+				audio_duration,
+				waveform_options.skip_length
+			)} seconds"
+			on:click={() =>
+				waveform?.skip(
+					get_skip_rewind_amount(audio_duration, waveform_options.skip_length)
+				)}
+		>
+			<Forward />
+		</button>
+	</div>
+
+	<div class="settings-wrapper">
+		{#if editable && interactive}
+			{#if show_redo && mode === ""}
+				<button
+					class="action icon"
+					aria-label="Reset audio"
+					on:click={() => {
+						handle_reset_value();
+						clearRegions();
+						mode = "";
+					}}
+				>
+					<Undo />
+				</button>
+			{/if}
+
+			{#if mode === ""}
+				<button
+					class="action icon"
+					aria-label="Trim audio to selection"
+					on:click={toggleTrimmingMode}
+				>
+					<Trim />
+				</button>
+			{:else}
+				<button class="text-button" on:click={trimAudio}>Trim</button>
+				<button class="text-button" on:click={toggleTrimmingMode}>Cancel</button
+				>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.settings-wrapper {
+		display: flex;
+		justify-self: self-end;
+		align-items: center;
+		grid-area: editing;
+	}
+	.text-button {
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-sm);
+		font-weight: 300;
+		font-size: var(--size-3);
+		text-align: center;
+		color: var(--neutral-400);
+		height: var(--size-5);
+		font-weight: bold;
+		padding: 0 5px;
+		margin-left: 5px;
+	}
+
+	.text-button:hover,
+	.text-button:focus {
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.controls {
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-areas: "controls playback editing";
+		margin-top: 5px;
+		align-items: center;
+		position: relative;
+		flex-wrap: wrap;
+		justify-content: space-between;
+	}
+	.controls div {
+		margin: var(--size-1) 0;
+	}
+
+	@media (max-width: 600px) {
+		.controls {
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				"playback playback"
+				"controls editing";
+		}
+	}
+
+	@media (max-width: 319px) {
+		.controls {
+			overflow-x: scroll;
+		}
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.control-wrapper {
+		display: flex;
+		justify-self: self-start;
+		align-items: center;
+		justify-content: space-between;
+		grid-area: controls;
+	}
+
+	.action {
+		width: var(--size-5);
+		color: var(--neutral-400);
+		margin-left: var(--spacing-md);
+	}
+	.icon:hover,
+	.icon:focus {
+		color: var(--color-accent);
+	}
+	.play-pause-wrapper {
+		display: flex;
+		justify-self: center;
+		grid-area: playback;
+	}
+
+	@media (max-width: 600px) {
+		.play-pause-wrapper {
+			margin: var(--spacing-md);
+		}
+	}
+	.playback {
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-sm);
+		width: 5.5ch;
+		font-weight: 300;
+		font-size: var(--size-3);
+		text-align: center;
+		color: var(--neutral-400);
+		height: var(--size-5);
+		font-weight: bold;
+	}
+
+	.playback:hover,
+	.playback:focus {
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.rewind,
+	.skip {
+		margin: 0 10px;
+		color: var(--neutral-400);
+	}
+
+	.play-pause-button {
+		width: var(--size-8);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--neutral-400);
+		fill: var(--neutral-400);
+	}
+
+	.volume {
+		position: relative;
+		display: flex;
+		justify-content: center;
+		margin-right: var(--spacing-xl);
+		width: var(--size-5);
+	}
+</style>

sourceviewer/frontend/shared/WaveformRecordControls.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+	import { Pause } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import DeviceSelect from "./DeviceSelect.svelte";
+
+	export let record: RecordPlugin;
+	export let i18n: I18nFormatter;
+	export let recording = false;
+
+	let micDevices: MediaDeviceInfo[] = [];
+	let recordButton: HTMLButtonElement;
+	let pauseButton: HTMLButtonElement;
+	let resumeButton: HTMLButtonElement;
+	let stopButton: HTMLButtonElement;
+	let stopButtonPaused: HTMLButtonElement;
+	let recording_ongoing = false;
+
+	export let record_time: string;
+	export let show_recording_waveform: boolean | undefined;
+	export let timing = false;
+
+	$: record.on("record-start", () => {
+		record.startMic();
+
+		recordButton.style.display = "none";
+		stopButton.style.display = "flex";
+		pauseButton.style.display = "block";
+	});
+
+	$: record.on("record-end", () => {
+		if (record.isPaused()) {
+			record.resumeRecording();
+			record.stopRecording();
+		}
+		record.stopMic();
+
+		recordButton.style.display = "flex";
+		stopButton.style.display = "none";
+		pauseButton.style.display = "none";
+		recordButton.disabled = false;
+	});
+
+	$: record.on("record-pause", () => {
+		pauseButton.style.display = "none";
+		resumeButton.style.display = "block";
+		stopButton.style.display = "none";
+		stopButtonPaused.style.display = "flex";
+	});
+
+	$: record.on("record-resume", () => {
+		pauseButton.style.display = "block";
+		resumeButton.style.display = "none";
+		recordButton.style.display = "none";
+		stopButton.style.display = "flex";
+		stopButtonPaused.style.display = "none";
+	});
+
+	$: if (recording && !recording_ongoing) {
+		record.startRecording();
+		recording_ongoing = true;
+	} else {
+		record.stopRecording();
+		recording_ongoing = false;
+	}
+</script>
+
+<div class="controls">
+	<div class="wrapper">
+		<button
+			bind:this={recordButton}
+			class="record record-button"
+			on:click={() => record.startRecording()}>{i18n("audio.record")}</button
+		>
+
+		<button
+			bind:this={stopButton}
+			class="stop-button {record.isPaused() ? 'stop-button-paused' : ''}"
+			on:click={() => {
+				if (record.isPaused()) {
+					record.resumeRecording();
+					record.stopRecording();
+				}
+
+				record.stopRecording();
+			}}>{i18n("audio.stop")}</button
+		>
+
+		<button
+			bind:this={stopButtonPaused}
+			id="stop-paused"
+			class="stop-button-paused"
+			on:click={() => {
+				if (record.isPaused()) {
+					record.resumeRecording();
+					record.stopRecording();
+				}
+
+				record.stopRecording();
+			}}>{i18n("audio.stop")}</button
+		>
+
+		<button
+			aria-label="pause"
+			bind:this={pauseButton}
+			class="pause-button"
+			on:click={() => record.pauseRecording()}><Pause /></button
+		>
+		<button
+			bind:this={resumeButton}
+			class="resume-button"
+			on:click={() => record.resumeRecording()}>{i18n("audio.resume")}</button
+		>
+		{#if timing && !show_recording_waveform}
+			<time class="duration-button duration">{record_time}</time>
+		{/if}
+	</div>
+	<DeviceSelect bind:micDevices {i18n} />
+</div>
+
+<style>
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.wrapper {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.record {
+		margin-right: var(--spacing-md);
+	}
+
+	.stop-button-paused {
+		display: none;
+		height: var(--size-8);
+		width: var(--size-20);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		align-items: center;
+		border: 1px solid var(--block-border-color);
+		margin: var(--size-1) var(--size-1) 0 0;
+	}
+
+	.stop-button-paused::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+	}
+	.stop-button::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+		animation: scaling 1800ms infinite;
+	}
+
+	.stop-button {
+		display: none;
+		height: var(--size-8);
+		width: var(--size-20);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		align-items: center;
+		border: 1px solid var(--primary-600);
+		margin: var(--size-1) var(--size-1) 0 0;
+	}
+
+	.record-button::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+	}
+
+	.record-button {
+		height: var(--size-8);
+		width: var(--size-24);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--block-border-color);
+	}
+
+	.stop-button:disabled {
+		cursor: not-allowed;
+	}
+
+	.record-button:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	@keyframes scaling {
+		0% {
+			background-color: var(--primary-600);
+			scale: 1;
+		}
+		50% {
+			background-color: var(--primary-600);
+			scale: 1.2;
+		}
+		100% {
+			background-color: var(--primary-600);
+			scale: 1;
+		}
+	}
+
+	.pause-button {
+		display: none;
+		height: var(--size-8);
+		width: var(--size-20);
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--button-large-radius);
+		padding: var(--spacing-md);
+		margin: var(--size-1) var(--size-1) 0 0;
+	}
+
+	.resume-button {
+		display: none;
+		height: var(--size-8);
+		width: var(--size-20);
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--button-large-radius);
+		padding: var(--spacing-xl);
+		line-height: 1px;
+		font-size: var(--text-md);
+		margin: var(--size-1) var(--size-1) 0 0;
+	}
+
+	.duration {
+		display: flex;
+		height: var(--size-8);
+		width: var(--size-20);
+		border: 1px solid var(--block-border-color);
+		padding: var(--spacing-md);
+		align-items: center;
+		justify-content: center;
+		margin: var(--size-1) var(--size-1) 0 0;
+	}
+
+	:global(::part(region)) {
+		border-radius: var(--radius-md);
+		height: 98% !important;
+		border: 1px solid var(--trim-region-color);
+		background-color: unset;
+		border-width: 1px 3px;
+	}
+
+	:global(::part(region))::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: var(--trim-region-color);
+		opacity: 0.2;
+		border-radius: var(--radius-md);
+	}
+
+	:global(::part(region-handle)) {
+		width: 5px !important;
+		border: none;
+	}
+</style>

sourceviewer/frontend/shared/audioBufferToWav.ts

@@ -0,0 +1,59 @@
+export function audioBufferToWav(audioBuffer: AudioBuffer): Uint8Array {
+	const numOfChan = audioBuffer.numberOfChannels;
+	const length = audioBuffer.length * numOfChan * 2 + 44;
+	const buffer = new ArrayBuffer(length);
+	const view = new DataView(buffer);
+	let offset = 0;
+
+	// Write WAV header
+	const writeString = function (
+		view: DataView,
+		offset: number,
+		string: string
+	): void {
+		for (let i = 0; i < string.length; i++) {
+			view.setUint8(offset + i, string.charCodeAt(i));
+		}
+	};
+
+	writeString(view, offset, "RIFF");
+	offset += 4;
+	view.setUint32(offset, length - 8, true);
+	offset += 4;
+	writeString(view, offset, "WAVE");
+	offset += 4;
+	writeString(view, offset, "fmt ");
+	offset += 4;
+	view.setUint32(offset, 16, true);
+	offset += 4; // Sub-chunk size, 16 for PCM
+	view.setUint16(offset, 1, true);
+	offset += 2; // PCM format
+	view.setUint16(offset, numOfChan, true);
+	offset += 2;
+	view.setUint32(offset, audioBuffer.sampleRate, true);
+	offset += 4;
+	view.setUint32(offset, audioBuffer.sampleRate * 2 * numOfChan, true);
+	offset += 4;
+	view.setUint16(offset, numOfChan * 2, true);
+	offset += 2;
+	view.setUint16(offset, 16, true);
+	offset += 2;
+	writeString(view, offset, "data");
+	offset += 4;
+	view.setUint32(offset, audioBuffer.length * numOfChan * 2, true);
+	offset += 4;
+
+	// Write PCM audio data
+	for (let i = 0; i < audioBuffer.length; i++) {
+		for (let channel = 0; channel < numOfChan; channel++) {
+			const sample = Math.max(
+				-1,
+				Math.min(1, audioBuffer.getChannelData(channel)[i])
+			);
+			view.setInt16(offset, sample * 0x7fff, true);
+			offset += 2;
+		}
+	}
+
+	return new Uint8Array(buffer);
+}

sourceviewer/frontend/shared/index.ts

@@ -0,0 +1 @@
+export { default as Audio } from "./Audio.svelte";

sourceviewer/frontend/shared/types.ts

@@ -0,0 +1,9 @@
+export type WaveformOptions = {
+	waveform_color?: string;
+	waveform_progress_color?: string;
+	show_controls?: boolean;
+	skip_length?: number;
+	trim_region_color?: string;
+	show_recording_waveform?: boolean;
+	sample_rate?: number;
+};

sourceviewer/frontend/shared/utils.ts

@@ -0,0 +1,79 @@
+import type WaveSurfer from "wavesurfer.js";
+import { audioBufferToWav } from "./audioBufferToWav";
+
+export interface LoadedParams {
+	autoplay?: boolean;
+}
+
+export function blob_to_data_url(blob: Blob): Promise<string> {
+	return new Promise((fulfill, reject) => {
+		let reader = new FileReader();
+		reader.onerror = reject;
+		reader.onload = () => fulfill(reader.result as string);
+		reader.readAsDataURL(blob);
+	});
+}
+
+export const process_audio = async (
+	audioBuffer: AudioBuffer,
+	start?: number,
+	end?: number,
+	waveform_sample_rate?: number
+): Promise<Uint8Array> => {
+	const audioContext = new AudioContext({
+		sampleRate: waveform_sample_rate || audioBuffer.sampleRate
+	});
+	const numberOfChannels = audioBuffer.numberOfChannels;
+	const sampleRate = waveform_sample_rate || audioBuffer.sampleRate;
+
+	let trimmedLength = audioBuffer.length;
+	let startOffset = 0;
+
+	if (start && end) {
+		startOffset = Math.round(start * sampleRate);
+		const endOffset = Math.round(end * sampleRate);
+		trimmedLength = endOffset - startOffset;
+	}
+
+	const trimmedAudioBuffer = audioContext.createBuffer(
+		numberOfChannels,
+		trimmedLength,
+		sampleRate
+	);
+
+	for (let channel = 0; channel < numberOfChannels; channel++) {
+		const channelData = audioBuffer.getChannelData(channel);
+		const trimmedData = trimmedAudioBuffer.getChannelData(channel);
+		for (let i = 0; i < trimmedLength; i++) {
+			trimmedData[i] = channelData[startOffset + i];
+		}
+	}
+
+	return audioBufferToWav(trimmedAudioBuffer);
+};
+
+export function loaded(
+	node: HTMLAudioElement,
+	{ autoplay }: LoadedParams = {}
+): void {
+	async function handle_playback(): Promise<void> {
+		if (!autoplay) return;
+		node.pause();
+		await node.play();
+	}
+}
+
+export const skip_audio = (waveform: WaveSurfer, amount: number): void => {
+	if (!waveform) return;
+	waveform.skip(amount);
+};
+
+export const get_skip_rewind_amount = (
+	audio_duration: number,
+	skip_length?: number | null
+): number => {
+	if (!skip_length) {
+		skip_length = 5;
+	}
+	return (audio_duration / 100) * skip_length || 5;
+};

sourceviewer/frontend/static/StaticAudio.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { uploadToHuggingFace } from "@gradio/utils";
+	import { Empty } from "@gradio/atoms";
+	import {
+		ShareButton,
+		IconButton,
+		BlockLabel,
+		IconButtonWrapper
+	} from "@gradio/atoms";
+	import { Download, Music } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import AudioPlayer from "../player/AudioPlayer.svelte";
+	import { createEventDispatcher } from "svelte";
+	import type { FileData } from "@gradio/client";
+	import { DownloadLink } from "@gradio/wasm/svelte";
+	import type { WaveformOptions } from "../shared/types";
+
+	export let value: null | FileData = null;
+	export let label: string;
+	export let show_label = true;
+	export let show_download_button = true;
+	export let show_share_button = false;
+	export let i18n: I18nFormatter;
+	export let waveform_settings: Record<string, any>;
+	export let waveform_options: WaveformOptions;
+	export let editable = true;
+	export let loop: boolean;
+
+	const dispatch = createEventDispatcher<{
+		change: FileData;
+		play: undefined;
+		pause: undefined;
+		end: undefined;
+		stop: undefined;
+	}>();
+
+	$: value && dispatch("change", value);
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={Music}
+	float={false}
+	label={label || i18n("audio.audio")}
+/>
+
+{#if value !== null}
+	<IconButtonWrapper>
+		{#if show_download_button}
+			<DownloadLink
+				href={value.is_stream
+					? value.url?.replace("playlist.m3u8", "playlist-file")
+					: value.url}
+				download={value.orig_name || value.path}
+			>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+		{#if show_share_button}
+			<ShareButton
+				{i18n}
+				on:error
+				on:share
+				formatter={async (value) => {
+					if (!value) return "";
+					let url = await uploadToHuggingFace(value.url, "url");
+					return `<audio controls src="${url}"></audio>`;
+				}}
+				{value}
+			/>
+		{/if}
+	</IconButtonWrapper>
+
+	<AudioPlayer
+		{value}
+		{label}
+		{i18n}
+		{waveform_settings}
+		{waveform_options}
+		{editable}
+		{loop}
+		on:pause
+		on:play
+		on:stop
+		on:load
+	/>
+{:else}
+	<Empty size="small">
+		<Music />
+	</Empty>
+{/if}

sourceviewer/frontend/streaming/StreamAudio.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { Spinner } from "@gradio/icons";
+	import WaveSurfer from "wavesurfer.js";
+	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import type { WaveformOptions } from "../shared/types";
+	import DeviceSelect from "../shared/DeviceSelect.svelte";
+
+	export let recording = false;
+	export let paused_recording = false;
+	export let stop: () => void;
+	export let record: () => void;
+	export let i18n: I18nFormatter;
+	export let waveform_settings: Record<string, any>;
+	export let waveform_options: WaveformOptions = {
+		show_recording_waveform: true
+	};
+	export let waiting = false;
+
+	let micWaveform: WaveSurfer;
+	let waveformRecord: RecordPlugin;
+
+	let microphoneContainer: HTMLDivElement;
+
+	let micDevices: MediaDeviceInfo[] = [];
+
+	onMount(() => {
+		create_mic_waveform();
+	});
+
+	const create_mic_waveform = (): void => {
+		if (micWaveform !== undefined) micWaveform.destroy();
+		if (!microphoneContainer) return;
+		micWaveform = WaveSurfer.create({
+			...waveform_settings,
+			height: 100,
+			container: microphoneContainer
+		});
+
+		waveformRecord = micWaveform.registerPlugin(RecordPlugin.create());
+	};
+</script>
+
+<div class="mic-wrap">
+	{#if waveform_options.show_recording_waveform}
+		<div
+			bind:this={microphoneContainer}
+			style:display={recording ? "block" : "none"}
+		/>
+	{/if}
+	<div class="controls">
+		{#if recording && !waiting}
+			<button
+				class={paused_recording ? "stop-button-paused" : "stop-button"}
+				on:click={() => {
+					waveformRecord?.stopMic();
+					stop();
+				}}
+			>
+				<span class="record-icon">
+					<span class="pinger" />
+					<span class="dot" />
+				</span>
+				{paused_recording ? i18n("audio.pause") : i18n("audio.stop")}
+			</button>
+		{:else if recording && waiting}
+			<button
+				class="spinner-button"
+				on:click={() => {
+					stop();
+				}}
+			>
+				<div class="icon">
+					<Spinner />
+				</div>
+				{i18n("audio.waiting")}
+			</button>
+		{:else}
+			<button
+				class="record-button"
+				on:click={() => {
+					waveformRecord?.startMic();
+					record();
+				}}
+			>
+				<span class="record-icon">
+					<span class="dot" />
+				</span>
+				{i18n("audio.record")}
+			</button>
+		{/if}
+
+		<DeviceSelect bind:micDevices {i18n} />
+	</div>
+</div>
+
+<style>
+	.controls {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+	}
+
+	.mic-wrap {
+		display: block;
+		align-items: center;
+		margin: var(--spacing-xl);
+	}
+
+	.icon {
+		width: var(--size-4);
+		height: var(--size-4);
+		fill: var(--primary-600);
+		stroke: var(--primary-600);
+	}
+
+	.stop-button-paused {
+		display: none;
+		height: var(--size-8);
+		width: var(--size-20);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		align-items: center;
+		border: 1px solid var(--block-border-color);
+		margin-right: 5px;
+	}
+
+	.stop-button-paused::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+	}
+
+	.stop-button::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+		animation: scaling 1800ms infinite;
+	}
+
+	.stop-button {
+		height: var(--size-8);
+		width: var(--size-20);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		align-items: center;
+		border: 1px solid var(--primary-600);
+		margin-right: 5px;
+		display: flex;
+	}
+
+	.spinner-button {
+		height: var(--size-8);
+		width: var(--size-24);
+		background-color: var(--block-background-fill);
+		border-radius: var(--radius-3xl);
+		align-items: center;
+		border: 1px solid var(--primary-600);
+		margin: 0 var(--spacing-xl);
+		display: flex;
+		justify-content: space-evenly;
+	}
+
+	.record-button::before {
+		content: "";
+		height: var(--size-4);
+		width: var(--size-4);
+		border-radius: var(--radius-full);
+		background: var(--primary-600);
+		margin: 0 var(--spacing-xl);
+	}
+
+	.record-button {
+		height: var(--size-8);
+		width: var(--size-24);
+		background-color: var(--block-background-fill);
+		border-radius: var(--button-large-radius);
+		display: flex;
+		align-items: center;
+		border: 1px solid var(--block-border-color);
+	}
+
+	@keyframes scaling {
+		0% {
+			background-color: var(--primary-600);
+			scale: 1;
+		}
+		50% {
+			background-color: var(--primary-600);
+			scale: 1.2;
+		}
+		100% {
+			background-color: var(--primary-600);
+			scale: 1;
+		}
+	}
+</style>

sourceviewer/pyproject.toml

@@ -0,0 +1,54 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_sourceviewer"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "gradio-custom-component",
+  "gradio-template-Audio"
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_sourceviewer/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_sourceviewer"]