Libraries and Frameworks - sabflik/MPAi GitHub Wiki

JQuery

JQuery was chosen for its ease of use and its ability to simplify JavaScript code, making it very popular among web developers. Most libraries such as bootstrap are dependent upon this library and it is used to implement dynamic page behaviour. The Auto-complete library is a jQuery-based library that handles the functionality of the search bar for filtering and word suggestion.

Bootstrap

This is used for creating a responsive user interface that scales and rearranges components on the screen to best suit the display size of the device. This library uses a mobile-first approach to ensure that responsiveness is inherent. With pre-defined CSS classes, making use of its features is as easy as declaring the class of an HTML element. It also makes use of jQuery to define dynamic behaviour of certain components.

VideoJS

The media players are VideoJS components that support plugins for displaying waveforms and recording audio. Players are rendered inside HTML audio elements.They come with inbuilt methods for detecting microphone input and handling basic media player functionality. Audio can be loaded onto the player using the following code: player.waveform.load(pathToAudioFile). The controls are customisable and provide asynchronous events that can be hooked onto.

Wavesurfer

The Wavesurfer library is used as a plugin to display the waveform of the audio files. By default, it works with the VideoJS player to display the waveform of the currently loaded file, but the source can be changed to track live audio that is being recorded. The wavesurfer.microphone.min.js library code was tweaked to stop the microphone waveform from being displayed before the record button was pressed.

RecorderJS

This plugin is used by the VideoJS player in the Speak module to record audio blobs in a WAV format, which is the format that is expected by the speech analyser.

ChartJS

ChartJS provides a simple way of creating responsive graphs with animations. Charts are rendered inside HTML canvas elements. It offers a selection of a range of different graphs, of which the doughnut and timescale graphs are used in the application's scoreboard.

SQLite

SQLite is used to store the data for MPAi. It is entirely self-contained, and interfaces well with C#, as well as allowing queries to be made in pure SQL, allowing for easier development. It stores the data into an SQLite file on the server, which can be managed like any other file.