Barbershop tags in numeric notation
numtags is a mobile-first web application designed specifically for barbershop singers to quickly find, learn, and share barbershop tags. Tags are short, harmonically rich pieces of music meant for spontaneous group singing. The app uses a custom numeric notation system that makes it easy to read, learn, and teach tags on any device.
- Search: Search by ID, title, lyrics, or arranger
- Mobile First: Optimized for mobile devices with PWA capabilities
- Share as Image: Generate images of tags to share
- Offline Ready: Works offline once loaded
- Filter & Sort: Filter by difficulty, arranger, or parts
- Open Source: Openly licensed and welcoming community contributions
- Dark Mode: Because let's face it, we mostly sing tags at afterglows
numtags uses a straightforward numeric notation system where numbers represent scale degrees:
1 = Root (Do)
2 = Second (Re)
3 = Third (Mi)
4 = Fourth (Fa)
5 = Fifth (So)
6 = Sixth (La)
7 = Seventh (Ti)
Each line represents a different voice part (Tenor, Lead, Baritone, Bass), and the numbers show which scale degree to sing. Dots above and belowe show which octave the note is in.
Tenor: 3 - 3 - | 4⁀4 3 - |
Lead: 1 - 1 - | 1⁀7̣ 1 - |
Baritone: 5̣ -♭7̣ - | 6̣⁀5̣ 5̣ - |
Bass: 1̣ - 5̣ - | 4̣⁀2̣ 1̣ - |
"My town, my town."
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/bumbleblue/numtags.git
cd numtags- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
npm run buildThe built files will be in the build directory, ready for deployment.
tag-along/
├── src/
│ ├── lib/
│ │ ├── components/ # Reusable Svelte components
│ │ ├── data.ts # Data management and search
│ │ └── types.ts # TypeScript type definitions
│ ├── routes/ # SvelteKit pages
│ ├── app.css # Global styles
│ └── app.html # HTML template
├── static/ # Static assets
├── data/ # Tag data (Markdown + YAML)
└── package.json
Tags are stored as Markdown files with YAML frontmatter:
---
title: "So Tired of Waiting For You"
tag_id: 53
arranger: "Renee Craig"
difficulty: "Medium"
source_url: "https://www.barbershoptags.com/tag-53-So-Tired-of-Waiting-for-You"
date_added: "2008-12-15"
parts: 4
lyrics: "So tired of waiting for you."
comments: ""
original_key: "G"
---
| 1 3 5 | 4 6 - 1̇ | 1̇ — |
| 1 1 ♯1 | 2 ♭3 - 4 | 3 — |
| 1 ♭7̣ 6̣ | 1 1 - ♭6̣ | 5̣ — |
| 1 5̣ 3̣ | 6̣ 4̣ - 2̣ | 1̣ — |
So tired of wait-ing for you.When creating tags, consider mobile display:
- Each staff contains 4 voice parts followed by their lyrics
- Use double newlines to separate different staffs
- Lyrics appear at the bottom of each staff
- Test your tag on mobile devices before submitting
- Long staffs will scroll horizontally on mobile to preserve musical structure
- Each complete musical phrase (4 voices + lyrics) stays together as one unit
We welcome contributions! Here's how you can help:
- Create a new Markdown file in the
data/tags/directory - Use the format shown above with proper YAML frontmatter
- Submit a pull request
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the existing code style
- Add TypeScript types for new features
- Test your changes thoroughly
- Update documentation as needed
numtags is a Progressive Web App with the following features:
- Offline Support: Works without internet connection
- Installable: Add to home screen on mobile devices
- Fast Loading: Optimized for quick access
- Responsive: Works on all device sizes
- Framework: SvelteKit
- Styling: TailwindCSS
- Search: Fuse.js
- PWA: Service Worker + Manifest
- Deployment: Static hosting (Netlify)
This project is licensed under the MIT License - see the LICENSE file for details.
By contributing to numtags, you agree to the following terms:
- Source Attribution: All tags are sourced from barbershoptags.com and are only rewritten in our numeric notation system
- Original Links: We maintain links to the original publication location on barbershoptags.com
- CC0 License: Any copyright generated through tag translations or contributions to this project shall be licensed under CC0 1.0 Universal (Public Domain)
- No Original Composition: We do not create original musical content - only translate existing tags into numeric notation
- MIT License: The website code is licensed under the MIT License
- Contributions: By contributing code, you agree to license your contributions under the MIT License
When you contribute tag translations or other content to numtags, you:
- Confirm that you are translating from the original source on barbershoptags.com
- Agree to license any copyright in your contributions under CC0 1.0 Universal
- Understand that we maintain attribution to the original source
- Accept that your contributions will be freely available to the public domain
This ensures that all tag translations remain freely available and that we respect the original sources while making barbershop tags more accessible through numeric notation.
- GitHub Issues: Report bugs or request features
- GitHub Discussions: Join the conversation
Made with ❤️ for all of you barbershop-obsessed people!