Most of the APP spectrum in the application market is achieved through H5, this scheme always feels a little unsatisfactory, many functions in the spectrum process are not good to display, such as: staff scaling problem, AB loop play and so on.

1. Basic knowledge of music theory

1.1 large system

  • What is a spectrum table? (Piano score is generally used in large score table, piano score as an example)

    The treble and bass clefs are connected by vertical lines and curly braces at the left end, which is called the large clef.

  • Treble and bass

    Treble notation: 🎼 Treble clef is the G clef written on the second line of the staff, indicating that the pitch of the second line in the clef is G1, which applies to the treble region. (From Baidu Baike, more specific content can be searched on Baidu)

    Bass notation: Bass notation refers to a musical notation. The treble has a central C line added below it, and the bass has a central C line added above it, and it is this line that connects the two, which is important.

  • The connection between treble and bass

    The treble has a central C line added below it, and the bass has a central C line added above it, and it is this line that connects the two, which is important.

1.2 notes.

1.2.1 Introduction to notes

1.2.2 Brief introduction of note Types

As shown in the following figureWhole notes half notes quarter notes eighth notes sixteenth notes

There are many other types of notes. For example:

  • Thirty-second notes
  • Sixty-four notes (very rare)
  • Dotted notes
  • Rests.
  • Rising and falling notes and so on
  • Even the notes.
  • Delay notes

, etc.

1.2.3 Calculation of note duration

Take the 4/4 beat as an example (a quarter note has four quarter notes in a beat) (♩ is the icon of a quarter note)

Note: 2/4 quarter notes are the length of two quarter notes in a beat

The tempo and speed will be marked in the upper left corner of the staff for example ♩ = 120

Figure out the duration of each note by identifying 120 quarter notes in a minute (0.5s)

Suppose a quarter note has a length of one unit

The crotchets Whole note Half note quaver Dotted half note Double dotted half note
1 4 2 0.5 2 + 1 2 + 1 + 0.5
0.5 s 2s 1s 0.25 s 1.5 s 1.75 s

2.MIDI file (SMF) conversion

2.1 Convert MIDI files to DATA in SVG format

2.1.1 Exporting SVG Data

Open MIDI files with notation software. There are many notation software on the market. There is an open source MuseScore which is very useful

2.1.2 Reading and parsing DATA in SVG format

Read the data in SVG format as follows

<polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" Points ="371.078,485.398 2763.78,485.398"/> <polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" Stroke-linejoin ="bevel" points="371.078,646.598 2763.78,646.598"/> <polyline class="StaffLines" fill="none" Stroke ="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,671.398 2763.78,671.398"/> <polyline Class ="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-linejoin="bevel" points="371.078,696.198 /> <polyline class="StaffLines" fill="none" stroke="#000000" stroke-width="2.73" stroke-Copy the code

2.1.3 Cleaning Data

Data to read:

â‘ â‘¡: the left of the vertical line of each bar â‘¢ : the coordinate of the symbol bar of the note

[{" lefeLine ": {/ / the left line" x ": 1," y ": 1," w ": 1, the" h ": 200}," rightLine ": {/ / on the right side of the line" x ": 1," y ": 1," w ": 1, the" h ": 200,}, "note":[ { "x":1, "y":1, "w":1, "h":200, }, { "x":1, "y":1, "w":1, "h":200, }, { "x":1, "y":1, "w":1, "h":200, }, ] } ]Copy the code

So according to the beat of the content of the section section in an array, the late convenient processing data, load the MIDI data according to the length and coordinates can be a corresponding relationship (as long as the time has not changed, each beat length is fixed, can according to the time the MIDI data for each event, and the coordinate data to corresponding again, This is just a general idea, but there are a lot of details to deal with when processing the data, such as connecting notes and so on, and then combining an algorithm with music theory knowledge.)

2.2 Convert MIDI files into staff images

MuseScore, an open source software, can transform MIDI to export data in formats such as staff images or SVG.