feat equalizer

[c-jacquin]

I replace react-sound by a react component with same props wrapping an audio tag.
I think next steps are:

• add an equalizer view ? (or any other ui solution, modal ?)
• add an equalizer component using semantic-ui range input
• store equalizer value in redux
• use the equalizer value in Audio component with AudioContext api
• replace range input by a chart.js magic thing
• define presets value for equalizer
• replace dumb presets with good ones
• optional visualization

[nukeop]

Awesome, the sound component itself could even be published as your own package since it exposes the same API as react-sound and could serve other people interested in replacing it.
Remember to remove package-lock so we don't inflate the LOC changed in the commits. I'll test how this works in practice in the evening.

[c-jacquin]

Good idea for the package, will check wich names are available.
Sorry for the lockfile, i will add it in the .gitignore (i know myself i will do it again otherwise)

[nukeop]

The equalizer itself could be created using the same sliders as the volume component, but vertically, or we could do something more fancy using chartjs, like this: https://cdn.guidingtech.com/media/assets/WordPress-Import/2016/04/apple-music-itunes-spotify-eq-equalizer-5.png

[nukeop]

You can also use .npmrc (and commit it if you want) https://codeburst.io/disabling-package-lock-json-6be662f5b97d?gi=c28afc04af04

[c-jacquin]

i love the idea of chart.js
i will first poc with simple vertical slider and then think more about it.

[nukeop]

As for chartjs, I've used it a lot at work, and created a little widget with it here: https://github.com/nukeop/react-ui-cards#cryptocurrency-card

So we could reuse the part of config for those cards to make a fancy equalizer. Not sure if it's possible to drag the points on the chart easily though.

[c-jacquin]

everything is possible with chart.js ;)

[c-jacquin]

Where do you imagine the equalizer in the ui ?

• its own view ?
• a popup with a button near the seekbar ?
• somewhere else ?

[nukeop]

I think it could occupy its own view, with a button to access it somewhere in the settings.

[nukeop]

do you have a screenshot of your work at the moment? can't wait to see it in action

[c-jacquin]

[c-jacquin]

didnt notice i hav a little size problem i update this in 5 min

[nukeop]

looks really awesome

[c-jacquin]

better like this

[c-jacquin]

For the presets we could:

• persist some equalizer configurations
• add a saveAs feature
• load the configurations and the selected one at startup and store in redux
• add a list exactly like the spotify equalizer
• add a few endpoints in the http api

[c-jacquin]

We can also imagine some sound visualition as bar chart just behind the line chart

[c-jacquin]

And make the equalizer usage optional

[c-jacquin]

i force push because i rebase locally to resolve conflict before the big mess. sorry for the spam :)

[c-jacquin]

We could make the equalizer customizable by putting the frequencies used by the equalizer (and sound component) in the settings and make them editable.

[c-jacquin]

I have put the Sound component in another module: https://github.com/charjac/react-sound-html5.
docs here => https://charjac.github.io/react-sound-html5/

The last important thing to do is to replace dumb presets by reel ones.
I have no idea where i can find help to do this, if someone has any clue ?

[nukeop]

Awesome, fantastic work, as always.

A good start would be to just copy some presets by eye from iTunes or whatever. If it ends up sounding off, we can correct it with another PR later.

[c-jacquin]

i add :

• frequencies and some presets from https://webamp.org/.
• preamp input like winamp or itunes
• optional visualization tool (not necessary but fun to implement)

I put the equalizer link in the main menu, didnt get how to put it in settings.

[nukeop]

Ready for review and merging?

[c-jacquin]

yep

[nukeop]

Wow what an incredible contribution. Probably the best feature implemented so far, even among lots of fantastic quality code from all the contributors. I tested this and it all works great. There are only some minor edits to the UI that I'd like to add in the coming days.