-
-
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
create new labels feature for spectrogram plugin #984
create new labels feature for spectrogram plugin #984
Conversation
- create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter.
create new labels feature for spectrogram plugin - create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter.
plugin/wavesurfer.spectrogram.js
Outdated
@@ -73,10 +73,29 @@ WaveSurfer.Spectrogram = { | |||
this.container.removeChild(prevSpectrogram); | |||
} | |||
|
|||
var specLabels = (this.params.labels||false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You don't need to do this kind of conversion explicitly. Just check directly if (this.params.labels)
.
plugin/wavesurfer.spectrogram.js
Outdated
if (specLabels) { | ||
var specLabelsdiv = document.createElement('div'); | ||
specLabelsdiv.setAttribute('id', 'specLabels'); | ||
specLabelsdiv.style.cssText = 'position:absolute;left:0;z-index: 9;'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could use this method for a prettier CSS object: https://github.com/katspaugh/wavesurfer.js/blob/master/src/drawer.js#L98-L105
plugin/wavesurfer.spectrogram.js
Outdated
@@ -204,6 +223,69 @@ WaveSurfer.Spectrogram = { | |||
return ajax; | |||
}, | |||
|
|||
freqType: function (freq) { | |||
return (freq >= 1000 ? (freq/1000).toFixed(1) : Math.round(freq)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
freq/1000
-> freq / 1000
plugin/wavesurfer.spectrogram.js
Outdated
var textAlign = textAlign || 'center'; | ||
var container = container || '#specLabels'; | ||
var getMaxY = frequenciesHeight || 512; | ||
var labelIndex = 5 * (getMaxY/256); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
getMaxY / 256
Here and further down: please space out arithmetic operators.
@katspaugh ok updated |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
set the correct div element for style, merge this
Awesome stuff, thanks! |
* create new labels feature for spectrogram plugin - create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter. * create new labels feature for spectrogram plugin create new labels feature for spectrogram plugin - create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter. * remove extra spaces * removed one more extra white space :) * update css formatting * remove extra space * remove extra space
* added contributing info (#1006) * Readded global audio context singleton, functionally equal to PR #1021 * Cleanup npm package (#995) * ignore eclipse project files * exclude everything except dist, plugin and src directories in npm package * only include minified plugins in npm package * updated .npmignore to exclude everything except dist and src directories and subdirectories * Add support for forceDecode (#1009) * Add support for forceDecode Adds the `forceDecode` option to force client side decoding of the audio after download regardless if pre-decoded peaks are passed to the `.load/2` method. This is primarily for use with `.zoom/1` to enable high fidelity rendering on zoom. Without local decoding, the zoom on pre-decoded peaks is very low fidelity. * Update conditional brackets for failing test * nullify this.arraybuffer when destroying to prevent memory leak * removed <<<< HEAD * return array when using getImage() (#1027) * return array when using getImage() * return one canvas image data if not multiple canvases * Update drawer.multicanvas.js * updated getImage() * add comments fir getImage() * updated comments * updated getImage to es6 syntax and applied jsdoc formatting * create new labels feature for spectrogram plugin (#984) * create new labels feature for spectrogram plugin - create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter. * create new labels feature for spectrogram plugin create new labels feature for spectrogram plugin - create labels parameter (true|false) - create labels element and canvas - create labels frequency method loadLabels(); - update createWrapper() method and apply labels feature parameter. * remove extra spaces * removed one more extra white space :) * update css formatting * remove extra space * remove extra space * Updated spectrogram labels to es6 * add getFilters method (#982) * add getFilters method * add getFilters() method add 'Filters must be set with setFilters method first' note. * return empty array if no filters are set * change to `return this.backend.filters || [];` * add debounce to resize/orientationchange event for minimap plugin (#987) * add debounce to resize event * add orientationchange event * getVolume method (#978) * getVolume method returns the current gainNode volume. * added getVolume method * added getVolume method * updated getVolume to es6 syntax * avoid error when calling pause before play (#977) This prevents a `Failed to execute 'stop' on 'AudioBufferSourceNode'` when stop() is called before play(). * fix getDuration() return value when using MediaElement (#941) * 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 * add wavesurfer.getPlaybackRate() (#939) add getPlaybackRate method and return playback rate.
feature request #810
preview:
http://codepen.io/entonbiba/pen/Bpmqrq