paulrosen / abcjs

javascript for rendering abc music notation
Other
1.94k stars 285 forks source link

Here is some help for futurs drum notation writters 😄 #753

Closed airdev-web closed 2 years ago

airdev-web commented 2 years ago

Greetings from Belgium!

I was looking for a nice drum sheet writting library and found yours by chance!

I struggled at the begining but now, if some new people need a quick sheet for writing drums, here is it : (Feel free to ask me if you need help writing some music code if you have in mind to write a drum documentation. I think it will help a lot of people !)

Result :

image

And the code :

X:1\ T:Drum Kit M:4/4 L:1/16 U:n=!style=x! K:perc\n V:all stem=up [F2na2]ng2 [c2ng2][ng]F [F2ng2][F2ng2] [c2ng2]ng2 | ce3c c2d2 (6cccccc (6ddddAA [F2na2][F2ng2] [c2ng2][ng2] [F2ng2][F2ng2] (3c2c2c2 [F2na2][F2ng2] [c2ng2][ng2] [F2ng2][F2ng2] !<(!(6[cA][cA][cA][cA][cA]][cA] [F2na2][F2ng2] [c2ng2][ng2] [F2ng2][F2ng2] ceA [F2na2][F2ng2] [c2ng2][ng2] F2c2 cc!open!ng !<(![c2A2][c2A2][c2A2][c2A2] [c2A2][c2A2][c2A2]!<)![c2A2] [F2na2][F2ng2] [c2ng2][ng2] [F2ng2][F2ng2] {/c}c2F2{/c}c2F2 [na2c2]F2F2[na2c] F2F2 [na4c4] [F2na2][F2ng2] [c2ng2][ng2] c2e2 ccA [F2na2][F2ng2] [c2ng2][ng2] e3c c2A2 [F2na2][F2ng2] [c2ng2][ng2] [F2ng2]cc cccc

paulrosen commented 2 years ago

Thanks so much for the example! I've wanted to create an example for percussion for a while.

There is also "percmap" which will translate pitches to both a visual style and audio. For instance, if you paste the following into https://editor.drawthedots.com/ you can see what it sounds like:

X:1
T:percmap
%%percmap D  pedal-hi-hat x
%%percmap E  bass-drum-1
%%percmap F  acoustic-bass-drum
%%percmap G  low-floor-tom
%%percmap A  high-floor-tom
%%percmap B  low-tom
%%percmap ^B tambourine   triangle
%%percmap c  acoustic-snare
%%percmap _c electric-snare
%%percmap ^c low-wood-block   triangle
%%percmap =c side-stick x
%%percmap d  low-mid-tom
%%percmap ^d hi-wood-block    triangle
%%percmap e  hi-mid-tom
%%percmap ^e cowbell      triangle
%%percmap f  high-tom
%%percmap ^f ride-cymbal-1
%%percmap g  closed-hi-hat
%%percmap ^g open-hi-hat
%%percmap a  crash-cymbal-1  x
%%percmap ^a open-triangle     triangle
Q:1/4=50
K:C perc
DEFG AB^Bc _c^c=cd ^de^ef ^fg^ga ^a
airdev-web commented 2 years ago

Waw, that’s awesome, thanks !

do you know if there is a way to change drum sounds ? Then change reverb and other things ?

Is this sound feature included inside your js library ?

paulrosen commented 2 years ago

Yes, the sound feature is part of the library. Note that it is not intended to be a studio-quality drum machine. It is more intended to try things out.

There are a couple ways to change the sounds - the easiest is to change the percmap settings to other parts of the percussion "pitches". The list of values they can be are:

        "acoustic-bass-drum",
        "bass-drum-1",
        "side-stick",
        "acoustic-snare",
        "hand-clap",
        "electric-snare",
        "low-floor-tom",
        "closed-hi-hat",
        "high-floor-tom",
        "pedal-hi-hat",
        "low-tom",
        "open-hi-hat",
        "low-mid-tom",
        "hi-mid-tom",
        "crash-cymbal-1",
        "high-tom",
        "ride-cymbal-1",
        "chinese-cymbal",
        "ride-bell",
        "tambourine",
        "splash-cymbal",
        "cowbell",
        "crash-cymbal-2",
        "vibraslap",
        "ride-cymbal-2",
        "hi-bongo",
        "low-bongo",
        "mute-hi-conga",
        "open-hi-conga",
        "low-conga",
        "high-timbale",
        "low-timbale",
        "high-agogo",
        "low-agogo",
        "cabasa",
        "maracas",
        "short-whistle",
        "long-whistle",
        "short-guiro",
        "long-guiro",
        "claves",
        "hi-wood-block",
        "low-wood-block",
        "mute-cuica",
        "open-cuica",
        "mute-triangle",
        "open-triangle",

To actually use a sound that isn't in the soundfont already, though, requires you to create your own soundfont. You would have to follow the pattern in https://github.com/paulrosen/midi-js-soundfonts/tree/gh-pages/abcjs/percussion-mp3 and host the sounds somewhere (you can use github pages just like these soundfonts do). Then you specify the path to your soundfont when you create the synth. See https://paulrosen.github.io/abcjs/audio/synthesized-sound.html#init-synthoptions for info.

If you create a soundfont that sounds better that the current one and you want to share it, you can create a pull request here: https://github.com/paulrosen/midi-js-soundfonts.

Changing reverb and doing other studio things isn't possible currently. I don't have the expertise to write it but I would accept that as a pull request, too, and would answer questions about how to approach it. The closest you can do now is create a MIDI version then feed that into some program that accepts midi.

airdev-web commented 2 years ago

Hi there!

I can figure out out to change my sound. I'm using K:C perc and the sound is different than a piano, but actually not like the perc you send me with the link.

Here is my code :

// First render
var notes = document.getElementById('notes').value.trim();

var visualObj = abcjs.renderAbc(["target1"], base + notes + '\nx')[0];

document.getElementById('play').addEventListener('click', function() {
    var myContext = new AudioContext();

    synth.init({
        audioContext: myContext,
        visualObj: visualObj,
        millisecondsPerMeasure: visualObj.millisecondsPerMeasure(),
    }).then(function (results) {
        console.log('Initialized')
        return synth.prime();
    }).then(function() {
        synth.start();
    }).catch(function (reason) {
        console.log(reason)
    });
})

Any idea ?

airdev-web commented 2 years ago

Also I have just copied your percmap lines, so here is how it looks like.

var base = "X:1\n" +
    "T:Drum Kit\n" +
    "%%percmap D  pedal-hi-hat x\n" +
    "%%percmap E  bass-drum-1\n" +
    "%%percmap F  acoustic-bass-drum\n" +
    "%%percmap G  low-floor-tom\n" +
    "%%percmap A  high-floor-tom\n" +
    "%%percmap B  low-tom\n" +
    "%%percmap ^B tambourine   triangle\n" +
    "%%percmap c  acoustic-snare\n" +
    "%%percmap _c electric-snare\n" +
    "%%percmap ^c low-wood-block   triangle\n" +
    "%%percmap =c side-stick x\n" +
    "%%percmap d  low-mid-tom\n" +
    "%%percmap ^d hi-wood-block    triangle\n" +
    "%%percmap e  hi-mid-tom\n" +
    "%%percmap ^e cowbell      triangle\n" +
    "%%percmap f  high-tom\n" +
    "%%percmap ^f ride-cymbal-1\n" +
    "%%percmap g  closed-hi-hat\n" +
    "%%percmap ^g open-hi-hat\n" +
    "%%percmap a  crash-cymbal-1  x\n" +
    "%%percmap ^a open-triangle     triangle\n" +
    "Q:1/4=85\n" +
    "M:4/4\n" +
    "L:1/16\n" +
    "U:n=!style=x!\n" +
    "K: C perc\n" +
    "V:1 stem=up clef=perc\n"; // Then my notes...

It's kind of working when adding this, but the sound is not pretty compared to the link you sent me :

    "%%MIDI program 0\n" +
    "%%MIDI drummap F 36 %bass drum 1\n" +
    "%%MIDI drummap c 38 %acoustic snare\n" +
    "%%MIDI drummap _D 44 %pedal hi-hat\n" +
    "%%MIDI drummap ^f 51 %ride cymbal 1\n" +
    "%%MIDI drummap a 49 %crash cymbal 1\n" +
    "%%MIDI drummap ^b 52 %chinese cymbal\n" +
    "%%MIDI drummap e 50 %high tom\n" +
    "%%MIDI drummap d 48 %hi mid tom\n" +
    "%%MIDI drummap B 45 %low tom\n" +
    "%%MIDI drummap A 41 %low floor tom\n" +
    "%%MIDI drummap g 42 %closed hi hat\n";

Any help would me really appriciated!

paulrosen commented 2 years ago

I don't think you need the %%MIDI drummap lines. The %%percmap should be enough. If, instead of base + notes + '\nx' what happens if you use exactly the ABC string I pasted above?

Also, some little things that aren't the problem but could be improved: 1) You don't need the last x here: '\nx' 2) In your example you set the style of the notes "U:n=!style=x!\n". That's ok, but if you'll notice on the percmap that there is an optional style on each line. Notice the "x" and "triangle". So you can set the style of individual drums.

paulrosen commented 2 years ago

If you have any other questions, let me know.

MarieComet commented 1 year ago

@airdev-web thanks you so much for the drums examples !