Cross Browser MP3 Widget with Custom Rendering

This task involves writing a Javascript (or TypeScript) library to render and power an MP3 widget. The MP3 widget should look visually similar to the player on SoundCloud (*this is important*), except without all the extra non-playback-related buttons. The widget must expose methods to initialise/destroy and multiple instances must be supported. The code must be neat and well documented inline with JSDOC comments on every method. There is to be no static HTML - everything should be created using JavaScript. Required functionality: 1. Play/pause/skip. Only one instance on the page to play at once. Optional callbacks should be able to be set to receive play/pause/skip/complete events. 2. Volume. The volume level should be shared between all instances. The volume value should also be exposed, and an optional callback should be exposed for when the volume changes. 3. Custom Rendering: Explained below. 4. Right click callback: there should be an optional callback for when the visualisation is clicked on using the right mouse button. An argument should be included for the position in the audio file, in seconds, where the mouse was clicked. 5. Expose information about the media as methods: url, duration, position (others?) Custom Rendering: a. The amplitude of the audio should automatically be determined from the input media file (where supported by the browser). b. Optionally, this amplitude data can be overridden on initialisation by passing the initialisation method an array of float (of any size > 0), with values from 0 (no sound) to 1 (loudest). The start of the array represents the start of the media file and the end of the array represents the end. In practice, an array of about 256 will be provided. When rendering, this array should be used to determine the height of the visualisation at each point. c. Optionally (and additionally), another similarly structured array of indexes can be provided along with a mapping of index>colour. The goal here is to render different segments of the visualisation in different colours. Each element of the array represents an index of a colour (e.g. [0, 1, 2]) and the mapping will be an array where the index is the colour (e.g.['ff0000', '00ff00', '0000ff']). For example, the following would render a 2D pyramid (roughly, interpolation of values is not required), with the left side red and the right side blue: amplitudes = [0, 0.5, 1, 0.5, 0] colors = [0, 1] colorMapping = ['ff0000', '0000ff'] On successful completion of this task with quality code, there will be more work.