{"id":50294747,"url":"https://github.com/chrisrobison/song-tool","last_synced_at":"2026-05-28T08:04:01.798Z","repository":{"id":295694845,"uuid":"990935351","full_name":"chrisrobison/song-tool","owner":"chrisrobison","description":"A sophisticated web-based music player application for band members to learn a complete album . This project provides an immersive learning experience for musicians with advanced stem isolation capabilities.","archived":false,"fork":false,"pushed_at":"2025-07-06T11:41:46.000Z","size":7732,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-06T12:40:53.904Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrisrobison.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-26T21:54:21.000Z","updated_at":"2025-07-06T11:41:49.000Z","dependencies_parsed_at":"2025-05-26T23:29:31.272Z","dependency_job_id":null,"html_url":"https://github.com/chrisrobison/song-tool","commit_stats":null,"previous_names":["chrisrobison/song-tool"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrisrobison/song-tool","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsong-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsong-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsong-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsong-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrisrobison","download_url":"https://codeload.github.com/chrisrobison/song-tool/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrisrobison%2Fsong-tool/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33599494,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-28T08:03:59.859Z","updated_at":"2026-05-28T08:04:01.789Z","avatar_url":"https://github.com/chrisrobison.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The Suicidal Kennedy's - Patriot Act Up\n\nAn interactive music learning platform showcasing the album \"Patriot Act Up\" by The Suicidal Kennedy's. This web application provides a sophisticated multi-track audio player with stem isolation, karaoke videos, and educational content for musicians.\n\n## 🎵 Features\n\n### Advanced Audio Player\n- **Multi-track synchronization** - Play full mix or isolated instrument stems\n- **Variable playback speed** - 0.75x to 1.25x for practice\n- **Interactive progress bar** - Click or drag to scrub through songs\n- **Individual stem control** - Solo, mute, and adjust volume for each instrument\n- **Seamless switching** between full mix and stem modes\n\n### Educational Content\n- **Instrument-specific charts** and notation for each song part\n- **Lyrics display** with expandable sections\n- **Karaoke videos** synchronized with audio playback (4-second offset compensation)\n- **Practice-focused design** for learning individual instrument parts\n\n### Technical Highlights\n- **Pure web standards** - No frameworks, vanilla JavaScript with Web Components\n- **Web Audio API** integration for precise multi-track synchronization\n- **Responsive design** optimized for both desktop and mobile\n- **Convention-based architecture** for easy content management\n\n## 🏗️ Architecture\n\n### Core Components\n\n```\n/\n├── index.html              # Main application with song selector\n├── song-player.js          # Custom web component for audio playback\n├── songs.json              # Central configuration for all tracks\n├── old-ui.html            # Alternative sidebar navigation interface\n└── [Song_Directory]/      # Individual song folders\n    ├── index.html         # Lyrics display\n    ├── karaoke.mp4        # Synchronized karaoke video\n    ├── song.mp3/.flac     # Full mixed audio\n    ├── lyrics.txt         # Plain text lyrics\n    ├── [instrument].html  # Instrument-specific charts\n    └── stems/             # Individual instrument tracks\n        ├── bass.wav\n        ├── drums.wav\n        ├── guitar.wav\n        ├── instrumental.wav\n        └── vocals.wav\n```\n\n### Song Player Web Component\n\nThe `\u003csong-player\u003e` custom element handles:\n- **Audio management** - Loading and synchronizing multiple audio tracks\n- **UI controls** - Play/pause, speed control, volume sliders, progress bar\n- **Stem isolation** - Real-time switching between full mix and individual parts\n- **Video synchronization** - Karaoke video playback with offset compensation\n- **Responsive layout** - Adaptive design for different screen sizes\n\n### Data Flow\n\n1. **songs.json** drives the main song selector dropdown\n2. **Song selection** creates a `\u003csong-player\u003e` instance with song data\n3. **Audio loading** happens asynchronously with metadata extraction\n4. **User interactions** trigger synchronized playback across all tracks\n5. **Content sections** load instrument charts and lyrics via iframes\n\n## 📁 Adding New Songs\n\n### 1. Prepare Audio Files\n\nCreate stems for your song using audio separation tools:\n- `bass.wav` - Bass guitar/synth parts\n- `drums.wav` - Drum kit and percussion\n- `guitar.wav` - Guitar parts (or use `instrumental.wav` for mixed instruments)\n- `instrumental.wav` - All non-vocal parts mixed\n- `vocals.wav` - Lead and backing vocals\n- `other.wav` - Special case for miscellaneous instruments\n\n### 2. Create Song Directory\n\n```bash\nmkdir Song_Name/\ncd Song_Name/\nmkdir stems/\n```\n\n### 3. Add Required Files\n\n**Audio Files:**\n```\nsong.mp3          # Primary audio (required)\nsong.flac         # High-quality version (optional)\nkaraoke.mp4       # Karaoke video with 4-second lead-in (optional)\n```\n\n**Content Files:**\n```\nindex.html        # Lyrics display page\ndrums.html        # Drum charts and notes\nvocals.html       # Vocal melody and lyrics\nlyrics.txt        # Plain text lyrics\n```\n\n**Instrument Charts (as needed):**\n```\nguitar.html       # Guitar tabs/chords\nbass.html         # Bass lines\nrhythm_guitar.html\nlead_guitar.html\nother.html        # For miscellaneous instruments\n```\n\n### 4. Update songs.json\n\nAdd your song to the main configuration:\n\n```json\n{\n  \"track\": 15,\n  \"folder\": \"Song_Name\",\n  \"title\": \"Your Song Title\",\n  \"overview\": \"index.html\",\n  \"karaoke\": \"karaoke.mp4\",  // or null if no video\n  \"audio\": {\n    \"mp3\": \"song.mp3\",\n    \"flac\": \"song.flac\"      // optional\n  },\n  \"parts\": [\n    { \"name\": \"Drums\", \"html\": \"drums.html\", \"stem\": \"stems/drums.wav\", \"notes\": \"\" },\n    { \"name\": \"Guitar\", \"html\": \"guitar.html\", \"stem\": \"stems/guitar.wav\", \"notes\": \"\" },\n    { \"name\": \"Bass\", \"html\": \"bass.html\", \"stem\": \"stems/bass.wav\", \"notes\": \"\" },\n    { \"name\": \"Instrumental\", \"html\": \"other.html\", \"stem\": \"stems/instrumental.wav\", \"notes\": \"\" },\n    { \"name\": \"Vocals\", \"html\": \"vocals.html\", \"stem\": \"stems/vocals.wav\", \"notes\": \"\" }\n  ]\n}\n```\n\n### 5. File Naming Conventions\n\n- **Directories**: Use underscores (`Song_Name`)\n- **Audio stems**: Always in `stems/` subdirectory as WAV files\n- **HTML files**: Lowercase with underscores (`rhythm_guitar.html`)\n- **Track numbering**: Sequential integers starting from 1\n\n### 6. Content Guidelines\n\n**Lyrics (index.html):**\n- Include song structure markers (verse, chorus, bridge)\n- Use semantic HTML for accessibility\n- Consider adding chord progressions inline\n\n**Instrument Charts:**\n- Provide tablature, chord charts, or notation as appropriate\n- Include tempo markings and key signature\n- Add practice notes and difficulty tips\n\n**Karaoke Videos:**\n- Ensure 4-second lead-in before lyrics begin\n- Use MP4 format for broad compatibility\n- Include visual cues for timing and phrasing\n\n## 🎸 Current Album\n\n**\"Patriot Act Up\"** features 14 tracks of political punk with themes including:\n- Amendment 22, Tariff Terror, Democracy's on Fire\n- Education Soul Doubt, Empty Storefronts, Great Highway to Nowhere\n- Coyotes Return, Moron Parade, Prop. K Parade\n- Punk with Benefits, Break Free, Technocratic Descent, Trade War\n\nEach song includes professionally separated stems and educational content for musicians learning punk rock instrumentation.\n\n## 🚀 Development\n\nNo build process required - this is a static web application using modern browser APIs:\n\n- **Web Components** for modular architecture\n- **Web Audio API** for multi-track synchronization\n- **ES6+ JavaScript** with shadow DOM encapsulation\n- **Progressive enhancement** with graceful fallbacks\n\nSimply serve the files from any web server to run the application.\n\n## 📱 Browser Support\n\n- **Chrome/Edge**: Full support including Web Audio API\n- **Firefox**: Full support with occasional sync timing differences\n- **Safari**: Supported with some Web Audio API limitations\n- **Mobile browsers**: Responsive design with touch-friendly controls\n\n---\n\n*Built for musicians, by musicians. Rock on! 🤘*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrobison%2Fsong-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisrobison%2Fsong-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisrobison%2Fsong-tool/lists"}