Audio player as Component about lecshare

[aomi]

Looking into using this as the base and modifying to work with what we need. As it's written in TypeScript and looks pretty clean and easy to modify, adding the MaterialUI to this would probably suffice for us in the meantime.

https://github.com/erikras/audiocard

Edit: difficulty modifying, specifically with React hooks

[aomi]

Another method which has potential to integrate nicely with our goals would be using this. https://github.com/thangngoc89/react-howler
Howler.js appears to be a pretty popular library for handling audio and both react-howler and howler.js have TypeScript typings available.

[ryleyw]

Use Material UI slider to control time with howler.js to control audio play, stop and position.

[aomi]

removed react-howler and just using howler.js. Currently the play/pause functionality is working.

[aomi]

note: the loading of audio files seems slow given the current test audio files are quite small. I can see this being a problem when we load full lectures that would be the minimum 50 minute range.

[aomi]

Using requestAnimationFrame in react.
https://css-tricks.com/using-requestanimationframe-with-react-hooks/

Example of a audio player using howler.js
https://github.com/goldfire/howler.js/blob/master/examples/radio/radio.js

@ryleyw