search

benalavi / waveform

Generate waveform images from audio files
197 stars 53 forks source link

Waveform clarity #16

Open phawk opened 9 years ago

phawk commented 9 years ago

Hey, this isn’t an issue per-say, but a request. Would love it if you could point me in the right direction.

I have this gem working great and am able to generate waveforms, however the design for the audio player I have been given requires less clarity in the image, basically each peak needs to be ~3px wide and flat on the top, with 1px in between each peak. Not sure if you have any suggestions for how to accomplish this?

Audio player design: messages image 760783981

How I have got on so far with some CSS background images: screen shot 2014-11-15 at 21 03 44

benalavi commented 9 years ago

Interesting use case, off the top of my head I can't think of way to accomplish it with any CSS or layering. The code itself will always output 1-pixel-width per sampled frame (so each peak value from the audio maps to a 1px wide line). I think to make this what would need to be added is a way to set the output width per frame, so say map each sample to 10px or something, and then use a CSS overlay to cut them "in half" showing 5px and hiding the other 5px, making a clean 5px bar for each sample.

I'm a little indisposed right now, and admittedly it's been a while since I touched the code, but I think the relevant line of code to edit would be https://github.com/benalavi/waveform/blob/master/lib/waveform.rb#L172. If you wanted to just hack it real quick you could probably set the line width and tweak things from there.

If you do figure it out feel free to send a pull request and I'll check it out and add a front-end option to set the line width, or if you're feeling ambitious you could add that too :)

If not I'll try to get to it in the next day or so, seems like a useful feature.

Nice looking player, btw.

phawk commented 9 years ago

Thanks sir, I shall get looking at this early next week. I think an option for taking an average of x frames, and then rounding the last 3 samples to all be the same value might work.