[tw] [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 <https://en.wikipedia.org/wiki/ABC_notation>

The ABCJS <https://abcjs.net> 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

Post by BurningTreeC
Hi There,
Here's a prototype of a plugin that enables to write down (music) notes in abc
notation <https://en.wikipedia.org/wiki/ABC_notation>
The ABCJS <https://abcjs.net> 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

[BurningTreeC]

Post by @TiddlyTweeter
That is seriously good!

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

Post by @TiddlyTweeter
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

Post by 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]

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

Post by @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.
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?
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...

Post by @TiddlyTweeter
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!

Post by @TiddlyTweeter
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

Post by @TiddlyTweeter
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

Post by BurningTreeC
@TiddlyTweeter

Post by @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.
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?
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...

Post by @TiddlyTweeter
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!

Post by @TiddlyTweeter
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

Post by @TiddlyTweeter
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

[BurningTreeC]

Thanks Josiah, this actually already helps

I'll take a look the coming days

Post by @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...

[@TiddlyTweeter]

Footnote on Firefox ...

BTC ...

Post by BurningTreeC
The Midi Playback doesn't work on FireFox (for me) at the moment ...

Nor me.

I think it may be to do with dumping extensions like QuickTime that used to
handle MIDI for it. There is an WebAPI for MIDI that replaces them. I'm not
sure whether its in Firefox or not.

I will try and find out more.

[BurningTreeC]

@TiddlyTweeter

it could be that FireFox simply doesn't support Web Midi:
https://caniuse.com/#feat=midi

[BurningTreeC]

actually: https://bugzilla.mozilla.org/show_bug.cgi?id=836897

bottom, last post


seems that it's coming to ff

[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

Found a problem on mine on firewall.

I've deleted/edited all my previous notes on Firefox so that a later reader
of the thread on GG won't get confused on FF by irrelevant notes. Maybe you
want to do same?

This message will auto-destruct in 24 hrs.

Josiah.

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

[@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, nn 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.

But to present the sounds well you need to access 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 DOWLOAD 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 cores. 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]

Post by @TiddlyTweeter
There is an incorrect assumption its "Tinny" in how it sounds, rather than
a healthy "Woody" sound.
http://youtu.be/-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

Post by @TiddlyTweeter
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.

Post by @TiddlyTweeter
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

Post by 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]

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

http://youtu.be/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]

Post by @TiddlyTweeter
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?