Not accurate waveform

[NPetrovs]

Hey,
From what I can see, if I upload any audio file, both sides (left/right) of the waveform, they are identical.
Mirror of the waveform should be different and they should not be identical.

Is it possible to fix?

[enjikaka]

Not sure exactly what you mean. Can you attach an image which shows the issue? Den fre 13 okt. 2017 17:44NPetrovs <[email protected]> skrev:

Hey, From what I can see, if I upload any audio file, both sides (left/right) of the waveform are identical. Mirror of the waveform differ and they should not be identical. Is it possible to fix? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#5>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA1jjwtbnkpr_ex6Z5eLz1KyQUFN1_-oks5sr4VigaJpZM4P4rv-> .

-- Med vänlig hälsning, Jeremy Karlsson

[NPetrovs]

A) This this the waveform your code is generating:

B) This is waveform of the same track, but just a bit stretched:

If you look at the image on the B case, left and right channels are different, but when generating it with your code, they are exactly the same, which is a wrong interpretation of the track.

[NPetrovs]

Hope, that you understand what I mean.
You can compare with http://convert.ing-now.com/
From what I can see, their generated waveforms are pretty much correct

[enjikaka]

Aha! Never thought about that the top and bottom are different channels in other representations of waveforms. Today it's the frequency data value of both channels combined (or maybe only one of them, can't remember — not at PC rn) that gives a value, which is then used as the height of a bar. It should be possible to make the top side L and the bottom R, at least for the "center align" case. Not sure how we'd represent it for "top align" and "bottom align" through... I'll look into adding this feature. Thanks for pointing this out! Den fre 13 okt. 2017 18:36NPetrovs <[email protected]> skrev:

Hope, that you understand what I mean. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA1jjzGLg5AMaDsJFEaXDbKLm5-vHMdaks5sr5GAgaJpZM4P4rv-> .

-- Med vänlig hälsning, Jeremy Karlsson

[enjikaka]

I've started experimenting with it in this branch; https://github.com/enjikaka/WaveformGenerator.js/tree/feature/stereo-waveform

[NPetrovs]

Check out this code: https://codepen.io/ronanhigg/pen/gmFaq In JS function drawBuffer() pretty much does all the job and it draws the wave correctly. You should probably check it out and try to add something to your code. 2017-10-14 0:54 GMT+03:00 Jeremy Karlsson <[email protected]>:

…

I've started experimenting with it in this branch; https://github.com/enjikaka/WaveformGenerator.js/tree/ feature/stereo-waveform — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMd_K0FclV_E2MMkAxuJUPIa8cNqhgaFks5sr9v_gaJpZM4P4rv-> .

[NPetrovs]

Doing buffer.getChannelData(0) and for other one buffer.getChannelData(1) would be wrong, because you would be connecting together two independent track information. 2017-10-14 0:58 GMT+03:00 Normunds Petrovs <[email protected]>:

…

Check out this code: https://codepen.io/ronanhigg/pen/gmFaq In JS function drawBuffer() pretty much does all the job and it draws the wave correctly. You should probably check it out and try to add something to your code. 2017-10-14 0:54 GMT+03:00 Jeremy Karlsson ***@***.***>: > I've started experimenting with it in this branch; > https://github.com/enjikaka/WaveformGenerator.js/tree/featur > e/stereo-waveform > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#5 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AMd_K0FclV_E2MMkAxuJUPIa8cNqhgaFks5sr9v_gaJpZM4P4rv-> > . >

[NPetrovs]

This is a stereo track. If you do buffer.getChannelData(0) and buffer.getChannelData(1) You will be joining them together and result still won't be correct

[NPetrovs]

[enjikaka]

The result in the branch for an example stereo track, I used this https://www.youtube.com/watch?v=kh8akNfMRa0

Isn't that what you want?

[NPetrovs]

Correct waveform for this track would be this:

What you are doing, you are taking the stereo channel buffer.getChannelData(1) and applying it as a mirror of the track, which is not correct. You have to draw correct image just using buffer.getChannelData(0). Like it is done in this code example: https://codepen.io/ronanhigg/pen/gmFaq

[enjikaka]

Only using channel 0 (L) is what is done today.

What I've done there in the branch is that I've that I've taken channel 0 (L) on the top, and channel 1 (R) on the bottom. Like you explained. That gives a waveform like in my last picture.

It's either that or using L+R to make a combined bar height.

[NPetrovs]

Could you explain how this code is drawing different L/R if I pass only buffer.getChannelData(0) in data argument?

function drawBuffer( width, height, context, data ) { var step = Math.ceil( data.length / width ); var amp = height / 2; context.fillStyle = "silver"; context.clearRect(0,0,width,height); for(var i=0; i < width; i++){ var min = 1.0; var max = -1.0; for (j=0; j<step; j++) { var datum = data[(i*step)+j]; if (datum < min) min = datum; if (datum > max) max = datum; } context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp)); } }

[enjikaka]

@NPetrovs If you pass buffer.getChannelData(0) into that you'd only get L channel.

buffer.getChannelData(0) = left channel
buffer.getChannelData(1) = right channel

[NPetrovs]

Yes, correct that is stereo. I probably did not explain too clear previously. The thing is that *plus* and a *minus *channel information are equal, but it should not be like that. Here is post from quora, explanation about audio mirror - https://www.quora.com/Why-are-waveforms-mirrored Could it be fixed in your code? 2017-10-16 15:36 GMT+03:00 Jeremy Karlsson <[email protected]>:

…

@NPetrovs <https://github.com/npetrovs> If you pass buffer.getChannelData(0) into that you'd only get L channel. buffer.getChannelData(0) = left channel buffer.getChannelData(1) = right channel — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMd_K1hy8ufkZ0un24vUwgi7YBZyzPLmks5ss03GgaJpZM4P4rv-> .