Changeset 34671


Ignore:
Timestamp:
2021-01-15T15:43:35+13:00 (3 years ago)
Author:
davidb
Message:

Adjusted to use a scale factor of x2 on the spectrogram

Location:
gs3-extensions/mars-src/trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js

    r34406 r34671  
    99    wavesurfer = WaveSurfer.create({
    1010        container: document.querySelector('#waveform'),
     11    height: 408,
    1112    minPxPerSec: 2,
    1213    //normalize: true,
    … …  
    1415    barHeight: 1, // the height of the wave
    1516    barGap: 1,    // the optional spacing between bars of the wave, if not provided will be calculated in legacy format
     17    //renderer: SpectrumMultiCanvas, // class name does not appear to be in scope (resorted to chaning default in wavesurfer.js)
     18        colorMap: viridisColorMap,
    1619        plugins: [
    1720
    … …  
    1922            container: "#wave-timeline"
    2023        }),
    21 
     24/*
    2225        WaveSurfer.spectrogram.create({
    2326            wavesurfer: wavesurfer,
    … …  
    2730            colorMap: viridisColorMap
    2831        }),
    29 
     32*/
     33       
    3034            WaveSurfer.cursor.create({
    3135                showTime: true,
    … …  
    3741                    'font-size': '10px'
    3842                }
    39         }),
     43        })/*,
    4044
    4145            WaveSurfer.hpcp.create({
    … …  
    4751                    colorMap: viridisColorMap
    4852        })
    49 
     53*/
    5054
    5155

  • gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js

    r34669 r34671  
    258258    }
    259259
    260     /**
    261      * Initialize the drawer
    262      */
    263     /*
    264     init() {
    265         this.createWrapper();
    266         this.createElements();
    267     }
    268     */
    269    
    270     /**
    271      * Create the canvas elements and style them
    272      *
    273      */
    274     /*
    275     createElements() {
    276         this.progressWave = this.wrapper.appendChild(
    277             this.style(document.createElement('wave'), {
    278                 position: 'absolute',
    279                 zIndex: 3,
    280                 left: 0,
    281                 top: 0,
    282                 bottom: 0,
    283                 overflow: 'hidden',
    284                 width: '0',
    285                 display: 'none',
    286                 boxSizing: 'border-box',
    287                 borderRightStyle: 'solid',
    288                 pointerEvents: 'none'
    289             })
    290         );
    291 
    292         this.addCanvas();
    293         this.updateCursor();
    294     }*/
    295260
    296261    /**
    … …  
    308273   
    309274   
    310     /**
    311      * Adjust to the updated size by adding or removing canvases
    312      */
    313     /*
    314     updateSize() {
    315         const totalWidth = Math.round(this.width / this.params.pixelRatio);
    316         const requiredCanvases = Math.ceil(
    317             totalWidth / (this.maxCanvasElementWidth + this.overlap)
    318         );
    319 
    320         // add required canvases
    321         while (this.canvases.length < requiredCanvases) {
    322             this.addCanvas();
    323         }
    324 
    325         // remove older existing canvases, if any
    326         while (this.canvases.length > requiredCanvases) {
    327             this.removeCanvas();
    328         }
    329 
    330         let canvasWidth = this.maxCanvasWidth + this.overlap;
    331         const lastCanvas = this.canvases.length - 1;
    332         this.canvases.forEach((entry, i) => {
    333             if (i == lastCanvas) {
    334                 canvasWidth = this.width - this.maxCanvasWidth * lastCanvas;
    335             }
    336             this.updateDimensions(entry, canvasWidth, this.height);
    337 
    338             entry.clearWave();
    339         });
    340     }
    341     */
    342    
    343     /**
    344      * Add a canvas to the canvas list
    345      *
    346      */
    347     /*
    348     addCanvas() {
    349         const entry = new this.EntryClass();
    350         entry.canvasContextAttributes = this.canvasContextAttributes;
    351         entry.hasProgressCanvas = this.hasProgressCanvas;
    352         entry.halfPixel = this.halfPixel;
    353         const leftOffset = this.maxCanvasElementWidth * this.canvases.length;
    354 
    355         // wave
    356         entry.initWave(
    357             this.wrapper.appendChild(
    358                 this.style(document.createElement('canvas'), {
    359                     position: 'absolute',
    360                     zIndex: 2,
    361                     left: leftOffset + 'px',
    362                     top: 0,
    363                     bottom: 0,
    364                     height: '100%',
    365                     pointerEvents: 'none'
    366                 })
    367             )
    368         );
    369 
    370         // progress
    371         if (this.hasProgressCanvas) {
    372             entry.initProgress(
    373                 this.progressWave.appendChild(
    374                     this.style(document.createElement('canvas'), {
    375                         position: 'absolute',
    376                         left: leftOffset + 'px',
    377                         top: 0,
    378                         bottom: 0,
    379                         height: '100%'
    380                     })
    381                 )
    382             );
    383         }
    384 
    385         this.canvases.push(entry);
    386     }
    387     */
    388    
    389     /**
    390      * Pop single canvas from the list
    391      *
    392      */
    393     /*
    394     removeCanvas() {
    395         let lastEntry = this.canvases[this.canvases.length - 1];
    396 
    397         // wave
    398         lastEntry.wave.parentElement.removeChild(lastEntry.wave);
    399 
    400         // progress
    401         if (this.hasProgressCanvas) {
    402             lastEntry.progress.parentElement.removeChild(lastEntry.progress);
    403         }
    404 
    405         // cleanup
    406         if (lastEntry) {
    407             lastEntry.destroy();
    408             lastEntry = null;
    409         }
    410 
    411         this.canvases.pop();
    412     }
    413     */
    414    
    415     /**
    416      * Update the dimensions of a canvas element
    417      *
    418      * @param {CanvasEntry} entry Target entry
    419      * @param {number} width The new width of the element
    420      * @param {number} height The new height of the element
    421      */
    422     /*
    423     updateDimensions(entry, width, height) {
    424         const elementWidth = Math.round(width / this.params.pixelRatio);
    425         const totalWidth = Math.round(this.width / this.params.pixelRatio);
    426 
    427         // update canvas dimensions
    428         entry.updateDimensions(elementWidth, totalWidth, width, height);
    429 
    430         // style element
    431         this.style(this.progressWave, { display: 'block' });
    432     }
    433     */
    434    
    435     /**
    436      * Clear the whole multi-canvas
    437      */
    438     /*
    439     clearWave() {
    440         util.frame(() => {
    441             this.canvases.forEach(entry => entry.clearWave());
    442         })();
    443     }
    444 */
    445275
    446276    drawPeaks(peaks, length, start, end) {
    … …  
    523353        const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;
    524354
     355    // now double it!
     356        const scaledHeightFactor = heightFactor * 2;
     357   
    525358
    526359    let i;
    … …  
    558391                spectrCc.fillRect(
    559392                    i,
    560                     height - j * heightFactor,
     393                    height - j * scaledHeightFactor,
    561394                    1,
    562                     heightFactor
     395                    scaledHeightFactor
    563396                );
    564397            }
    … …  
    614447    }
    615448
    616    
    617     /**
    618      * Draw a waveform with bars
    619      *
    620      * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays
    621      * for split channel rendering
    622      * @param {number} channelIndex The index of the current channel. Normally
    623      * should be 0. Must be an integer.
    624      * @param {number} start The x-offset of the beginning of the area that
    625      * should be rendered
    626      * @param {number} end The x-offset of the end of the area that should be
    627      * rendered
    628      * @returns {void}
    629      */
    630    
    631     drawBars(peaks, channelIndex, start, end) {
    632         return this.prepareDraw(
    633             peaks,
    634             channelIndex,
    635             start,
    636             end,
    637             ({ absmax, hasMinVals, height, offsetY, halfH, peaks }) => {
    638                 // if drawBars was called within ws.empty we don't pass a start and
    639                 // don't want anything to happen
    640                 if (start === undefined) {
    641                     return;
    642                 }
    643                 // Skip every other value if there are negatives.
    644                 const peakIndexScale = hasMinVals ? 2 : 1;
    645                 const length = peaks.length / peakIndexScale;
    646                 const bar = this.params.barWidth * this.params.pixelRatio;
    647                 const gap =
    648                     this.params.barGap === null
    649                         ? Math.max(this.params.pixelRatio, ~~(bar / 2))
    650                         : Math.max(
    651                             this.params.pixelRatio,
    652                             this.params.barGap * this.params.pixelRatio
    653                         );
    654                 const step = bar + gap;
    655 
    656                 const scale = length / this.width;
    657                 const first = start;
    658                 const last = end;
    659                 let i = first;
    660 
    661                 for (i; i < last; i += step) {
    662                     const peak =
    663                         peaks[Math.floor(i * scale * peakIndexScale)] || 0;
    664                     let h = Math.round((peak / absmax) * halfH);
    665 
    666                     /* in case of silences, allow the user to specify that we
    667                      * always draw *something* (normally a 1px high bar) */
    668                     if (h == 0 && this.params.barMinHeight)
    669                         h = this.params.barMinHeight;
    670 
    671                     this.fillRect(
    672                         i + this.halfPixel,
    673                         halfH - h + offsetY,
    674                         bar + this.halfPixel,
    675                         h * 2,
    676                         this.barRadius
    677                     );
    678                 }
    679             }
    680         );
    681     }
    682 
    683     /**
    684      * Draw a waveform
    685      *
    686      * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays
    687      * for split channel rendering
    688      * @param {number} channelIndex The index of the current channel. Normally
    689      * should be 0
    690      * @param {number?} start The x-offset of the beginning of the area that
    691      * should be rendered (If this isn't set only a flat line is rendered)
    692      * @param {number?} end The x-offset of the end of the area that should be
    693      * rendered
    694      * @returns {void}
    695      */
    696     /*
    697     drawWave(peaks, channelIndex, start, end) {
    698         return this.prepareDraw(
    699             peaks,
    700             channelIndex,
    701             start,
    702             end,
    703             ({ absmax, hasMinVals, height, offsetY, halfH, peaks, channelIndex }) => {
    704                 if (!hasMinVals) {
    705                     const reflectedPeaks = [];
    706                     const len = peaks.length;
    707                     let i = 0;
    708                     for (i; i < len; i++) {
    709                         reflectedPeaks[2 * i] = peaks[i];
    710                         reflectedPeaks[2 * i + 1] = -peaks[i];
    711                     }
    712                     peaks = reflectedPeaks;
    713                 }
    714 
    715                 // if drawWave was called within ws.empty we don't pass a start and
    716                 // end and simply want a flat line
    717                 if (start !== undefined) {
    718                     this.drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex);
    719                 }
    720 
    721                 // always draw a median line
    722                 this.fillRect(
    723                     0,
    724                     halfH + offsetY - this.halfPixel,
    725                     this.width,
    726                     this.halfPixel,
    727                     this.barRadius
    728                 );
    729             }
    730         );
    731     }
    732     */
    733    
    734     /**
    735      * Tell the canvas entries to render their portion of the waveform
    736      *
    737      * @param {number[]} peaks Peaks data
    738      * @param {number} absmax Maximum peak value (absolute)
    739      * @param {number} halfH Half the height of the waveform
    740      * @param {number} offsetY Offset to the top
    741      * @param {number} start The x-offset of the beginning of the area that
    742      * should be rendered
    743      * @param {number} end The x-offset of the end of the area that
    744      * should be rendered
    745      * @param {channelIndex} channelIndex The channel index of the line drawn
    746      */
    747     /*
    748     drawLine(peaks, absmax, halfH, offsetY, start, end, channelIndex) {
    749         const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
    750         this.canvases.forEach((entry, i) => {
    751             this.setFillStyles(entry, waveColor, progressColor);
    752             entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
    753         });
    754     }
    755     */
    756449   
    757450    /**
    … …  
    801494    */
    802495   
    803     /**
    804      * Returns whether to hide the channel from being drawn based on params.
    805      *
    806      * @param {number} channelIndex The index of the current channel.
    807      * @returns {bool} True to hide the channel, false to draw.
    808      */
    809     /*
    810     hideChannel(channelIndex) {
    811         return this.params.splitChannels && this.params.splitChannelsOptions.filterChannels.includes(channelIndex);
    812     }
    813     */
    814    
    815     /**
    816      * Performs preparation tasks and calculations which are shared by `drawBars`
    817      * and `drawWave`
    818      *
    819      * @param {number[]|Number.<Array[]>} peaks Can also be an array of arrays for
    820      * split channel rendering
    821      * @param {number} channelIndex The index of the current channel. Normally
    822      * should be 0
    823      * @param {number?} start The x-offset of the beginning of the area that
    824      * should be rendered. If this isn't set only a flat line is rendered
    825      * @param {number?} end The x-offset of the end of the area that should be
    826      * rendered
    827      * @param {function} fn The render function to call, e.g. `drawWave`
    828      * @param {number} drawIndex The index of the current channel after filtering.
    829      * @returns {void}
    830      */
    831     /*
    832     prepareDraw(peaks, channelIndex, start, end, fn, drawIndex) {
    833         return util.frame(() => {
    834             // Split channels and call this function with the channelIndex set
    835             if (peaks[0] instanceof Array) {
    836                 const channels = peaks;
    837 
    838                 if (this.params.splitChannels) {
    839                     const filteredChannels =  channels.filter((c, i) => !this.hideChannel(i));
    840                     if (!this.params.splitChannelsOptions.overlay) {
    841                         this.setHeight(
    842                             Math.max(filteredChannels.length, 1) *
    843                                 this.params.height *
    844                                 this.params.pixelRatio
    845                         );
    846                     }
    847 
    848                     return channels.forEach((channelPeaks, i) =>
    849                         this.prepareDraw(channelPeaks, i, start, end, fn, filteredChannels.indexOf(channelPeaks))
    850                     );
    851                 }
    852                 peaks = channels[0];
    853             }
    854 
    855             // Return and do not draw channel peaks if hidden.
    856             if (this.hideChannel(channelIndex)) {
    857                 return;
    858             }
    859 
    860             // calculate maximum modulation value, either from the barHeight
    861             // parameter or if normalize=true from the largest value in the peak
    862             // set
    863             let absmax = 1 / this.params.barHeight;
    864             if (this.params.normalize) {
    865                 const max = util.max(peaks);
    866                 const min = util.min(peaks);
    867                 absmax = -min > max ? -min : max;
    868             }
    869 
    870             // Bar wave draws the bottom only as a reflection of the top,
    871             // so we don't need negative values
    872             const hasMinVals = [].some.call(peaks, val => val < 0);
    873             const height = this.params.height * this.params.pixelRatio;
    874             const offsetY = height * drawIndex || 0;
    875             const halfH = height / 2;
    876 
    877             return fn({
    878                 absmax: absmax,
    879                 hasMinVals: hasMinVals,
    880                 height: height,
    881                 offsetY: offsetY,
    882                 halfH: halfH,
    883                 peaks: peaks,
    884                 channelIndex: channelIndex,
    885             });
    886         })();
    887     }
    888     */
    889    
    890     /**
    891      * Set the fill styles for a certain entry (wave and progress)
    892      *
    893      * @param {CanvasEntry} entry Target entry
    894      * @param {string} waveColor Wave color to draw this entry
    895      * @param {string} progressColor Progress color to draw this entry
    896      */
    897     /*
    898     setFillStyles(entry, waveColor = this.params.waveColor, progressColor = this.params.progressColor) {
    899         entry.setFillStyles(waveColor, progressColor);
    900     }
    901 */
    902     /**
    903      * Return image data of the multi-canvas
    904      *
    905      * When using a `type` of `'blob'`, this will return a `Promise`.
    906      *
    907      * @param {string} format='image/png' An optional value of a format type.
    908      * @param {number} quality=0.92 An optional value between 0 and 1.
    909      * @param {string} type='dataURL' Either 'dataURL' or 'blob'.
    910      * @return {string|string[]|Promise} When using the default `'dataURL'`
    911      * `type` this returns a single data URL or an array of data URLs,
    912      * one for each canvas. When using the `'blob'` `type` this returns a
    913      * `Promise` that resolves with an array of `Blob` instances, one for each
    914      * canvas.
    915      */
    916     /*
    917     getImage(format, quality, type) {
    918         if (type === 'blob') {
    919             return Promise.all(
    920                 this.canvases.map(entry => {
    921                     return entry.getImage(format, quality, type);
    922                 })
    923             );
    924         } else if (type === 'dataURL') {
    925             let images = this.canvases.map(entry =>
    926                 entry.getImage(format, quality, type)
    927             );
    928             return images.length > 1 ? images : images[0];
    929         }
    930     }
    931     */
    932496   
    933497    /**
Note: See TracChangeset for help on using the changeset viewer.