a track or across tracks, duplicate an event, resize
an event (i.e. cut an event before its natural end);
• Sample Library Operations – List available
samples, add self-produced samples to the project
library, search by name or family;
• Transport Operations – Play/pause, rewind,
monitor and alter the playback point;
• Project Operations – Rename the project, syn-
chronize project copies (upload and/or download),
change tempo, change the time signature.
The mentioned functions are those available to
any user. There are also features that depend on the
specific user’s profile. For example, a teacher has
complete visibility on the project, with the possibil-
ity to change its general properties and operate on all
users’ tracks, whereas a standard user is enabled to
act on his/her part of the project only. Moreover, the
prototype described in this paper is still lacking some
key functions, such as user-profile customization and
cooperative tools (e.g., chat and file sharing).
4.3 Graphical User Interface
In order to ensure full compatibility with HTML5
web browsers, several standard languages and for-
mats approved by the World Wide Web Consor-
tium (W3C) have been employed for the implemen-
tation of the client. In particular, HTML (Hyper-
Text Markup Language) version 5, a language to de-
scribe static hypertext documents, provided the logi-
cal structure of the web page. CSS (Cascading Style
Sheets) version 3 was adopted to define the format-
ting and graphic appearance of the client; in detail,
we used SCSS (Sassy CSS superset), that is a syntac-
tical variant for the CSS Sass preprocessor equipped
with some relevant extensions (variables, functions,
etc.). JavaScript was adopted as the reference client-
side scripting language. Web Audio API and Web
MIDI API constituted the low-level JavaScript-based
libraries for handling audio and MIDI events, respec-
tively; moreover, Tone.js was also employed as the
high-level JavaScript-based library for handling audio
events. React, another JavaScript library, was use-
ful for creating user interfaces updated on the base
of state changes; thanks to this technology, modifica-
tions in data structures are automatically reflected in
the graphic interface and vice versa. JSON, a struc-
tured plain-text format, was selected as the means to
exchange data between the server and the client in
response to web-service calls. Finally, PHP (PHP:
Hypertext Preprocessor) was the interpreted script-
ing language running server-side to process client re-
quests.
The resulting graphical user interface is shown in
Figure 1. The main area is taken by the visual repre-
sentation of tracks and their sound events (i.e. the se-
quencer part). The left column provides the tracklist,
the right one contains the sample library, and the up-
per part presents performance controls. Colors can be
used to improve the project’s organization and struc-
ture, e.g., to highlight the work by different users or
group instrumental families. Unlike typical DAWs, in
order to keep the interface simpler, a mixer part is not
present as an independent area, whereas mixing ac-
tions (such as changing volume and pan) are already
available in the left part. In other words, this part can
be considered as a vertical mixer.
Currently, the interface is available in Italian only,
since it is the result of a national-funded project; but
the platform is ready to be localized in other lan-
guages, too.
5 EXPECTED EDUCATIONAL
OUTCOMES
Considering the advances for educational research,
the learning environment is expected to have a high
potential thanks to the analysis of i) user data, ii) per-
formance data, and iii) experimental data.
Concerning the former aspect, even if users are
anonymized (i.e. identified only by a nickname in the
platform), available data can be analyzed to extract
relevant information. Needless to say, user statis-
tics such as participants’ age, grade, school type, and
country can help define the typical use cases of such
a learning tool. But even more, relevant information
can be obtained from the analysis of users’ behav-
ior: e.g., where, when, how frequently, and how long
learners use the platform, how many learners coop-
erate on a single project (huge class assignments vs.
small-group projects), how many intersections occur
in their cooperation (in-parallel vs. in-sequence op-
erations), and so on. Please note that the mentioned
aspects disregard the musical aspects and the disci-
plinary learning aims of the platform.
The analysis of users’ performances, intended as
the musical outcome of learning activities, is another
area to be evaluated. Even if the practical outcome
is the collaborative creation of a music piece, such
a result is necessarily based on a number of skills:
the ability to plan a music piece both “vertically”
(number, type, and family of instruments) and “hor-
izontally” (structure and sections), the ability to se-
lect and organize suitable music materials (samples,
loops, etc.), the technical skills to adjust tempo, vol-
ume, panning, and so on. Soft skills are required
CSME 2022 - 3rd International Special Session on Computer Supported Music Education
462