📱 For the best mobile ukulele experience, please rotate your device to landscape mode!

Component Preview

Interactive demonstration of the Mobile Ukulele component

🎛️ Interactive Controls

Mobile Ukulele component loaded! Use the controls above to interact with the component.

🎼 Popular Ukulele Chords

C Major
0-0-0-3
Easy
G Major
0-2-3-2
Medium
F Major
2-0-1-0
Medium
A Minor
2-0-0-0
Easy
D Minor
2-2-1-0
Medium
E Minor
0-4-3-2
Hard

Component Overview

The Mobile Ukulele component provides a touch-optimized ukulele interface designed specifically for mobile phones in landscape orientation. It features a fretboard with pressable fret buttons and a strum area where users can strum individual strings or play chords.

This interactive demo allows you to explore all the features and capabilities of the Mobile Ukulele component. Use the controls above to modify the component's behavior and see the results in real-time.

🎸 How to Play

  • Press Frets: Tap fret buttons to hold down frets (like pressing ukulele strings)
  • Strum Strings: Tap or swipe in the strum area on the right to play held frets
  • Play Chords: Press multiple frets simultaneously, then strum to play chords
  • Multi-touch: Support for multiple simultaneous touches for complex chords

🎵 Ukulele Tunings

  • Standard: G4-C4-E4-A4 (most common ukulele tuning)
  • Low-G: G3-C4-E4-A4 (lower G string for more range)
  • Baritone: D3-G3-B3-E4 (larger baritone ukulele)

📱 Mobile Optimization

  • Landscape Mode: Optimized for mobile phones in landscape orientation
  • Touch-Friendly: Large enough touch targets for reliable finger interaction
  • Responsive: Adapts to different screen sizes and device types
  • Multi-touch: Supports complex chord playing with multiple fingers

API Reference

The Mobile Ukulele component provides a comprehensive API for integration into your applications.

Attributes

  • tuning: Ukulele tuning (standard, low-g, baritone)
  • size: Interface size (mobile, tablet, desktop)
  • frets: Number of frets to display (4, 6, 8, 12)
  • show-notes: Whether to show note names on frets

Events Received

  • set-tuning: Changes the ukulele tuning
  • mute: Mutes all audio output
  • unmute: Unmutes audio output
  • highlight-chord: Highlights a chord on the fretboard

Events Dispatched

  • note-played: When a note is played (contains note, string, fret, frequency)
  • chord-played: When a chord is played (contains chord, notes, frets)
  • tuning-changed: When tuning changes (contains tuning, strings)
  • fret-pressed: When a fret is pressed (contains string, fret, note)
  • fret-released: When a fret is released (contains string, fret, note)

Component Events

The Mobile Ukulele component emits various events that you can listen to:

  • Note Playback: Fired when individual notes are played
  • Chord Playback: Fired when chords are played (multiple frets)
  • Fret Interaction: Fired when frets are pressed or released
  • Tuning Changes: Fired when the ukulele tuning is modified
  • Audio Events: Mute/unmute and audio context status changes

View the Event Log tab to see real-time events as they occur.

Usage Examples

Here are some common ways to use the Mobile Ukulele component in your projects:

Basic Usage

<mobile-ukulele></mobile-ukulele>

With Properties

<mobile-ukulele tuning="low-g" size="tablet" frets="8" show-notes></mobile-ukulele>

Event Listeners

ukulele.addEventListener('note-played', handleNotePlayed);

ukulele.addEventListener('chord-played', handleChordPlayed);

ukulele.addEventListener('fret-pressed', handleFretPressed);

Programmatic Control

ukulele.setAttribute('tuning', 'baritone');

ukulele.dispatchEvent(new CustomEvent('highlight-chord', {detail: {chord: 'C', frets: [0,0,0,3]}}));

ukulele.dispatchEvent(new CustomEvent('mute'));

Event Log

Component initialized