-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixes/enhancements to regions plugin. #1103
Conversation
…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
1) `width` in `var width = this.wrapper.scrollWidth;` is not used. 2) In preparation for some potential changes in the main code, I changed the getWidth function to look at `this.wavesurfer.width` as well.
* Wrap drawing in requestAnimationFrame. Wrap drawing in requestAnimationFrame per #1084. * Update drawer.canvas.js * Update drawer.canvas.js * Update drawer.canvas.js * Update drawer.canvas.js * Update drawer.canvas.js
Thanks! I'll need to check and test it, will get back to you. |
1) Instead of cssResizeClass, cssResizeStyle, etc., I created two container objects of `classList` and `styleList`, which contain the properties `region`, `resize`, `resizeStart`, and `resizeEnd`. Usage could be, for example: ```` var new_region = wavesurfer.addRegion({ start: time_start, end: time_end, color: color, showTitle: false, drag: false, styleList : { region : { position : 'absolute', zIndex: 0, height: '100%', top: '0px' }, resize: { cursor: "col-resize", position: "absolute", left: "-4px", top: "0px", width: "8px", height: "100%" } } }) ````
Sorry -- one more change. |
Actually, a few errors with the latest change, but I am falling asleep... tomorrow. |
@katspaugh: Another idea on the events: |
* Listen to and relay play and pause events on media element * Corrected the 'pause' event label * removed play and pause emits from respective functions
* Update drawer.js * Update drawer.js
* Remove pointer events from the left and right sides of the wave and change `zIndex` to 2. The reasoning behind this is to allow, for example, the region plugin to have a styling such that the regions are below the waves (so that the waves look clearer and not blended with the regions), while still allowing resize events on the regions. Otherwise, the left/right sections of the wave block the resize elements of the regions, since their `zIndex` needs to be necessarily higher to be drawn over the regions.
* Update drawer.multicanvas.js * Update drawer.multicanvas.js * Update drawer.multicanvas.js * Update drawer.multicanvas.js * I have no idea why this failed. * Update drawer.multicanvas.js * Update drawer.multicanvas.js * Update drawer.multicanvas.js
Duration of a clip? Timestamp? ??? @katspaugh : ok. So I dunno what is up with all these extra files. But anyway, I have a new file right here: https://github.com/agamemnus/wavesurfer.js/blob/master/plugin/wavesurfer.regions.js (There are quite a lot of changes. It's much improved... one thing I did recently was replace the multiple document mouseup/mousedown event listeners in favor of a single unified listener.) |
I have once more updated my code at: https://github.com/agamemnus/wavesurfer.js/blob/master/plugin/wavesurfer.regions.js Bueller! |
Closing as too many things have changed. Moving this to #1211. |
I'm modifying this for my own use and thought it could use a few additions and enhancements. More to come.
1] Fix for cursor fighting when dragging.
Previously, default cursor sometimes fought with dragging cursor, resulting in flickering cursors. The main issue here is that there is a cursor assigned to each region and there's no overall action state. This is actually a fairly complex problem. More work will be required to handle extreme edge cases. (although, it is already better than current code in that respect)
2] New events.
region-resized-start
andregion-resized-end
:These will trigger when the region start or end is resized.
3a] New options.
resizeStart
andresizeEnd
:These determine whether the resize start and resize end control is created. (Sometimes, you might not want both)
3b] More new options:
cssResizeStyle
,cssResizeStartClass
,cssResizeEndClass
.Optional parameters to change the default style of the resize controls.
cssResizeStyle
will overwrite the default style added to each resize control.cssResizeStartClass
andcssResizeEndClass
will add classes to the start/end controls.4] Still more new options:
showTitle
.Optional parameter
showTitle
. Default is true. If false, title will not be shown.