Add visual waves for sound components

[SashaScholar6]

• [x] draggable sound component
• [x] sound from toolbar
• [x] should show in play preview and play
• [x] shouldn't need to refresh to see it

• [x] style like we said, simplified version of soundcloud (remove grey bar with circle)
• [x] circle play on left, bar go red to indicate progress, currentTime on left, total time on right
• [x] for volume, instead of circle, style like the scrollbar, so that volume is draggable and height/length is dark blue

• [x] same idea as above in answers

• [x] this should reduce the height considerably

• [x] also for choose one and several

• [x] pair match we may need to discuss on a call

• [x] same idea for synthesis also (showing time now also) - all styles and content display should be the same for any sound component, whether in answer, separate component or general text

[ivanromakh]

@SashaScholar6 this is the only one which is working. https://dschoon.github.io/react-waves/

[ivanromakh]

@SashaScholar6 I need design for play. if there are waves I can only show play button. I am not sure where play button should be

[ivanromakh]

I can probably show volume too.

[ivanromakh]

@SashaScholar6 maybe like this?

[ivanromakh]

[ivanromakh]

[ivanromakh]

@SashaScholar6 what about horizontal shuffle?

[ivanromakh]

[SashaScholar6]

How does it look in play? Maybe make play icon smaller and make sure to round sound bars

[ivanromakh]

in play it looks even uglier as play button is bigger there. need design for this one.