[TW5] Music Notation and Midi Playback

[BurningTreeC]

Hi There,

Here's a prototype of a plugin that enables to write down (music) notes in abc notation

The ABCJS library then renders the tiddler to a great looking music score/sheet

Using sound-fonts and web-Midi one can also play the whole thing from within Tiddlywiki



There's a demo site: http://musicsheets.tiddlyspot.com

The Midi Playback doesn't work on FireFox (for me) at the moment ... but on Chromium/Chrome/TiddlyDesktop this should work. Mac/Safari/IE/Edge...  - I don't know



The plugin comes with the musicsheet Widget:

<$musicsheet tiddler="abc-notation-tiddler" midi="yes/no"/>

I hope to be able to improve it over time, so that it can show both the sheet and the audio player and update when the notation-tiddler changes
I put this plugin together in a hurry - it needs to be thought out better to integrate well in tw

have fun testing a bit if you like,
BTC

[@TiddlyTweeter]

That is seriously good!

I have it showing me the music score AND being able to play the tune on Chrome.

I'll comment later in more detail on small issues. But, basically, its brilliant!

Molto grazie.
Josiah

[BurningTreeC]

That is seriously good!

All kudos to https://github.com/paulrosen/abcjs ... deserves some more github stars!

I have it showing me the music score AND being able to play the tune on Chrome.

Wow, how you do that?

BTC

[BurningTreeC]

Here : https://configurator.abcjs.net/  is a configurator to explore what abcjs can do

That's basically what can be used with the future plugin, too
Trying to figure out what's good for TW

[@TiddlyTweeter]

Ciao BTC

I been playing with this as much as I can. Its one of nicest things I seen TW used for. I'm convinced a TW plugin for it will go places because it will add to the huge work that has been done already. HOW? by providing a simple way to gather tunes and play them.

On configuration. Well I tried out lots of the variants listed at: https://configurator.abcjs.net/audio concerned with the MIDI side. My question to myself was: what would I want visibly accessible? What would help me do what I do?

Conclusion:

1 - Display the LOOP TOGGLE on the player. (Background: Many tunes are short and you need listen a few times.)

2 - Change the INSTRUMENT NUMBER at will. (Background: MIDI defaults to instrument "0", which is Grand Piano. That is rarely the right sound. Just changing the "instrument" can be amazing. Footnote: some of the lists on the net of the MIDI instrument numbers are incorrect.)

3. - A MIDI FILE download button. (Background: if you want to import the file into a sound or film editor you need that).

Other options like Quarter notes per minute; Half-steps & Metronome options I think would be better dealt with inside "abc Tiddlers", rather than through the interface. Though the more musically-minded might disagree.

Best wishes
Josiah

[@TiddlyTweeter]

There is more than trad. folktunes in abc ... there are some really neat original compositions ...

X:1
T:Raincoat
C:Paul Haslem
R:Air
Z:Paul Haslem, Step out of Time cd
L:1/8
Q:1/4=126
M:4/4
I:linebreak $
K:D
|: "A part" B2 AG FGFE | D2 E2 E4 | B2 AG FGFE | D2 E2 E2 DE | "~"G6FG | "~"A6dc | B4 "~"E4 | E, :|"B part" e8- | e2 ef gf e2 | e8- | e2 ef gf e2 | ^c8 | c8 | B4 "~"E4 | E,8 |: "C part" BeBG ABAG | BAGF E4 | BeBG ABAG | BAGF E2 DE | "~"G2 Bd e2 dB | cdcB A2 dc | BcBA GAGF | E2 G,F, E,4 :| "D part"
e4 B4 | E2 ef gf e2 | e4 B4 | E2 ef gf e2 | ^c2 e2 g4 | c2 e2 g4 | BcBA GAGF | E2 G,F, E,4 |: "E part" b2 ag fgfe | d2 e2 e4 | b2 ag fgfe | d2 e2 e2 de | "~"g6fg | "~"a6d'c' | b4 "~"e4 | E8 :| "ending" e'4 b4 | e2 e'f' g'f' e'2 | e'4 b4 | e2 e'f' g'f' e'2 | ^c'2 e'2 g'4 | c'2 e'2 g'4 | bc'ba gagf | e2 GF E4 |]

[BurningTreeC]

@TiddlyTweeter
 

I been playing with this as much as I can. Its one of nicest things I seen TW used for. I'm convinced a TW plugin for it will go places because it will add to the huge work that has been done already. HOW? by providing a simple way to gather tunes and play them.

On configuration. Well I tried out lots of the variants listed at: https://configurator.abcjs.net/audio concerned with the MIDI side. My question to myself was: what would I want visibly accessible? What would help me do what I do?

Conclusion:

1 - Display the LOOP TOGGLE on the player. (Background: Many tunes are short and you need listen a few times.)

I'll have to dive deeper into abcjs - then we'll see
Maybe someone wants to help figuring things out - how to use the API and so on...

2 - Change the INSTRUMENT NUMBER at will. (Background: MIDI defaults to instrument "0", which is Grand Piano. That is rarely the right sound. Just changing the "instrument" can be amazing. Footnote: some of the lists on the net of the MIDI instrument numbers are incorrect.)

I'll have to dig deeper into how the soundfont gets passed to the midi player, I'm not doing that right at the moment
As you say, it uses the grand piano as default, right now I don't know where and how that can be set to something else
Your infos here are helpful, thank you!

3. - A MIDI FILE download button. (Background: if you want to import the file into a sound or film editor you need that).

Have you seen the "Click Me" button that plays a sound directly from a json tiddler, without using any plugins?
I've put some info on the page how that is done

Other options like Quarter notes per minute; Half-steps & Metronome options I think would be better dealt with inside "abc Tiddlers", rather than through the interface. Though the more musically-minded might disagree.

I think you're right and abcjs does that already - the abc syntax is something like: c c c c = 4 (how-do-you-call-that-in-english) eighth-c-notes ... 2c 2c 2c 2c = 4 quarter c notes and so on...
I haven't looked that good at the syntax... But it's something like that...

the BurningTreeC

[@TiddlyTweeter]

For adding changes the configurator at  https://configurator.abcjs.net/audio/ shows the difference in the JS code at the bottom. For LOOP you could just set it so. For INSTRUMENT NUMBER (program) you'd need a way to interact with the value in the JavaScript. For DOWNLOAD, how to prettify its display.

The code for LOOP, INSTRUMENT set to 7, and MIDI download is ...

import 'font-awesome/css/font-awesome.min.css';
import 'abcjs/abcjs-midi.css';
import abcjs from 'abcjs/midi;

abcjs.renderMidi(
    "midi-id",
    abcString,
    {
        program: 7,
        generateDownload: true,
        inlineControls: {
            loopToggle: true,
        },
        startingTune: 0,
    });

abcjs.midi.startPlaying(document.querySelector(".abcjs-inline-midi"));

abcjs.midi.stopPlaying();

//abcjs.midi.setSoundFont("");Enter code here...

I'm not myself good enough to know how to implement that.

Josiah

[BurningTreeC]

Thanks Josiah, this actually already helps

I'll take a look the coming days

[BurningTreeC]

Update on FireFox:

Latest FireFox 59.0.1 : If I disable my AdBlocker (ublock origin) I can playback the audio

It seems that abcjs uses remote audio files by default and right now actually doesn't use the soundfonts I've embedded within the Wiki (my adblocker blocks fetching the sources)
That's what I want to change, the plugin should be independent of remote sources and use a source tiddler passed to the musicsheet widget

[@TiddlyTweeter]

Ciao BTC

I opened it today to play a tune and noticed you have already updated parts of it.

FWIW, the REPLAY & DOWNLOAD MIDI both worked seamlessly for me.

Two small issues ...

1 - On Windows, both FF 52 & Chrome 65, 64-bit, the icons of the player don't appear ...

 

2 - Again, in Windows, both FF 52 & Chrome 65, the player and sheet music get separated if you narrow the browser window ... (that red line was supposed to be a circle not a debased Australia :)

 

Many thanks!
Josiah

[BurningTreeC]

Ciao BTC

Buonasera!
 

I opened it today to play a tune and noticed you have already updated parts of it.

Just parts with a demo on top to make clear what it is

FWIW, the REPLAY & DOWNLOAD MIDI both worked seamlessly for me.

Two small issues ...

1 - On Windows, both FF 52 & Chrome 65, 64-bit, the icons of the player don't appear ...

 

Yes, they don't appear because abcjs uses fontawesome icons and they need to be included ... or I change them ... that's not settled

2 - Again, in Windows, both FF 52 & Chrome 65, the player and sheet music get separated if you narrow the browser window ... (that red line was supposed to be a circle not a debased Australia :)

 

ah I see, I'll take a look at the abcjs stylesheet

Many thanks!
Josiah

you're welcome, what I'm up to next is modifying the viewtemplate so that one can set the tiddler type to text/abc and then the tiddler content gets directly rendered as a music score
then I want to make sort of a notes - keyboard that lets you insert the notes visually at the bottom of such an abc tiddler in view mode

stay tuned,
BTC

[@TiddlyTweeter]

BTC

On MIDI sounds ...

There is an incorrect assumption its "Tinny" in how it sounds, rather than a healthy "Woody" sound.

https://www.youtube.com/watch?v=-gwXJsWHupg

But to present the sounds well you need to be able to change the instrument numbers.

Just a side note
Josiah

[@TiddlyTweeter]

BTC

I want to make sort of a notes - keyboard that lets you insert the notes visually at the bottom of such an abc tiddler in view mode

You mean a kind of simple jamming-composer? Sounds good.

J.

[@TiddlyTweeter]

BTC

FYI. I did a test on the DOWNLOAD MIDI. I sent one to a composer I know. He put it in his music editor and it worked. This is more than fun for me. It practically helps me as I work with films scores. One thing I'll look into a bit more is getting him to send me a MIDI back and how to embed that.

Doubt it, but is there a MIDI to abc Notation convertor?

TT

[BurningTreeC]

There is an incorrect assumption its "Tinny" in how it sounds, rather than a healthy "Woody" sound.

https://www.youtube.com/watch?v=-gwXJsWHupg

But to present the sounds well you need to be able to change the instrument numbers.

more monty posts welcome

Midi is just a representation of sounds, their pitch, their length, their velocity and so on
The sound preset then defines how it sounds, can be good or bad depending on the preset quality

Being able to define the preset is my goal
 

FYI. I did a test on the DOWNLOAD MIDI. I sent one to a composer I know. He put it in his music editor and it worked. This is more than fun for me. It practically helps me as I work with films scores. One thing I'll look into a bit more is getting him to send me a MIDI back and how to embed that.

Yes, that works. It's standard midi, you can feed a synthesizer with it, you can load it in a digital audio workstation, it should all work.

Doubt it, but is there a MIDI to abc Notation convertor?

 

http://starboundcomposer.com/
I didn't look deeper into it but it was easy to find

You mean a kind of simple jamming-composer? Sounds good.

That's exactly what I mean
 

[BurningTreeC]

Update for  http://tiddlypiano.tiddlyspot.com/

it now uses the audio autoplay mechanics I figured out with the abcjs testing
plays the sounds now from an embedded json file
It's a Tuba-Piano now

BTC

[@TiddlyTweeter]

Piano Mk 2. I tried it on ...

Desktop FF 52, 64 bit Win 7 -- Somewhat muffled sound. With clicks.

Desktop Chrome latest, 64 bit Win 7 -- Cleaner sound but still not quite a piano. With clicks

Tablet FF 53, 64 bit Win 10 -- Notes only play once for a long time. Pressing key again nothing happens. Not so clicky.

I'm wondering if the differences are something to do with external to TW software on the PC that does the execution?

Still hopeful.

Josiah

[@TiddlyTweeter]

BTC, regarding the SoundFonts for ABC. Putting them all in a TW might be a bit much?

https://www.youtube.com/watch?v=5Sa_y4bwa2w

Since they are "fonts" could an argument not be made to install them locally in a sub-dir to the wiki?

FWIW, I was thinking that this superb MIDI composer / player / sheetmusic maker, could be a good candidate to wrap into TiddlyDesktop as a complete app for folk into music?

Josiah

[BurningTreeC]

Since they are "fonts" could an argument not be made to install them locally in a sub-dir to the wiki?

FWIW, I was thinking that this superb MIDI composer / player / sheetmusic maker, could be a good candidate to wrap into TiddlyDesktop as a complete app for folk into music?

Hi Josiah, when I find the time I think it gets there, yes

About sound fonts in sub dirs ... I don't even know how the sub-dir thing works. I understand that I can create directories within a tw folder and put stuff into it.
Will that stuff be kept external?