Add audio playback to beat library view

[vincemaina]

Allow users to play beats directly from the page listing all the beats.

• Stream audio directly from YouTube.
• Ensure that users can only play one beat at at time.

Some relevant resources:

1. How To Play Video And Audio From Youtube Using Python | Music | Stream | Video | Play | Pafy
2. How to create a YouTube audio player using Python?
3. Spashii's Music Server
4. Blog post
5. MODULE: mps-youtube
6. pafy MODULE

[vincemaina]

Okay, have started looking at this.

Thoughts

1. Fetching the audio stream links is quite a slow process. Best thing is to add these links to our database and have the program fetch them automatically, periodically.
2. Audio stream links are passed into out button/input elements. https://discuss.dizzycoding.com/how-to-pass-a-list-from-python-by-jinja2-to-javascript/
3. Event handling/listening could also be a good option
4. Guide on creating draggable seekbars: https://stackoverflow.com/questions/59544183/slider-seekbar-drag-function-for-the-audio-player-on-website

[vincemaina]

I'm not sure how well this is going to work.

Apparently the audio stream urls returned by pafy are intended specifically for the ip address that requested them. So I'm not sure what happens when someone tries to play the stream from their browser (aka the client.)

I've heard people talking about using the server as a proxy. That's probably what I'll need to look into if this doesn't work.

[vincemaina]

To do

• Get basic functionality working
• Buttons are a bit buggy. Sometimes you get a 404 error in the developer console. Not a big issue. I think if we set the JavaScript function to keep trying until it works this should fix the issue. After all, we've already verified on python side that these links all work, and clicking again seems to fix this issue, so maybe this will work too.
• Add draggable seekbar
• Add pop up sticky bar that display the details of the beat currently being played (like on beat starts). It should slide up from the bottom when the user starts playing beats.
• See if I can add fade ins and fade outs for beats to create a smoother playback experience.