[WIP] Revive old audio viewer #2831

2019-09-01T11:47:27+02:00

Borewit commented

2019-09-01 11:47:27 +02:00

(Migrated from github.com)

Related to issue number: #2757

Restores the "old" audio player.

Start playing audio automatically after the audio viewer is activated.

I think the visualization leaves room for improvement. I propose to:

Keep displaying the main album cover
Improve the visualization of the metadata:
- artist
- track title
- track number, if applicable
- maybe the album the track is part of
Display audio format: container, codec, bit-rate
Cut out, the milk-drop visualization, maybe a small spectrum-analyzer instead

To attract artists releasing their music to LBRY, I think it would interesting to offer the possibility to release albums.

Related to issue number: #2757 Restores the "old" audio player. Start playing audio automatically after the audio viewer is activated. ---- I think the visualization leaves room for improvement. I propose to: - Keep displaying the main album cover - Improve the visualization of the metadata: - artist - track title - track number, if applicable - maybe the album the track is part of - Display audio format: container, codec, bit-rate - Cut out, the milk-drop visualization, maybe a small spectrum-analyzer instead To attract artists releasing their music to LBRY, I think it would interesting to offer the possibility to release albums.

neb-b commented

2019-09-01 13:56:00 +02:00

(Migrated from github.com)

Awesome!! 🙂

Excited to check this out! Probably won't get to it until tonight or tomorrow. I'll let you know!

Awesome!! 🙂 Excited to check this out! Probably won't get to it until tonight or tomorrow. I'll let you know!

tzarebczan commented

2019-09-03 18:53:23 +02:00

(Migrated from github.com)

@Borewit once this gets merged, make sure to send us an email so we can show you some appreciation for the contribution.

@Borewit once this gets merged, make sure to send us an email so we can show you some [appreciation](https://lbry.com/faq/appreciation) for the contribution.

neb-b (Migrated from github.com) requested changes

2019-09-03 18:59:06 +02:00

neb-b (Migrated from github.com) left a comment

I don't have many comments about the code (I guess the biggest one is that we can get rid of all the me declarations. We can just use this.

I think this still needs some style cleanup (that was the original reason it was removed. It's hard to tell where to seek (file with no metadata appear not to have the bottom "seeking" area), there are some issues when no metadata is found, and the metadata text is a little hard to read.

Another issue is if an audio file is playing and you navigate to another one, the old one continues to play and theres no way to get the new one to play without refreshing the page.

I don't have many comments about the code (I guess the biggest one is that we can get rid of all the `me` declarations. We can just use `this`. I think this still needs some style cleanup (that was the original reason it was removed. It's hard to tell where to seek (file with no metadata appear not to have the bottom "seeking" area), there are some issues when no metadata is found, and the metadata text is a little hard to read. <img width="400" alt="Screen Shot 2019-09-03 at 12 54 34 PM" src="https://user-images.githubusercontent.com/16882830/64193174-398db200-ce4a-11e9-9648-50801ff5a412.png"> <img width="400" alt="Screen Shot 2019-09-03 at 12 57 04 PM" src="https://user-images.githubusercontent.com/16882830/64193240-6215ac00-ce4a-11e9-9e1b-5711dc30c093.png"> Another issue is if an audio file is playing and you navigate to another one, the old one continues to play and theres no way to get the new one to play without refreshing the page.

package.json

					
				@ -53,2 +53,3 @@

				    "nodemon": "^1.19.1"

				    "nodemon": "^1.19.1",

				    "music-metadata-browser": "^1.2.3"

				  },

This should be a devDependency

This should be a `devDependency`

Borewit commented

2019-09-03 19:48:37 +02:00

(Migrated from github.com)

ToDo:

Get rid of all the me and just use this.
Address: if an audio file is playing and you navigate to another one, the old one continues to play and theres no way to get the new one to play without refreshing the page.
style cleanup:
- It's hard to tell where to seek
- there are some issues when no metadata is found
- metadata text is a little hard to read

ToDo: * [x] Get rid of all the `me` and just use `this`. * [ ] Address: if an audio file is playing and you navigate to another one, the old one continues to play and theres no way to get the new one to play without refreshing the page. * style cleanup: * [ ] It's hard to tell where to seek * [ ] there are some issues when no metadata is found * [ ] metadata text is a little hard to read

❤️ 1

tzarebczan commented

2019-10-15 19:48:35 +02:00

(Migrated from github.com)

@Borewit do you still plan to finish this up? We'd very much appreciate it!

@Borewit do you still plan to finish this up? We'd very much [appreciate it!](https://lbry.com/faq/appreciation)

Borewit commented

2019-10-17 20:34:36 +02:00

(Migrated from github.com)

@Borewit do you still plan to finish this up?

Not sure if I will finish it. I contribute almost every day a bit on open source coding. To get something done every day, that gives me satisfaction. I have to say, this is a bit of steep hill for me, I am not very experienced with React, it I pick up I first have to get everything in sync, debugging is tricky, and sometimes after a few runs the app leaves me in the dark, maybe corrupted profile.

To compensate my lack of experience, behind the scenes I approached some talented front-end developers, experienced in writing audio players. Developers I know from my user community of music-metadata, yet so far no luck someone jumping on it.

I created this issue initially to revive the old player. A saw that as a starting point, I am honestly not big fan of the look an feel. I agree with the all point of improvement given by @seanyesmunt: clear progress indicator, clear control, easy readable track metadata.

Imagine all of that is put in. The only thing what is left is the Milkdrop. I am not a fan of it, not in this application. I would say metadata, cover art. Between the buttons and progress bar, maybe a subtle spectrum analyzer line dancing. Subtle, but a proper high tech one, one with frequency scaled in octaves, how human perceive notes (@hvianna is a specialist in this area).

This step feels at the moment as bit to big for me.

> @Borewit do you still plan to finish this up? Not sure if I will finish it. I contribute almost every day a bit on open source coding. To get something done every day, that gives me satisfaction. I have to say, this is a bit of steep hill for me, I am not very experienced with React, it I pick up I first have to get everything in sync, debugging is tricky, and sometimes after a few runs the app leaves me in the dark, maybe corrupted profile. To compensate my lack of experience, behind the scenes I approached some talented front-end developers, experienced in writing audio players. Developers I know from my user community of [music-metadata](https://github.com/borewit/music-metadata), yet so far no luck someone jumping on it. I created this issue initially to revive the old player. A saw that as a starting point, I am honestly not big fan of the look an feel. I agree with the all point of improvement given by @seanyesmunt: clear progress indicator, clear control, easy readable track metadata. Imagine all of that is put in. The only thing what is left is the Milkdrop. I am not a fan of it, not in this application. I would say metadata, cover art. Between the buttons and progress bar, maybe a subtle spectrum analyzer line dancing. Subtle, but a proper high tech one, one with frequency scaled in octaves, how human perceive notes (@hvianna is a specialist [in this area](https://hvianna.github.io/audioMotion.js/public/)). This step feels at the moment as bit to big for me.

hvianna commented

2019-10-18 15:31:22 +02:00

(Migrated from github.com)

Subtle, but a proper high tech one, one with frequency scaled in octaves, how human perceive notes (@hvianna is a specialist in this area).

I recently released the spectrum analyzer I designed for audioMotion as a standalone module which can be integrated into other JavaScript applications.

Here's a demo of multiple instances of the analyzer running simultaneously, with different visualization options.

I don't have any experience with React though, and my code may be still a little messy, but I'm willing to keep improving it. Maybe it's a start? :)

>Subtle, but a proper high tech one, one with frequency scaled in octaves, how human perceive notes (@hvianna is a specialist [in this area](https://hvianna.github.io/audioMotion.js/public/)). > I recently released the spectrum analyzer I designed for audioMotion as a [standalone module](https://github.com/hvianna/audioMotion-analyzer) which can be integrated into other JavaScript applications. Here's a [demo of multiple instances](https://hvianna.github.io/audioMotion-analyzer/demo/multi.html) of the analyzer running simultaneously, with different visualization options. I don't have any experience with React though, and my code may be still a little messy, but I'm willing to keep improving it. Maybe it's a start? :)

tzarebczan commented

2019-10-28 15:36:31 +01:00

(Migrated from github.com)

@Borewit thank you for the reply - no worries! Can we show you some appreciation for the work thus far?

@hvianna please feel free to take a stab if you are interested. We tip in LBC for contributions :)

@Borewit thank you for the reply - no worries! Can we show you some [appreciation](https://lbry.com/faq/appreciation) for the work thus far? @hvianna please feel free to take a stab if you are interested. We tip in LBC for contributions :)

neb-b commented

2019-11-19 22:30:56 +01:00

(Migrated from github.com)

I'm going to close this for now. I think eventually we will re-open this to finish it up but it's not a high priority for now. Thanks for sharing those links @hvianna ! I'll check them out 🙂