import * as CanvasUtils from '../Utils/CanvasUtils' ; import { RecordStateType } from '../Constants/AppTypings' ; export interface ISpectrumOptions { color ? : string ; isActive ? : boolean ; recordState ? : RecordStateType ; } class Spectrum { private canvas : HTMLCanvasElement ; private pixelRatio : number ; private analyserNode : AnalyserNode ; private defaultOptions : ISpectrumOptions = { color : 'black' , isActive : true , } ; constructor ( canvas , analyserNode ) { this . canvas = canvas ; this . analyserNode = analyserNode ; this . pixelRatio = CanvasUtils . getPixelRatio ( ) ; } public Draw ( options = this . defaultOptions ) { if ( options . isActive ) { const ctx = this . canvas . getContext ( '2d' ) ; const pixelRatio = this . pixelRatio ; const width = this . canvas . width / pixelRatio ; const height = this . canvas . height / pixelRatio ; const barWidth = 6 ; const maxHeight = height - 2 ; const barSpacing = 9 ; const barCount = ( width / ( barSpacing + barWidth ) ) ; const maxMag = 255 ; const freqByteData = new Uint8Array ( this . analyserNode . frequencyBinCount ) ; this . analyserNode . getByteFrequencyData ( freqByteData ) ; ctx . fillStyle = options . color ; for ( let i = 0 ; i < barCount ; i ++ ) { const magnitude = freqByteData [ i ] / ( maxMag / maxHeight ) ; ctx . fillRect ( ( barWidth + barSpacing ) * i , height , barWidth , - magnitude ) ; } } } } export default Spectrum ;