Add functionality for backgroundColor parameter #1126
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
* 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
* 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
While an easy workaround for this would be to simply add a background color to the parent container, the exportImage function/the canvas toDataURL function, still only exports what is on the canvas. This change simply draws a rectangle to fill the canvas if the parameter is set. Resolves #1118
|
This should really be a fillStyle though... maybe. |
|
my reasoning was that if someone's working with the api, backgroundColor is the most descriptive name for it (imo). and then, working with canvases, you have fill/fillRect/fillStyle, so fillColor could be mildly confusing |
|
(Sorry, I meant fillStyle.) Just a minor issue here though is that someone might expect this to set a Why not just set the backgroundColor and then when exporting, use a computed backgroundColor in the wrapper to draw the output (no need to redraw the image -- just do drawImage)? This would also play nicely with my submitted changes which creates a cutout of the wave and places a background color equal to the waveColor / progressColor. |
|
oh i thought you meant changing the parameter name lol. and i don't think i entirely get what you're suggesting. getImage just calls toDataURL on the canvas, so i don't see what drawImage would do, but i haven't worked with canvases a lot so i could just be missing something entirely |
|
can you leave out the changes in |
|
I did but then I was thinking about compatibility with my work and other issues. So my thought is that before using toDataURL, have the getImage function apply the backgroundColor of the wrapper on the canvas. You can just do a regular fill but with globalCompositeOperation set to destination-over: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation. |
|
oh i totally didn't know that was a thing. okay so i get how i'd do that but, can you explain how my changes affect your change you mentioned? i don't get what you mean by cutout. sorry if i'm being dense lol |
|
I'm inverting the wave so that the pixels where the wave is become transparent and vice-versa. That allows me to put the inverse wave over the region plugin so that I could have different-colored wave segments, for example. If you fill the canvas, that won't work anymore. |
|
ah gotcha. okay, i'll totally look into changing this branch with your suggestions, and then i'll do a new pull request without the ./dist changes |
|
All you need to do is just change that export function to implement a fix to your original problem, right... in fact, later on this could be extended further to take into account background images, etcetera -- although there is a library or two that can convert dom elements to a canvas, so it might be a bit much in that case. |
|
after implementing these changes the image returned from "The globalAlpha and globalCompositeOperation attributes, as well as the shadow attributes, are ignored for the purposes of this method call; pixels in the canvas are replaced wholesale, with no composition, alpha blending, no shadows, etc." - html canvas spec so this seems like a dead end at that point. i'm just going to update this branch, and take out the changes to |
|
Just create a temporary image first.... |
|
i'm not exactly sure what you mean by that, but i've already spent more time on this relatively small change than i intended lol. this is perfectly fine for what my purposes for the change are, if it doesn't work with your changes and isn't going to be a useful addition to the code base i don't mind if my pull request is denied. or if it's accepted and you want to make it work with your changes, that'd be great too |
|
@disdyakis can you rebase/create a new pull request based on the current master branch? |
While an easy workaround for this would be to simply add a background color
to the parent container, the exportImage function/the canvas toDataURL function,
still only exports what is on the canvas. This change simply draws a rectangle
to fill the canvas if the parameter is set.
No breaking changes in external or internal API.
Resolves #1118