music-visualization-canvas - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/index.d.ts

@@ -0,10 +1,11 @@
+/// <reference types="resize-observer-browser" />
+declare type AudioEventMap = {
+    [K in keyof HTMLMediaElementEventMap]: (this: HTMLAudioElement, ev: HTMLMediaElementEventMap[K]) => any;
+};
 export interface Options {
     src: string;
+    el?: HTMLElement;
     minHeight?: number;
     gap?: number;
-    onPlay?: () => void;
-    onStop?: () => void;
-    audioEvents?: {
-        [key: string]: () => void;
-    };
+    audioEvents?: Partial<AudioEventMap>;
 }
@@ -20,4 +21,3 @@ declare class MusicVisualization {
     objectUrl: string;
-    width: number;
-    height: number;
+    resizeObserver: ResizeObserver;
     constructor(options: Options);
@@ -28,9 +28,3 @@ start(): Promise<void> | undefined;
     changeMusic(file: any): void;
-    private handleResize;
     /**
-     * 创建DOM
-     * @param canvas
-     */
-    private createDomContainer;
-    /**
      *  创建canvas
@@ -37,0 +31,0 @@ */

lib/index.es.js

@@ -6,20 +6,24 @@ import { __assign } from 'tslib';
         var _this = this;
-        this.options = __assign({ src: '', gap: 0, minHeight: 10, onPlay: function () { }, onStop: function () { }, audioEvents: {} }, options);
+        this.options = __assign({ gap: 0, minHeight: 10, el: document.body, audioEvents: {} }, options);
+        var el = this.options.el;
         this.drawRafId = null;
         this.objectUrl = '';
-        this.width = window.innerWidth;
-        this.height = window.innerHeight;
-        this.canvas = this.createCanvas(this.width, this.height);
+        this.canvas = this.createCanvas();
         this.canvasCtx = this.canvas.getContext('2d');
-        this.container = this.createDomContainer(this.canvas);
-        document.body.appendChild(this.container);
+        this.options.el.appendChild(this.canvas);
+        this.canvas.width = el.clientWidth;
+        this.canvas.height = el.clientHeight;
         this.analyser = null;
         this.audio = this.createAudio();
-        if (this.options.audioEvents) {
-            Object.keys(this.options.audioEvents).forEach(function (key) {
-                _this.audio.addEventListener(key, _this.options.audioEvents[key]);
-            });
-        }
-        this.handleResize = this.handleResize.bind(this);
-        window.addEventListener('resize', this.handleResize);
+        Object.keys(this.options.audioEvents).forEach(function (key) {
+            _this.audio.addEventListener(key, _this.options.audioEvents[key]);
+        });
+        this.resizeObserver = new ResizeObserver(function (entries) {
+            for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                var entry = entries_1[_i];
+                _this.canvas.width = entry.target.clientWidth;
+                _this.canvas.height = entry.target.clientHeight;
+            }
+        });
+        this.resizeObserver.observe(el);
     }
@@ -35,9 +39,4 @@ MusicVisualization.prototype.start = function () {
         }
-        if (!this.analyser) {
-            this.analyser = this.createAnalyser(this.audio);
-        }
+        this.createAnalyser();
         return this.audio.play().then(function () {
-            if (_this.options.onPlay) {
-                _this.options.onPlay();
-            }
             _this.draw();
@@ -51,6 +50,3 @@ });
         }
-        this.audio.pause();
-        if (this.options.onStop) {
-            this.options.onStop();
-        }
+        return this.audio.pause();
     };
@@ -63,9 +59,6 @@ MusicVisualization.prototype.destroy = function () {
         }
-        if (this.options.audioEvents) {
-            Object.keys(this.options.audioEvents).forEach(function (key) {
-                _this.audio.removeEventListener(key, _this.options.audioEvents[key]);
-            });
-        }
-        window.removeEventListener('resize', this.handleResize);
-        document.body.removeChild(this.container);
+        Object.keys(this.options.audioEvents).forEach(function (key) {
+            _this.audio.removeEventListener(key, _this.options.audioEvents[key]);
+        });
+        this.resizeObserver.unobserve(this.options.el);
         this.analyser = null;
@@ -82,27 +75,9 @@ };
     };
-    MusicVisualization.prototype.handleResize = function () {
-        this.width = window.innerWidth;
-        this.height = window.innerHeight;
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-    };
     /**
-     * 创建DOM
-     * @param canvas
-     */
-    MusicVisualization.prototype.createDomContainer = function (canvas) {
-        var container = document.createElement('div');
-        container.className = 'music-container';
-        container.style.cssText =
-            'position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;';
-        container.appendChild(canvas);
-        return container;
-    };
-    /**
      *  创建canvas
      */
-    MusicVisualization.prototype.createCanvas = function (width, height) {
+    MusicVisualization.prototype.createCanvas = function () {
         var canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
+        canvas.style.cssText =
+            'position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;';
         return canvas;
@@ -126,5 +101,8 @@ };
      */
-    MusicVisualization.prototype.createAnalyser = function (audio) {
+    MusicVisualization.prototype.createAnalyser = function () {
+        if (this.analyser) {
+            return;
+        }
         var audioCtx = new (AudioContext || webkitAudioContext)();
-        var source = audioCtx.createMediaElementSource(audio);
+        var source = audioCtx.createMediaElementSource(this.audio);
         var analyser = audioCtx.createAnalyser();
@@ -134,3 +112,3 @@ source.connect(analyser);
         analyser.fftSize = 256;
-        return analyser;
+        this.analyser = analyser;
     };
@@ -143,3 +121,4 @@ /**
         var startX = _a.startX, startY = _a.startY, stopX = _a.stopX, stopY = _a.stopY, scaleY = _a.scaleY, arr = _a.arr;
-        var _b = this, height = _b.height, canvasCtx = _b.canvasCtx;
+        var height = this.canvas.height;
+        var canvasCtx = this.canvasCtx;
         var minHeight = this.options.minHeight;
@@ -165,3 +144,3 @@ var len = arr.length;
         var _a = this.options, minHeight = _a.minHeight, gap = _a.gap;
-        var singleWidth = this.width / 2 - gap;
+        var singleWidth = this.canvas.width / 2 - gap;
         canvasCtx.beginPath();
@@ -184,3 +163,3 @@ canvasCtx.moveTo(0, 0);
         var _a = this.options, gap = _a.gap, minHeight = _a.minHeight;
-        var singleWidth = this.width / 2 - gap;
+        var singleWidth = this.canvas.width / 2 - gap;
         canvasCtx.beginPath();
@@ -202,5 +181,6 @@ canvasCtx.moveTo(0, 0);
         }
-        var _a = this, analyser = _a.analyser, canvasCtx = _a.canvasCtx, width = _a.width, height = _a.height;
+        var _a = this.canvas, width = _a.width, height = _a.height;
         var gap = this.options.gap;
-        var singleWidth = this.width / 2 - gap;
+        var _b = this, analyser = _b.analyser, canvasCtx = _b.canvasCtx;
+        var singleWidth = width / 2 - gap;
         var bufferLength = analyser.frequencyBinCount - 5;
@@ -207,0 +187,0 @@ var dataArray = new Uint8Array(bufferLength).slice(0, -20);

lib/index.js

@@ -1,2 +0,2 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).MusicVisualization={})}(this,function(t){"use strict";var i=function(){return(i=Object.assign||function(t){for(var i,e=1,n=arguments.length;e<n;e++)for(var o in i=arguments[e])Object.prototype.hasOwnProperty.call(i,o)&&(t[o]=i[o]);return t}).apply(this,arguments)},e=function(){function t(t){var e=this;this.options=i({src:"",gap:0,minHeight:10,onPlay:function(){},onStop:function(){},audioEvents:{}},t),this.drawRafId=null,this.objectUrl="",this.width=window.innerWidth,this.height=window.innerHeight,this.canvas=this.createCanvas(this.width,this.height),this.canvasCtx=this.canvas.getContext("2d"),this.container=this.createDomContainer(this.canvas),document.body.appendChild(this.container),this.analyser=null,this.audio=this.createAudio(),this.options.audioEvents&&Object.keys(this.options.audioEvents).forEach(function(t){e.audio.addEventListener(t,e.options.audioEvents[t])}),this.handleResize=this.handleResize.bind(this),window.addEventListener("resize",this.handleResize)}return t.prototype.start=function(){var t=this;if(this.audio.src&&(this.audio.paused||!(this.audio.duration>0)))return this.analyser||(this.analyser=this.createAnalyser(this.audio)),this.audio.play().then(function(){t.options.onPlay&&t.options.onPlay(),t.draw()})},t.prototype.stop=function(){this.drawRafId&&(window.cancelAnimationFrame(this.drawRafId),this.drawRafId=null),this.audio.pause(),this.options.onStop&&this.options.onStop()},t.prototype.destroy=function(){var t=this;this.stop(),this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),this.options.audioEvents&&Object.keys(this.options.audioEvents).forEach(function(i){t.audio.removeEventListener(i,t.options.audioEvents[i])}),window.removeEventListener("resize",this.handleResize),document.body.removeChild(this.container),this.analyser=null},t.prototype.changeMusic=function(t){this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),this.objectUrl=window.URL.createObjectURL(t),this.stop(),this.audio.src=this.objectUrl,this.start()},t.prototype.handleResize=function(){this.width=window.innerWidth,this.height=window.innerHeight,this.canvas.width=this.width,this.canvas.height=this.height},t.prototype.createDomContainer=function(t){var i=document.createElement("div");return i.className="music-container",i.style.cssText="position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;",i.appendChild(t),i},t.prototype.createCanvas=function(t,i){var e=document.createElement("canvas");return e.width=t,e.height=i,e},t.prototype.createAudio=function(){var t=new Audio;return t.src=this.options.src,t.preload="auto",t.volume=.8,t.loop=!0,t.crossOrigin="anonymous",t},t.prototype.createAnalyser=function(t){var i=new(AudioContext||webkitAudioContext),e=i.createMediaElementSource(t),n=i.createAnalyser();return e.connect(n),n.connect(i.destination),n.fftSize=256,n},t.prototype.drawCurveLine=function(t){for(var i=t.startX,e=t.startY,n=t.stopX,o=t.stopY,s=t.scaleY,a=t.arr,r=this.height,h=this.canvasCtx,d=this.options.minHeight,c=a.length,u=n/(c-1),p=i,l=e,f=0;f<c-1;f++){var v=p+u,w=(r/3*(a[f]/256)+d)*s,y=(p+v)/2,m=(l+w)/2;h.quadraticCurveTo(p,l,y,m),p=v,l=w}h.quadraticCurveTo(p,l,n,o*s)},t.prototype.drawGraph=function(t){var i=this.canvasCtx,e=this.options,n=e.minHeight,o=e.gap,s=this.width/2-o;i.beginPath(),i.moveTo(0,0),i.lineTo(0,n),this.drawCurveLine({startX:0,startY:n,stopX:s,stopY:n,scaleY:1,arr:t}),i.lineTo(s,0),i.fill()},t.prototype.drawLine=function(t){var i=this.canvasCtx,e=this.options,n=e.gap,o=e.minHeight,s=this.width/2-n;i.beginPath(),i.moveTo(0,0),this.drawCurveLine({startX:0,startY:o,stopX:s,stopY:o,scaleY:1.1,arr:t}),i.stroke()},t.prototype.draw=function(){if(this.analyser){var t=this.analyser,i=this.canvasCtx,e=this.width,n=this.height,o=this.options.gap,s=this.width/2-o,a=t.frequencyBinCount-5,r=new Uint8Array(a).slice(0,-20);t.getByteFrequencyData(r),i.clearRect(0,0,e,n);var h=i.createLinearGradient(0,0,s,0);h.addColorStop(0,"#ff30a2"),h.addColorStop(1,"#d8db31");var d=i.createLinearGradient(0,0,s,0);d.addColorStop(0,"#00cf2e"),d.addColorStop(1,"#3bddd2"),i.save(),i.transform(1,0,0,-1,0,n),i.fillStyle=h,i.strokeStyle=h,this.drawGraph(r),this.drawLine(r),i.restore(),i.save(),i.transform(-1,0,0,-1,e,n),i.fillStyle=d,i.strokeStyle=d,this.drawGraph(r),this.drawLine(r),i.restore(),this.drawRafId=requestAnimationFrame(this.draw.bind(this))}},t}();t.default=e,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).MusicVisualization={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,i=1,a=arguments.length;i<a;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},i=function(){function t(t){var i=this;this.options=e({gap:0,minHeight:10,el:document.body,audioEvents:{}},t);var a=this.options.el;this.drawRafId=null,this.objectUrl="",this.canvas=this.createCanvas(),this.canvasCtx=this.canvas.getContext("2d"),this.options.el.appendChild(this.canvas),this.canvas.width=a.clientWidth,this.canvas.height=a.clientHeight,this.analyser=null,this.audio=this.createAudio(),Object.keys(this.options.audioEvents).forEach(function(t){i.audio.addEventListener(t,i.options.audioEvents[t])}),this.resizeObserver=new ResizeObserver(function(t){for(var e=0,a=t;e<a.length;e++){var s=a[e];i.canvas.width=s.target.clientWidth,i.canvas.height=s.target.clientHeight}}),this.resizeObserver.observe(a)}return t.prototype.start=function(){var t=this;if(this.audio.src&&(this.audio.paused||!(this.audio.duration>0)))return this.createAnalyser(),this.audio.play().then(function(){t.draw()})},t.prototype.stop=function(){return this.drawRafId&&(window.cancelAnimationFrame(this.drawRafId),this.drawRafId=null),this.audio.pause()},t.prototype.destroy=function(){var t=this;this.stop(),this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),Object.keys(this.options.audioEvents).forEach(function(e){t.audio.removeEventListener(e,t.options.audioEvents[e])}),this.resizeObserver.unobserve(this.options.el),this.analyser=null},t.prototype.changeMusic=function(t){this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),this.objectUrl=window.URL.createObjectURL(t),this.stop(),this.audio.src=this.objectUrl,this.start()},t.prototype.createCanvas=function(){var t=document.createElement("canvas");return t.style.cssText="position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;",t},t.prototype.createAudio=function(){var t=new Audio;return t.src=this.options.src,t.preload="auto",t.volume=.8,t.loop=!0,t.crossOrigin="anonymous",t},t.prototype.createAnalyser=function(){if(!this.analyser){var t=new(AudioContext||webkitAudioContext),e=t.createMediaElementSource(this.audio),i=t.createAnalyser();e.connect(i),i.connect(t.destination),i.fftSize=256,this.analyser=i}},t.prototype.drawCurveLine=function(t){for(var e=t.startX,i=t.startY,a=t.stopX,s=t.stopY,o=t.scaleY,n=t.arr,r=this.canvas.height,h=this.canvasCtx,c=this.options.minHeight,d=n.length,u=a/(d-1),l=e,p=i,v=0;v<d-1;v++){var f=l+u,y=(r/3*(n[v]/256)+c)*o,w=(l+f)/2,b=(p+y)/2;h.quadraticCurveTo(l,p,w,b),l=f,p=y}h.quadraticCurveTo(l,p,a,s*o)},t.prototype.drawGraph=function(t){var e=this.canvasCtx,i=this.options,a=i.minHeight,s=i.gap,o=this.canvas.width/2-s;e.beginPath(),e.moveTo(0,0),e.lineTo(0,a),this.drawCurveLine({startX:0,startY:a,stopX:o,stopY:a,scaleY:1,arr:t}),e.lineTo(o,0),e.fill()},t.prototype.drawLine=function(t){var e=this.canvasCtx,i=this.options,a=i.gap,s=i.minHeight,o=this.canvas.width/2-a;e.beginPath(),e.moveTo(0,0),this.drawCurveLine({startX:0,startY:s,stopX:o,stopY:s,scaleY:1.1,arr:t}),e.stroke()},t.prototype.draw=function(){if(this.analyser){var t=this.canvas,e=t.width,i=t.height,a=this.options.gap,s=this.analyser,o=this.canvasCtx,n=e/2-a,r=s.frequencyBinCount-5,h=new Uint8Array(r).slice(0,-20);s.getByteFrequencyData(h),o.clearRect(0,0,e,i);var c=o.createLinearGradient(0,0,n,0);c.addColorStop(0,"#ff30a2"),c.addColorStop(1,"#d8db31");var d=o.createLinearGradient(0,0,n,0);d.addColorStop(0,"#00cf2e"),d.addColorStop(1,"#3bddd2"),o.save(),o.transform(1,0,0,-1,0,i),o.fillStyle=c,o.strokeStyle=c,this.drawGraph(h),this.drawLine(h),o.restore(),o.save(),o.transform(-1,0,0,-1,e,i),o.fillStyle=d,o.strokeStyle=d,this.drawGraph(h),this.drawLine(h),o.restore(),this.drawRafId=requestAnimationFrame(this.draw.bind(this))}},t}();t.default=i,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "music-visualization-canvas",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "music visualization",
@@ -14,5 +14,5 @@ "main": "lib/index.js",
   "scripts": {
-    "dev": "parcel ./src/index.html --open",
+    "dev": "parcel ./example/index.html --open",
     "build": "rollup -c",
-    "build:example": "rm -rf dist/* && parcel build ./src/index.html --public-url ./ --out-dir dist --no-source-maps",
+    "build:example": "rm -rf dist/* && parcel build ./example/index.html --public-url ./ --out-dir dist --no-source-maps",
     "deploy": "bash build/deploy.sh",
@@ -31,2 +31,3 @@ "release": "bash build/release.sh"
     "@babel/preset-env": "^7.2.3",
+    "@types/resize-observer-browser": "^0.1.4",
     "@typescript-eslint/eslint-plugin": "^1.5.0",
@@ -33,0 +34,0 @@ "@typescript-eslint/parser": "^1.5.0",

README.md

 ## 音乐可视化
 
-自己娱乐的作品
+自己娱乐的作品, 由某音乐 MV 引发的灵感, 自用于一些彩蛋
 
@@ -8,1 +8,47 @@ ## Demo
 <https://mengxiong10.github.io/music-visualization-canvas/>
+
+## 安装
+
+```bash
+$ npm install music-visualization-canvas --save
+```
+
+## 用法
+
+```js
+import MusicVisualization from 'music-visualization-canvas';
+
+const mv = new MusicVisualization({
+  src: 'https://music.mp3',
+  audioEvents: {
+    playing: () => {},
+    pause: () => {},
+    canplay: () => {},
+    error: () => {}
+  }
+});
+
+// 暂停
+mv.stop();
+
+// 播放
+mv.start();
+```
+
+## api
+
+### 选项
+
+| Key         | 描述                   | 默认值        |
+| ----------- | ---------------------- | ------------- |
+| src         | 音频的 url             | -             |
+| el          | canvas 插入的 DOM 元素 | document.body |
+| audioEvents | audio 对象上注册的事件 | -             |
+
+### 方法
+
+| 方法    | 描述     |
+| ------- | -------- |
+| start   | 开始播放 |
+| stop    | 暂停     |
+| destroy | 销毁     |

src/index.ts

@@ -6,11 +6,15 @@ declare const webkitAudioContext: {
 
+type AudioEventMap = {
+  [K in keyof HTMLMediaElementEventMap]: (
+    this: HTMLAudioElement,
+    ev: HTMLMediaElementEventMap[K]
+  ) => any;
+};
+
 export interface Options {
   src: string;
+  el?: HTMLElement;
   minHeight?: number;
   gap?: number;
-  onPlay?: () => void;
-  onStop?: () => void;
-  audioEvents?: {
-    [key: string]: () => void;
-  };
+  audioEvents?: Partial<AudioEventMap>;
 }
@@ -27,12 +31,9 @@
   objectUrl: string;
-  width: number;
-  height: number;
+  resizeObserver: ResizeObserver;
 
   constructor(options: Options) {
     this.options = {
-      src: '',
       gap: 0,
       minHeight: 10,
-      onPlay: () => {},
-      onStop: () => {},
+      el: document.body,
       audioEvents: {},
@@ -42,23 +43,27 @@ ...options
 
+    const { el } = this.options;
+
     this.drawRafId = null;
     this.objectUrl = '';
+    this.canvas = this.createCanvas();
+    this.canvasCtx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
+    this.options.el.appendChild(this.canvas);
 
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
+    this.canvas.width = el.clientWidth;
+    this.canvas.height = el.clientHeight;
 
-    this.canvas = this.createCanvas(this.width, this.height);
-    this.canvasCtx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
-    this.container = this.createDomContainer(this.canvas);
-    document.body.appendChild(this.container);
-
     this.analyser = null;
     this.audio = this.createAudio();
 
-    if (this.options.audioEvents) {
-      Object.keys(this.options.audioEvents).forEach(key => {
-        this.audio.addEventListener(key, this.options.audioEvents[key]);
-      });
-    }
-    this.handleResize = this.handleResize.bind(this);
-    window.addEventListener('resize', this.handleResize);
+    Object.keys(this.options.audioEvents).forEach((key) => {
+      this.audio.addEventListener(key, this.options.audioEvents[key]);
+    });
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        this.canvas.width = entry.target.clientWidth;
+        this.canvas.height = entry.target.clientHeight;
+      }
+    });
+    this.resizeObserver.observe(el);
   }
@@ -74,9 +79,4 @@
     }
-    if (!this.analyser) {
-      this.analyser = this.createAnalyser(this.audio);
-    }
+    this.createAnalyser();
     return this.audio.play().then(() => {
-      if (this.options.onPlay) {
-        this.options.onPlay();
-      }
       this.draw();
@@ -91,6 +91,3 @@ });
     }
-    this.audio.pause();
-    if (this.options.onStop) {
-      this.options.onStop();
-    }
+    return this.audio.pause();
   }
@@ -103,9 +100,6 @@
     }
-    if (this.options.audioEvents) {
-      Object.keys(this.options.audioEvents).forEach(key => {
-        this.audio.removeEventListener(key, this.options.audioEvents[key]);
-      });
-    }
-    window.removeEventListener('resize', this.handleResize);
-    document.body.removeChild(this.container);
+    Object.keys(this.options.audioEvents).forEach((key) => {
+      this.audio.removeEventListener(key, this.options.audioEvents[key]);
+    });
+    this.resizeObserver.unobserve(this.options.el);
     this.analyser = null;
@@ -124,31 +118,9 @@ }
 
-  private handleResize() {
-    this.width = window.innerWidth;
-    this.height = window.innerHeight;
-    this.canvas.width = this.width;
-    this.canvas.height = this.height;
-  }
-
   /**
-   * 创建DOM
-   * @param canvas
-   */
-  private createDomContainer(canvas: HTMLCanvasElement) {
-    const container = document.createElement('div');
-    container.className = 'music-container';
-    container.style.cssText =
-      'position: fixed; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;';
-
-    container.appendChild(canvas);
-
-    return container;
-  }
-
-  /**
    *  创建canvas
    */
-  private createCanvas(width: number, height: number) {
+  private createCanvas() {
     const canvas = document.createElement('canvas');
-    canvas.width = width;
-    canvas.height = height;
+    canvas.style.cssText =
+      'position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;';
     return canvas;
@@ -174,5 +146,8 @@ }
    */
-  private createAnalyser(audio: HTMLMediaElement) {
+  private createAnalyser() {
+    if (this.analyser) {
+      return;
+    }
     const audioCtx = new (AudioContext || webkitAudioContext)();
-    const source = audioCtx.createMediaElementSource(audio);
+    const source = audioCtx.createMediaElementSource(this.audio);
     const analyser = audioCtx.createAnalyser();
@@ -182,3 +157,3 @@ source.connect(analyser);
     analyser.fftSize = 256;
-    return analyser;
+    this.analyser = analyser;
   }
@@ -205,3 +180,4 @@
   }) {
-    const { height, canvasCtx } = this;
+    const { height } = this.canvas;
+    const { canvasCtx } = this;
     const { minHeight } = this.options;
@@ -228,3 +204,3 @@ const len = arr.length;
     const { minHeight, gap } = this.options;
-    const singleWidth = this.width / 2 - gap;
+    const singleWidth = this.canvas.width / 2 - gap;
     canvasCtx.beginPath();
@@ -248,3 +224,3 @@ canvasCtx.moveTo(0, 0);
     const { gap, minHeight } = this.options;
-    const singleWidth = this.width / 2 - gap;
+    const singleWidth = this.canvas.width / 2 - gap;
     canvasCtx.beginPath();
@@ -267,5 +243,6 @@ canvasCtx.moveTo(0, 0);
     }
-    const { analyser, canvasCtx, width, height } = this;
+    const { width, height } = this.canvas;
     const { gap } = this.options;
-    const singleWidth = this.width / 2 - gap;
+    const { analyser, canvasCtx } = this;
+    const singleWidth = width / 2 - gap;
     const bufferLength = analyser.frequencyBinCount - 5;
@@ -272,0 +249,0 @@ const dataArray = new Uint8Array(bufferLength).slice(0, -20);

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

54

increased by575%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

59190

decreased by-4.97%

Dev dependency count

16

increased by6.67%

Lines of code

514

decreased by-8.7%

No dependency changes