### Start Development Server Source: https://github.com/ouestlabs/omi3/blob/main/README.md Starts the local development server for the Omi3 project. Requires dependencies to be installed first. ```shell pnpm dev ``` -------------------------------- ### Install @omi3/audio Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Instructions for installing the @omi3/audio package using various package managers like npm, yarn, pnpm, and bun. ```bash npm install @omi3/audio # or yarn add @omi3/audio # or pnpm add @omi3/audio # or bun add @omi3/audio ``` -------------------------------- ### Install @omi3/utils Source: https://github.com/ouestlabs/omi3/blob/main/packages/utils/README.md Instructions for installing the @omi3/utils library using either npm or pnpm package managers. ```bash npm install @omi3/utils ``` ```bash pnpm add @omi3/utils ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/ouestlabs/omi3/blob/main/README.md Installs all project dependencies using the pnpm package manager. Ensure Node.js (>=22) and pnpm are installed. ```shell pnpm install ``` -------------------------------- ### Omi3 Documentation Styleguide Source: https://github.com/ouestlabs/omi3/blob/main/CONTRIBUTING.md Markdown-based style guide for documenting the Omi3 project, including conventions for referencing classes and methods. ```markdown use Markdown reference methods and classes in markdown with the custom `{}` notation: - Class: `{ClassName}` - Method: `{ClassName.methodName}` ``` -------------------------------- ### Usage Example: Audio Player Integration Source: https://github.com/ouestlabs/omi3/blob/main/packages/ui/src/app/docs/page.mdx Demonstrates how to integrate the AudioPlayer component into a Next.js application. It shows basic usage within a page component. ```tsx import { AudioPlayer } from '@/components/ui/audio'; export default function MyPage() { return (

My Awesome Audio Player

{/* AudioPlayer includes its own Provider by default for quick use. See the component's code comments for how to move the Provider to a layout for global state if needed. */}
); } ``` -------------------------------- ### React: Basic Audio Controls with useAudio Hook Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Shows how to use the `useAudio` hook in a React component to get playback state and control playback (play/pause). It also illustrates conditional rendering based on the playback state. ```jsx import React from 'react'; import { useAudio, PlaybackState } from '@omi3/audio/react'; function MyAudioControls() { const { isPlaying, playbackState, play, pause } = useAudio(); const handlePlayPause = () => { if (isPlaying) { pause(); } else if (playbackState === PlaybackState.PAUSED || playbackState === PlaybackState.READY) { play(); } // Add logic for loading/playing when IDLE if needed }; return (
{/* Add more controls: load button, seek bar using useAudioTime, etc. */}
); } ``` -------------------------------- ### Add Omi3 UI Components via Shadcn CLI Source: https://github.com/ouestlabs/omi3/blob/main/packages/ui/README.md Adds components from the Omi3 UI registry to your project using the Shadcn CLI. Replace 'audio-player' with the desired component. This example uses pnpm, but can be adapted for npm, yarn, or bun. ```bash # Example using pnpm (adapt if using npm/yarn/bun) pnpm shadcn add 'https://omi3.ouestlabs.com/registry/audio-player' ``` -------------------------------- ### Import and Use Utilities from @omi3/utils Source: https://github.com/ouestlabs/omi3/blob/main/packages/utils/README.md Example of how to import and utilize functions from the @omi3/utils library within a TypeScript project. ```typescript import { someUtilFunction } from '@omi3/utils'; // Use the imported functions in your code ``` -------------------------------- ### React: Initialize AudioProvider Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Demonstrates how to wrap a React application's component tree with the AudioProvider to enable audio management features across components. ```jsx import { AudioProvider } from '@omi3/audio/react'; function App() { return ( {/* Your application components */} ); } ``` -------------------------------- ### Initialize Shadcn/ui CLI Source: https://github.com/ouestlabs/omi3/blob/main/packages/ui/src/app/docs/page.mdx Initializes the Shadcn/ui CLI in your project. This command sets up the necessary configuration for adding components from a registry. ```bash npx shadcn-ui@latest init ``` -------------------------------- ### Core Engine: AudioEngine Constructor Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Shows how to instantiate the standalone `AudioEngine` class from the core library. The `AudioContext` is initialized lazily upon first use. ```typescript // Core engine only import { AudioEngine } from '@omi3/audio'; const engine = new AudioEngine(); ``` -------------------------------- ### Initialize Shadcn/ui CLI Source: https://github.com/ouestlabs/omi3/blob/main/packages/ui/README.md Initializes the Shadcn/ui CLI in your project. This command sets up the necessary configuration for adding components. ```bash npx shadcn@latest init ``` -------------------------------- ### Audio Visualization with AnalyserNode Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Demonstrates how to access the analyserNode from the Omi3 Audio Engine to perform real-time audio analysis and create visualizations. It shows setting up a loop to fetch frequency data. ```typescript const { engine, analyserNode, isPlaying } = useAudio(); // Or use standalone engine React.useEffect(() => { if (isPlaying && analyserNode) { const dataArray = new Uint8Array(analyserNode.frequencyBinCount); let animationFrameId; const draw = () => { animationFrameId = requestAnimationFrame(draw); analyserNode.getByteFrequencyData(dataArray); // Use dataArray to draw visualization... // console.log(dataArray[0]); }; draw(); return () => cancelAnimationFrame(animationFrameId); } }, [isPlaying, analyserNode]); ``` -------------------------------- ### React: useAudio Hook Properties and Actions Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Lists the properties and actions returned by the `useAudio` hook, including playback state, current music details, buffering status, errors, and control functions like load, play, pause, seek, and setVolume. ```typescript // useAudio() returns memoized { ...state, ...actions } // State properties: // playbackState: PlaybackState (enum) // currentMusic: Music | null // isBuffering: boolean // error: { code?: number; message?: string } | null // isPlaying: boolean // isLoading: boolean // engine: IAudioEngine | null (Access to the core engine instance if needed) // isEngineInitialized: boolean // analyserNode: AnalyserNode | null // volume: number (0-1) // isMuted: boolean // Actions: // load: (music: Music, startTime?: number) => void // play: () => void // pause: () => void // seek: (time: number) => void // setVolume: (volume: number) => void ``` -------------------------------- ### Omi3 Audio Engine Methods Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Provides an overview of the core methods available in the Omi3 Audio Engine for controlling audio playback and managing resources. Includes methods for loading tracks, playback control, seeking, volume adjustment, and event handling. ```APIDOC load(music: Music, startTime?: number): Promise Loads a track into the audio engine. - music: An object conforming to the Music interface, containing track details like URL. - startTime: Optional. The time in seconds to start playback from. play(): Promise Starts or resumes audio playback. Requires user interaction due to browser autoplay policies. pause(): void Pauses the currently playing audio. seek(time: number): void Seeks to a specific time in the current track. - time: The target time in seconds. setVolume(volume: number): void Sets the playback volume. - volume: A number between 0.0 (silent) and 1.0 (maximum volume). dispose(): void Cleans up all resources used by the audio engine, stopping playback and releasing audio contexts. addEventListener(type: K, listener: (event: AudioEngineEventMap[K]) => void): void Adds an event listener for specific audio engine events. - type: The type of event to listen for. - listener: The callback function to execute when the event occurs. removeEventListener(type: K, listener: (event: AudioEngineEventMap[K]) => void): void Removes an event listener. - type: The type of event to remove the listener for. - listener: The listener function to remove. ``` -------------------------------- ### Core Engine: AudioEngine Properties Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Lists the key read-only properties of the `AudioEngine` class, including playback state, current track information, volume, duration, current time, buffering status, errors, and access to the AnalyserNode and frequency data. ```typescript // Properties: // - playbackState: PlaybackState (Readonly): Current state (IDLE, LOADING, READY, PLAYING, PAUSED, ERROR). // - currentMusic: Music | null (Readonly): Currently loaded track details. // - volume: number (Readonly): Volume level (0 to 1). // - duration: number (Readonly): Track duration in seconds. // - currentTime: number (Readonly): Current playback position in seconds. // - isMuted: boolean (Readonly): If audio is muted. // - isBuffering: boolean (Readonly): If the engine is buffering. // - lastError: { code: number; message: string } | null (Readonly): Last error details. // - analyserNode: AnalyserNode | null (Readonly): Web Audio AnalyserNode (after context init). // - frequencyData: Uint8Array | null (Readonly): Latest frequency data. ``` -------------------------------- ### Omi3 Development Workflow with Make Source: https://github.com/ouestlabs/omi3/blob/main/CONTRIBUTING.md This section details the `make` commands used for common development tasks in the Omi3 project, such as updating branches, syncing main from dev, cleaning local branches, pruning remote branches, and listing all commands. ```bash make update # or make update BRANCH=your-branch-name ``` ```bash make sync-main ``` ```bash make clean ``` ```bash make prune ``` ```bash make help ``` -------------------------------- ### Omi3 TypeScript Styleguide Source: https://github.com/ouestlabs/omi3/blob/main/CONTRIBUTING.md Guidelines for writing TypeScript code within the Omi3 project, emphasizing the use of `const`, template literals, and async/await. ```typescript prefer `const` over `let` use template literals instead of string concatenation use async/await instead of callbacks ``` -------------------------------- ### Add Audio Player Component Source: https://github.com/ouestlabs/omi3/blob/main/packages/ui/src/app/docs/page.mdx Adds the 'audio-player' component from the Omi3 UI registry to your project. This command copies the component's source code and dependencies into your project. ```bash npx shadcn-ui@latest add audio-player --registry-url https://registry.omi3.dev ``` -------------------------------- ### Omi3 Audio Engine Interfaces and Enums Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Defines the data structures and states used by the Omi3 Audio Engine. Includes the Music interface for track metadata, the PlaybackState enum for tracking playback status, and the AudioEngineEventMap for event definitions. ```APIDOC Music Interface: Defines the structure for music track data. Properties typically include: - url: string (URL of the audio file) - title: string - artist: string - artwork?: string (URL for album art) (See src/interfaces.ts for full definition) PlaybackState Enum: Represents the current state of the audio playback. Possible values: - IDLE - LOADING - READY - PLAYING - PAUSED - ERROR (See src/interfaces.ts for full definition) AudioEngineEventMap: Maps event names to their corresponding event detail types. Used with addEventListener and removeEventListener. (See src/interfaces.ts for full definition) ``` -------------------------------- ### Omi3 Core Audio Engine Features Source: https://github.com/ouestlabs/omi3/blob/main/README.md The core audio engine (`@omi3/audio`) utilizes the Web Audio API for robust audio playback management. It supports standard playback controls (play, pause, seek, volume), an event-driven architecture, buffering status, error handling, and audio analysis via `AnalyserNode`. ```APIDOC Omi3AudioEngine: - Playback Controls: play(), pause(), seek(time), setVolume(level) - Event Handling: addEventListener(eventType, listener) - State: bufferingStatus, errorState - Analysis: AnalyserNode integration for real-time audio data - Dependencies: Web Audio API ``` -------------------------------- ### Omi3 Utility Functions Source: https://github.com/ouestlabs/omi3/blob/main/README.md Provides shared utility functions for the Omi3 project, including formatting audio timestamps into human-readable strings. ```APIDOC Omi3Utils: - formatTime(seconds): Formats seconds into a MM:SS or HH:MM:SS string. ``` -------------------------------- ### React: useAudioTime Hook Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Explains the `useAudioTime` hook, which returns memoized `currentTime` and `duration` values. It's recommended for components requiring frequent time updates, such as seek bars, to optimize performance. ```typescript // useAudioTime() returns memoized { currentTime: number, duration: number } ``` -------------------------------- ### React: useAudioState Hook Source: https://github.com/ouestlabs/omi3/blob/main/packages/audio/README.md Describes the `useAudioState` hook, which provides a memoized subset of the state properties returned by `useAudio`, specifically for components that only need to display state information without performing actions. ```typescript // useAudioState() returns memoized subset of useAudio() containing only state properties. ``` -------------------------------- ### Omi3 Git Commit Message Styleguide Source: https://github.com/ouestlabs/omi3/blob/main/CONTRIBUTING.md Standards for writing Git commit messages in the Omi3 project, focusing on tense, mood, line limits, and referencing issues. ```markdown use the present tense ("Add feature" not "Added feature") use the imperative mood ("Move cursor to..." not "Moves cursor to...") limit the first line to 72 characters or less reference issues and pull requests liberally after the first line ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.