sonph / notion-drum-sheet

Minimal site for embedding drum sheets SVG in Notion. Based on GrooveScribe.

Home Page:https://sonpham.me/notion-drum-sheet

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Embedding Drum Notation in Notion

A barebone fork of GrooveScribe for embedding drum sheet notation in Notion.

GrooveScribe is a visual tool for musicians to annotate their drum grooves and fills. It is accessible at https://www.mikeslessons.com/gscribe or http://montulli.github.io/GrooveScribe/.

The original GrooveScribe project source code is at https://github.com/montulli/GrooveScribe.

notion with drum notations

How to use:

  1. Transcribe your drum groove or fill at one of the URLs listed above.

  2. Copy the link.

  3. Use the converter to convert the URL to an embeddable link.

  4. Embed the link in Notion with /embed and pasting the link.

  5. Clicking on the notation will take you to the original GrooveScribe page where you can edit and play the groove or fill.

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.

demo

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.

About

Minimal site for embedding drum sheets SVG in Notion. Based on GrooveScribe.

https://sonpham.me/notion-drum-sheet

License:Other


Languages

Language:JavaScript 86.8%Language:HTML 13.2%