fix render waveform #1114

entonbiba · 2017-06-06T03:38:46Z

fixes render waveform with peaks.
#1067 #1055

preview: https://codepen.io/entonbiba/pen/PmpXqJ

to

…862) * close the audiocontext in the destroy method of the webaudio backend * ac is only closed in WebAudio destroy function if it was created internally and not passed in as a parameter * removed WaveSurfer.WebAudio.audioContext caching (and WebAudio.getAudioContext) * getAudioContext method is back in place, but doesn't cache to WebAudio.audioContext

…stroyed on WebAudio backend destroy) (#865)

When running code that uses Wavesurfer under PhantomJS (even if not explicitly testing the Wavesurfer code), the JS interpreter crashes because PhantomJS DOM `<audio>` elements don't have a `load()` method. This change skips that one line if the method doesn't exist.

* Adds an optional 'partialRender' parameter to enable * Calculates and renders peaks only for current visible waveform * Keeps track of currently calculated/rendered peaks to avoid duplicate calculation and only incremental scroll changes are rendered Tested all combinations of Canvas/MultiCanvas and Wave/Bars rendering at various zoom levels.

* fix draw wrong position while playing backward seeking * fix spelling mistake

add getPlaybackRate method and return playback rate.

…awWave + drawBars without the start and end parameters introduced by peakCache (#945)

* fix getDuration() return value for MediaElement change getDuration function in mediaelement.js to return the correct duration length same as WebAudio. from var duration = this.media.duration; // incorrect duration value returned console.log preview: https://cloud.githubusercontent.com/assets/5193884/22399178/6d26c1fe-e565-11e6-9b13-e6107641666a.png to var duration = this.buffer.duration; // correct duration value returned same as WebAudio console.log preview: https://cloud.githubusercontent.com/assets/5193884/22393549/7b130096-e4d6-11e6-83ff-4ebb78b9e42f.png * Update mediaelement.js

Updated the render function to call the new version of the getPeaks and drawPeaks calls which now require start and end parameters. Fixes flat waveform drawing in minimap plugin.

add check for browser support of AudioContext.close(). This is only supported by Chrome 43+ and FireFox 40+ for now. Edge and other non supported browsers will give an undefined error. https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/close // check if browser supports AudioContext.close() if(typeof this.ac.close() !== 'undefined'){ this.ac.close(); } fixes #949

* Update wavesurfer.minimap.js renders the minimap without the need to resize the window. Changed this.wavesurfer.on('ready', this.render.bind(this)); to this.wavesurfer.on('ready', my.render.bind(this)); * Update wavesurfer.minimap.js added the fixes for the drawPeaks() * update my.render to this.render * add parameter check renderOnLoad check to see if a parameter called "miniRenderOnLoad" is set to true, if it is render the minimap on load. * Update wavesurfer.minimap.js * add space after else * render minimap on load will update docs and create example for minimap plugin - minimap should be initialized within the main wavesurfer ready event.

* create debounce method in util.js Can be used as follows with a resize event to prevent drawBuffer() from running concurrently when resizing the browser window. preview: http://codepen.io/entonbiba/pen/jyKrEz var responsiveWave = debounce(function() { wavesurfer.empty(); wavesurfer.drawBuffer(); }, 150); window.addEventListener(‘resize’, responsiveWave); * create debounce method in util.js * Update util.js * create debounce method in util.js, remove spaces

agamemnus · 2017-06-12T17:09:29Z

Oh, the spikes problem seemed to coincide with a formatting error (which is now fixed), so probably nothing -- I have been using PHP to output audio files based on a request to the server.

X-Raym · 2017-06-12T17:14:57Z

@agamemnus good ! So, I think this PR is ready to be merge in its current state ? Or is there any problem left ?

agamemnus · 2017-06-12T17:16:05Z

I'm just not sure why it is 9999 (er, end * 9999). Seems arbitrary. I would like to try to figure out the root cause...

X-Raym · 2017-06-12T17:20:39Z

@agamemnus 9999 was arbitrary, but now it is end = width*end; (it may seems also arbitrary, but surely more flexible than an absolute value). But finding the cause of the problem may be better indeed. Good luck in your investigation ! :)

entonbiba · 2017-06-12T22:20:36Z

@X-Raym @agamemnus @taylorvc Is the spike thing happening on a specific browser? Not able to replicate it on my end.

agamemnus · 2017-06-12T22:24:55Z

Not an issue anymore. Just a malformed file.

entonbiba · 2017-06-12T22:40:39Z

@agamemnus sounds good

agamemnus · 2017-06-13T02:05:26Z

Here is the problem: getPeaks uses a sub-range count and not a pixel width/length.

The correct could would then be (maybe):

            if (!('peaks' in this.backend)) {
                var subrangeLength = width;
            } else {
                var numberOfChannels = this.backend.buffer ? this.backend.buffer.numberOfChannels :
                    this.backend.preload ? this.backend.preload.numberOfChannels :
                    (this.backend.peaks[0] instanceof Array) ? this.backend.peaks.length : 2;
                var subrangeLength = ((this.backend.peaks[0] instanceof Array) ? this.backend.peaks[0].length : this.backend.peaks.length) / numberOfChannels;
            }
            start = 0;
            end = subrangeLength - 1;
            var peaks = this.backend.getPeaks(subrangeLength, start, end);
            this.drawer.drawPeaks(peaks, width, start, end);

Other issues/notes:

This adds a new parameter that we should pull from somewhere: this.preload, with a property of numberOfChannels.
I am not sure if the fireEvent should fire width or subrangeLength.
I suggest also that we rename getPeaks's length parameter into subrangeLength to differentiate the two.

agamemnus · 2017-06-13T03:36:32Z

Updated code above.

Fixes #1134

agamemnus · 2017-06-17T19:26:46Z

@entonbiba: updated code above.... thoughts?

Fixes #1138

refs #1127 Before #909, calling `drawBuffer` to redraw the wave invoked `drawer.drawPeaks` which in turn invoked `drawer.setWidth` which always caused the canvas to be cleared as a side effect of `drawer.updateSize`. In #909 `setWidth` was changed to short circuit if the width did not change. This now causes the waveform to be redrawn on top of the previous rendition, making the edges of the wave appear less crisp. This change makes `setWidth`/`setHeight` return a boolean to indicate whether changes were needed. If not, `drawer.clearWave` is called manually. So we make sure that the previous wave is always cleared, but do not perform the possibly performance intensive task of clearing the canvas twice if it already happened as a side effect of `setWidth`.

* Join ends of peaks I'm not entirely sure that the peaks are joined at the ends. When I zoomed all the way in, it seemed that there were gaps... * Update drawer.multicanvas.js * Update drawer.multicanvas.js

* fixes safari browser missing buffer when using webaudio * return correct buffer * set samples to 4096 * add safari comment

X-Raym · 2017-07-10T14:27:07Z

@entonbiba Hi ! any news about this bug ?

entonbiba · 2017-07-14T21:13:52Z

@agamemnus @X-Raym I like the subrangeLength idea. The current quick fix end = width*end; should be merged first to at least fix the current issue of no waveform showing. We should open another pr for the subrange length as it would need more testing with larger and smaller file sizes.

I've been looking into createPeriodicWave webaudio method as well which looks interesting.

agamemnus · 2017-07-14T21:20:56Z

It is definitely hairy though.

X-Raym · 2017-08-01T21:32:48Z

@entonbiba has this been fixed ?

entonbiba · 2017-08-01T21:34:06Z

@X-Raym I opened another pr since this one had too many already merged prs. #1182

X-Raym · 2017-08-01T21:34:45Z

@entonbiba ok thx !

mspae and others added 30 commits November 16, 2016 23:13

Updated CHANGES.md with information about PR #862 (audioContext is de…

ad8401e

…stroyed on WebAudio backend destroy) (#865)

resume ac only if suspended and has the resume method

808030b

v 1.2.5

f1bea49

correcly calc the of the waveform on region zoom; resolve #825

4ee2b29

v 1.2.6

d11607d

fix typo (#868)

e063140

fix typo for real (#871)

39e5d71

doc update (#873)

bf370ed

timeline: properly unsubscribe on destroy; resolve #848

0699fc7

timeline: re-render on zoom; resolve #825

210f93f

v 1.2.7

4cdc9fa

v 1.2.8

462e42a

Update README.md

7a9931d

Apply correct normalize absmax calculation to drawBars() (#916)

b0c0a8b

small refactor, removed unnecessary re-calculation (#901)

f9426cb

fix draw wrong position while playing backward seeking (#918)

5cf96c0

* fix draw wrong position while playing backward seeking * fix spelling mistake

make MultiCanvas the default; bump version and update build

02d99ab

update bower version

6d89b9c

add getPlaybackRate (#936)

f185d97

add wavesurfer.getPlaybackRate() (#939)

8666da3

add getPlaybackRate method and return playback rate.

fixes broken split channel rendering caused by out-of-date call to dr…

cf6e35b

…awWave + drawBars without the start and end parameters introduced by peakCache (#945)

Updated render function for drawPeaks/getPeaks (#959)

6384d94

Updated the render function to call the new version of the getPeaks and drawPeaks calls which now require start and end parameters. Fixes flat waveform drawing in minimap plugin.

avoid 'for in' array enumeration (#961)

f7c20ac

Merge branch 'master' into entonbiba-patch-fixrenderwaveformbug

b448c93

agamemnus and others added 2 commits June 16, 2017 14:10

Add pointerEvents: none to left/right sides: undo zIndex change. (#1137)

ab65f11

Remove unused argument from Spectrogram#resample (#1135)

1f320ab

Fixes #1134

glebm and others added 4 commits July 2, 2017 20:31

Remove variable redeclariotions from spectrogram (#1152)

1d92bfa

Fixes #1138

Join ends of peaks (#1142)

a1ff8ea

* Join ends of peaks I'm not entirely sure that the peaks are joined at the ends. When I zoomed all the way in, it seemed that there were gaps... * Update drawer.multicanvas.js * Update drawer.multicanvas.js

fixes safari browser missing buffer when using webaudio (#1096)

64bd48b

* fixes safari browser missing buffer when using webaudio * return correct buffer * set samples to 4096 * add safari comment

Merge branch 'master' into entonbiba-patch-fixrenderwaveformbug

f916df8

entonbiba requested a review from mspae July 14, 2017 21:06

katspaugh force-pushed the master branch from 64bd48b to d2a1f38 Compare July 16, 2017 10:05

entonbiba mentioned this pull request Jul 31, 2017

Only part of the waveform is rendered when the browser window isn't maximized #1175

Closed

entonbiba closed this Aug 1, 2017

entonbiba deleted the entonbiba-patch-fixrenderwaveformbug branch August 1, 2017 21:30

entonbiba mentioned this pull request Aug 1, 2017

Fixes cut off waveform rendering #1182

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix render waveform #1114

fix render waveform #1114

entonbiba commented Jun 6, 2017 •

edited

Loading

agamemnus commented Jun 12, 2017

X-Raym commented Jun 12, 2017

agamemnus commented Jun 12, 2017 •

edited

Loading

X-Raym commented Jun 12, 2017

entonbiba commented Jun 12, 2017

agamemnus commented Jun 12, 2017

entonbiba commented Jun 12, 2017

agamemnus commented Jun 13, 2017 •

edited

Loading

agamemnus commented Jun 13, 2017

agamemnus commented Jun 17, 2017

X-Raym commented Jul 10, 2017

entonbiba commented Jul 14, 2017

agamemnus commented Jul 14, 2017 •

edited

Loading

X-Raym commented Aug 1, 2017

entonbiba commented Aug 1, 2017 •

edited

Loading

X-Raym commented Aug 1, 2017

fix render waveform #1114

fix render waveform #1114

Conversation

entonbiba commented Jun 6, 2017 • edited Loading

agamemnus commented Jun 12, 2017

X-Raym commented Jun 12, 2017

agamemnus commented Jun 12, 2017 • edited Loading

X-Raym commented Jun 12, 2017

entonbiba commented Jun 12, 2017

agamemnus commented Jun 12, 2017

entonbiba commented Jun 12, 2017

agamemnus commented Jun 13, 2017 • edited Loading

agamemnus commented Jun 13, 2017

agamemnus commented Jun 17, 2017

X-Raym commented Jul 10, 2017

entonbiba commented Jul 14, 2017

agamemnus commented Jul 14, 2017 • edited Loading

X-Raym commented Aug 1, 2017

entonbiba commented Aug 1, 2017 • edited Loading

X-Raym commented Aug 1, 2017

entonbiba commented Jun 6, 2017 •

edited

Loading

agamemnus commented Jun 12, 2017 •

edited

Loading

agamemnus commented Jun 13, 2017 •

edited

Loading

agamemnus commented Jul 14, 2017 •

edited

Loading

entonbiba commented Aug 1, 2017 •

edited

Loading