Android Example Display musical notation in your apps

I have been looking for ages for a suitable music renderer to use with Android, I looked at ABC4j, but it is built for Swing views and is not an easy port for Android.

I recently came across ABC for Javascript, which works surprisingly well with the WebView, and was not quite as bad to implement as I thought it might be, especially as I know very little about javascript.

There are two demo's, the first is for displaying snippets of music in an app using a WebView as part of the layout, the second is a simple ABC book reader.

ABC format music books are available all over the internet.

The first demo uses standard B4a libraries, but if you are having trouble getting some music to display, I suggest you download and enable Martin's WebViewExtras Library, specifically enable the ChromeClient, as it enables error logging from the Javascript on the WebView.

The second demo requires Martin's WebViewExtras Library, as there is two way communication between the Javascript and the android app.

The ABC music format takes some getting used to, but the output it provides is well worth the time take to learn the basics.

The MidiRenderer part of the library will not work with android as it uses an external plugin (but now see Andrews post below). I might get round to looking at the possibility of getting it just return a midi file when I get some more spare time.

There are two external Javascript libraries included in both demo's. The first is the ABCJS library (GNU GENERAL PUBLIC LICENSE Version 3), and the second is a Base64 encoder/decoder library from CodePlex (Apache 2.0 License)

Depends On: WebViewExtras

Additional Info / Reading:

ABC Javascript Library source and download : https://code.google.com/p/abcjs/downloads/list

Base64 javascript decoder library : http://jsbase64.codeplex.com/

Useful ABC Javascript specific info: https://code.google.com/p/abcjs/wiki/InstallationDocumentation

Main ABC Notation Wiki : http://abcnotation.com/wiki/abc:standard:v2.1#abc_file_structure


I hope you enjoy these examples.
 

Attachments

  • Demo1.zip
    104 KB · Views: 783
  • Demo2.zip
    106.7 KB · Views: 613
Last edited:

moster67

Expert
Licensed User
Interesting Steve.

I have been playing guitar and piano for ages and I have downloaded various notation from the web (piano scores, tab, chords and various other formats) but during all these years I have never heard about ABC-notation. The funny thing about it is that I learnt about it in a programming-forum :)

Something new to learn.....
 

stevel05

Expert
Licensed User
Something new to learn.....

Yes, we'll soon be introducing the 36 hour day so we can fit it all in.:)

I've known about it for a while, but never had a reason to get to deeply involved, there are quite a few editors available and one for Android too. Hopefully there may be a few more soon.
 

Andrew Pye

New Member
Licensed User
Hi Steve

Been having a play around with you demo great stuff.

I have managed to get the MidiRenderer to work

Added Dim MediaPlayer1 As MediaPlayer to the Globals
B4X:
Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Private JSDomain As String = "javascript:"
    Private SU As StringUtils
    Private BC As ByteConverter
    Dim MediaPlayer1 As MediaPlayer
End Sub

Rem out the renderAbc and un Rem the renderMidi in the BuildHTML
B4X:
    HTML.Append("    ABCJS.scale=0.5;" & CRLF)
    'HTML.Append("    ABCJS.renderAbc('notation',song,parserParams,printerParams,renderParams);" & CRLF)
    HTML.Append("    ABCJS.renderMidi('notation',song,parserParams,{program:2},renderParams);" & CRLF)
    HTML.Append("console.log('IH' + window.innerHeight);" & CRLF)
    HTML.Append("console.log('PR' + window.devicePixelRatio);" & CRLF)

Finnaly added OverrideUrl
this captures the Url when it is clicked then strips "data:audio/midi," and decodes the Url.
It then writes the data to midi file and the plays the file

B4X:
Sub WebView1_OverrideUrl (Url As String) As Boolean
    Dim SU As StringUtils
    Dim StrData As String
    Dim buffer() As Byte
    Dim out As OutputStream
  
    MediaPlayer1.Initialize( )'Set up media player
    StrData=Url.Replace("data:audio/midi,","")'Strip off the beginning bit
    StrData=SU.DecodeUrl(StrData,"ISO-8859-1")'Decode the url
    buffer = StrData.GetBytes("ISO-8859-1")'Change to byte array
    'Save the file to temp.mid
    out = File.OpenOutput( File.DirDefaultExternal, "temp.mid",  False)
    out.WriteBytes(buffer,0,buffer.Length)
    out.Close
    'Play the file
    MediaPlayer1.Load(File.DirDefaultExternal, "temp.mid")
    MediaPlayer1.Play

End Sub


Hope this is useful to someone.
 

stevel05

Expert
Licensed User
Nice,

Thanks for sharing.
 

avnersh

Member
Licensed User
Hi stave
First of all , thanks for sharing knowledge about music notation .
I start writing music learning app for kids and wanted to know if there is a way to paint or select one of the note using a function from b4a .
Thanks in advance
 

stevel05

Expert
Licensed User
Hi avnersh,

There is no in built way to do it as the library is just a renderer (draw only). In theory, you could edit the music file and redraw it. You would have to write the capture routine to know where to insert which note.
 

watesoft

Active Member
Licensed User
Hi avnersh,

There is no in built way to do it as the library is just a renderer (draw only). In theory, you could edit the music file and redraw it. You would have to write the capture routine to know where to insert which note.

I have been looking for ages for a suitable music renderer to use with Android, I looked at ABC4j, but it is built for Swing views and is not an easy port for Android.

I recently came across ABC for Javascript, which works surprisingly well with the WebView, and was not quite as bad to implement as I thought it might be, especially as I know very little about javascript.

There are two demo's, the first is for displaying snippets of music in an app using a WebView as part of the layout, the second is a simple ABC book reader.

ABC format music books are available all over the internet.

The first demo uses standard B4a libraries, but if you are having trouble getting some music to display, I suggest you download and enable Martin's WebViewExtras Library, specifically enable the ChromeClient, as it enables error logging from the Javascript on the WebView.

The second demo requires Martin's WebViewExtras Library, as there is two way communication between the Javascript and the android app.

The ABC music format takes some getting used to, but the output it provides is well worth the time take to learn the basics.

The MidiRenderer part of the library will not work with android as it uses an external plugin (but now see Andrews post below). I might get round to looking at the possibility of getting it just return a midi file when I get some more spare time.

There are two external Javascript libraries included in both demo's. The first is the ABCJS library (GNU GENERAL PUBLIC LICENSE Version 3), and the second is a Base64 encoder/decoder library from CodePlex (Apache 2.0 License)

Depends On: WebViewExtras

Additional Info / Reading:

ABC Javascript Library source and download : https://code.google.com/p/abcjs/downloads/list

Base64 javascript decoder library : http://jsbase64.codeplex.com/

Useful ABC Javascript specific info: https://code.google.com/p/abcjs/wiki/InstallationDocumentation

Main ABC Notation Wiki : http://abcnotation.com/wiki/abc:standard:v2.1#abc_file_structure


I hope you enjoy these examples.
Hi stevel. I am using ABCjs. Its soundfont file is located on the server. Paul said that it can be downloaded locally. I downloaded it and successfully ran on the PC via http-server, but I don’t know how to operate it on Android because there are always cross-domain errors.
 

stevel05

Expert
Licensed User
I've not looked at that at all so probably can't help much.

Does it have to be located on a server, or can you load it on the device? or maybe a server on the device?
 

watesoft

Active Member
Licensed User
I've not looked at that at all so probably can't help much.

Does it have to be located on a server, or can you load it on the device? or maybe a server on the device?
Thank you stevel. ABCjs uses XmlHttpRequest, means it uses "Http" protocol to access online soundfont files. Now I use offline soundfont,it is "File" protocal, so it always shows cross-domain errors. How to build a local http server and set rootdocument which stores soundfont files.
 
Last edited:
Top