https://github.com/sonph/notion-drum-sheet
Minimal site for embedding drum sheets SVG in Notion. Based on GrooveScribe.
https://github.com/sonph/notion-drum-sheet
drums groovescribe notion-widgets
Last synced: 10 months ago
JSON representation
Minimal site for embedding drum sheets SVG in Notion. Based on GrooveScribe.
- Host: GitHub
- URL: https://github.com/sonph/notion-drum-sheet
- Owner: sonph
- License: other
- Created: 2024-04-15T22:39:44.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-29T01:59:19.000Z (12 months ago)
- Last Synced: 2025-07-26T08:01:56.625Z (11 months ago)
- Topics: drums, groovescribe, notion-widgets
- Language: JavaScript
- Homepage: https://sonpham.me/notion-drum-sheet
- Size: 10.8 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Embedding Drum Notation in Notion
A barebone fork of GrooveScribe for embedding drum sheet notation in
[Notion](https://www.notion.so/).
GrooveScribe is a visual tool for musicians to annotate their drum grooves and
fills.
## How to use:
1. Go to the [converter](https://sonph.github.io/notion-drum-sheet/index.html) tool.
2. Transcribe your drum groove or fill at https://sonph.github.io/GrooveScribe or https://montulli.github.io/GrooveScribe.
3. Copy the GrooveScribe URL.
4. Back at the converter tool, paste the copied URL into the input box. Click convert and copy this converted link.
5. In Notion, insert an embed block with `/embed` then paste the link.
Clicking on the embedded notation will take you to the original GrooveScribe page
where you can edit and play it.
## Demo
## FAQ
What does the "show tempo" box on the converter page do?
Check the "show tempo" box if you want to show the tempo and time signature
with the embedded notation.
This is useful if you collect different grooves and fills at different tempos
and time signatures.
Don't check it if the grooves and fills belong in the same song that plays at
a consistent tempo.
## Changes:
1. Make `GrooveEmbed.html` -> `render.html`.
2. Remove all included javascript and assets related to MIDI, sounds, sharing,
etc. You can still click on the notation to be linked to the full GrooveScribe
page where you can edit the notation and hear it.
3. An utility to convert a `https://www.mikeslessons.com/groove` link to an
embeddable link: https://sonpham.me/notion-drum-sheet.
4. Add a HTML query string to display tempo and time signature with the
notation. To use this, add `&EmbedTempoTimeSig=true` to the end of the URL.
## Development
1. Start a Python server:
```
python3 -m http.server
```
2. In a browser, open http://localhost:8000/