Karaoke

Karaoke is a dynamic and interactive media player for ryOS, designed to bring the joy of singing along to your favorite tunes right to your desktop. It provides a rich experience with synchronized lyrics, real-time translations, and helpful pronunciation guides, making it perfect for both entertainment and language learning.

Overview

The Karaoke app transforms your ryOS environment into a personal singing studio, offering a seamless blend of video playback and advanced lyric display. It's engineered for users who love to sing, practice foreign languages, or simply enjoy music with a deeper understanding of the lyrics. Users can effortlessly discover and add songs from YouTube, building a comprehensive music library that integrates directly with other ryOS media apps. Beyond basic playback, Karaoke provides extensive customization options for lyrics, including precise timing adjustments, visual styling, and linguistic aids like furigana for Japanese, romaji, or pinyin for Chinese, catering to a diverse global audience and varying learning objectives.

Features

Extensive Song Library & Discovery:
- Search for virtually any song directly through YouTube's vast catalog.
- Easily add songs to your personal library by pasting YouTube video URLs.
- Seamlessly shares and manages the same music library as the ryOS iPod app, ensuring your collection is accessible across both platforms.

Advanced Synchronized Lyrics:
- Experience immersive singing with perfectly synchronized lyrics displayed alongside the video.
- Fine-tune lyric timing with precision using [ and ] keys, mouse wheel scrolling, or intuitive drag gestures.
- Customize the visual presentation of lyrics with various font styles and layout options.
- Enhance language learning with built-in support for translations and pronunciation guides (e.g., furigana, romaji, pinyin).
Integrated Playback Controls:
- Standard play/pause functionality accessible via the on-screen controls or the Space key.
- Navigate through tracks and seek within songs using intuitive arrow key shortcuts.
Deep ryOS Integration:
- Control playback, adjust settings, and request specific songs through natural language commands in ryOS Chat by interacting with Ryo.
- Supports social listening sessions, allowing users to share and enjoy music together with friends.

User Guide

Getting Started

To begin your karaoke experience, launch the Karaoke app from your ryOS app launcher. Once open, you can either browse your existing music library or use the search function to find new songs on YouTube. Select a song to start playing it with synchronized lyrics.

Key Actions

Adding Songs: Click the "Add Song" option in the menu or toolbar. You can then search YouTube directly or paste a YouTube video URL into the provided field to add it to your shared music library.
Playing Songs: Navigate your song library using the interface. Click on any song's cover art or title to begin playback.
Adjusting Lyrics Timing: If the lyrics appear out of sync with the audio, you can adjust their timing offset. Use the [ key to move lyrics earlier or the ] key to move them later. Alternatively, scroll your mouse wheel over the lyrics display or click and drag the lyrics left/right for fine-grained control.
Customizing Lyrics Display: Access the app's settings (usually via the menu bar) to change font styles, layouts, enable or disable translations, and toggle pronunciation guides such as furigana, romaji, or pinyin.
Controlling Playback: Use the play/pause, seek, and track navigation buttons in the player interface or utilize keyboard shortcuts for quick control.

Tips & Shortcuts

Space: Play/Pause the current song.
Left Arrow: Seek backward in the current song.
Right Arrow: Seek forward in the current song.
Up Arrow: Play the previous track in your playlist.
Down Arrow: Play the next track in your playlist.
[ / ]: Adjust lyrics timing offset (move lyrics earlier/later).
You can also use the mouse scroll wheel over the lyrics display to fine-tune timing.
Leverage ryOS Chat: Ask Ryo to "play [song name] in Karaoke" or "pause Karaoke" to control the app using voice or text commands.

Technical Details

Window Configuration

Default size: 560×560px
Minimum size: 400×300px
Mobile: The app maintains a square aspect ratio (height = width) for optimal display on mobile devices.

Component Architecture

The app consists of 2 component file(s):

src/apps/karaoke/components/KaraokeAppComponent.tsx: This is the primary component that orchestrates the overall application layout, manages the main state, and integrates all sub-components such as the video player, lyrics display, and various dialogs.

src/apps/karaoke/components/KaraokeMenuBar.tsx: This component defines the application's menu bar, providing users with access to key features like adding songs, settings, help, and about information.

Hooks & Utilities

Custom Hooks:

src/apps/karaoke/hooks/useKaraokeLogic.ts: This essential custom hook encapsulates the core business logic for the Karaoke app. It manages playback state, orchestrates lyric synchronization, handles track management, and facilitates integration with various ryOS services and shared components.

No custom utility files are directly associated with this app.

State Management

The Karaoke app primarily manages its internal playback, lyric synchronization, and UI-specific states through the useKaraokeLogic custom hook. For broader system-wide audio preferences and settings, it integrates with ryOS's shared state management, specifically utilizing the useAudioSettingsStore (likely a Zustand store) to ensure consistent audio experiences across applications. User library data is also managed in a shared manner, accessible to related apps like iPod.

Related Apps

iPod: Karaoke shares the same underlying music library and core playback engine with the ryOS iPod app, allowing you to manage and access your song collection seamlessly from either application.

Chat: Integrate Karaoke with ryOS Chat to control playback, request songs, and adjust settings using natural language commands directed at Ryo, enhancing the hands-free experience.