From dc4f083da9d7cf9b9d9cc54edba461b06f2db112 Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:48:48 -0700 Subject: [PATCH 1/2] support building wave with just an analyser --- dist/bundle.js | 2 +- dist/src/index.d.ts | 2 +- src/index.ts | 22 +++++++++++++++------- test/analyser.html | 42 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 59 insertions(+), 9 deletions(-) create mode 100644 test/analyser.html diff --git a/dist/bundle.js b/dist/bundle.js index 0528317..f58fcdf 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -1 +1 @@ -!function(t,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var i=o();for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,(()=>(()=>{"use strict";var t={935:function(t,o,i){var n=this&&this.__assign||function(){return n=Object.assign||function(t){for(var o,i=1,n=arguments.length;i{Object.defineProperty(o,"__esModule",{value:!0}),o.AudioData=void 0;var i=function(){function t(t){this.data=t}return t.prototype.setFrequencyBand=function(t){var o=Math.floor(.0625*this.data.length),i=Math.floor(.0625*this.data.length),n=Math.floor(.375*this.data.length),s={base:this.data.slice(0,o),lows:this.data.slice(o+1,o+i),mids:this.data.slice(o+i+1,o+i+n),highs:this.data.slice(o+i+n+1)};this.data=s[t]},t.prototype.scaleData=function(t){t<255&&(this.data=this.data.map((function(o){var i=Math.round(o/255*100)/100;return t*i})))},t}();o.AudioData=i},426:function(t,o){var i=this&&this.__awaiter||function(t,o,i,n){return new(i||(i=Promise))((function(s,a){function e(t){try{h(n.next(t))}catch(t){a(t)}}function r(t){try{h(n.throw(t))}catch(t){a(t)}}function h(t){var o;t.done?s(t.value):(o=t.value,o instanceof i?o:new i((function(t){t(o)}))).then(e,r)}h((n=n.apply(t,o||[])).next())}))},n=this&&this.__generator||function(t,o){var i,n,s,a,e={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){return function(a){if(i)throw new TypeError("Generator is already executing.");for(;e;)try{if(i=1,n&&(s=2&a[0]?n.return:a[0]?n.throw||((s=n.return)&&s.call(n),0):n.next)&&!(s=s.call(n,a[1])).done)return s;switch(n=0,s&&(a=[2&a[0],s.value]),a[0]){case 0:case 1:s=a;break;case 4:return e.label++,{value:a[1],done:!1};case 5:e.label++,n=a[1],a=[0];continue;case 7:a=e.ops.pop(),e.trys.pop();continue;default:if(!((s=(s=e.trys).length>0&&s[s.length-1])||6!==a[0]&&2!==a[0])){e=0;continue}if(3===a[0]&&(!s||a[1]>s[0]&&a[1]{var t=n;Object.defineProperty(t,"__esModule",{value:!0}),t.Wave=void 0;var o=i(935),s=i(519),a=i(938),e=i(540),r=i(522),h=i(658),c=i(817),u=i(123),l=i(270),p=i(857),d=function(){function t(t,i,n){void 0===n&&(n=!1);var d=this;this.animations={Arcs:o.Arcs,Circles:s.Circles,Cubes:a.Cubes,Flower:e.Flower,Glob:r.Glob,Lines:h.Lines,Shine:c.Shine,Square:u.Square,Turntable:l.Turntable,Wave:p.Wave},this._activeAnimations=[],this._canvasElement=i,this._canvasContext=this._canvasElement.getContext("2d"),this._muteAudio=n,this._interacted=!1,t instanceof HTMLAudioElement?(this._audioElement=t,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?["touchstart","touchmove","touchend","mouseup","click"].forEach((function(t){document.body.addEventListener(t,(function(){return d.connectAnalyser()}),{once:!0})})):this._audioElement.addEventListener("play",(function(){return d.connectAnalyser()}),{once:!0})):(this._audioContext=t.context,this._audioSource=t.source,this._audioAnalyser=this._audioContext.createAnalyser(),this._play())}return t.prototype.connectAnalyser=function(){this._interacted||(this._interacted=!0,this._audioContext=new AudioContext,this._audioSource=this._audioContext.createMediaElementSource(this._audioElement),this._audioAnalyser=this._audioContext.createAnalyser(),this._play())},t.prototype._play=function(){var t=this;this._audioSource.connect(this._audioAnalyser),this._muteAudio||this._audioSource.connect(this._audioContext.destination),this._audioAnalyser.smoothingTimeConstant=.85,this._audioAnalyser.fftSize=1024;var o=new Uint8Array(this._audioAnalyser.frequencyBinCount),i=function(){t._audioAnalyser.getByteFrequencyData(o),t._canvasContext.clearRect(0,0,t._canvasContext.canvas.width,t._canvasContext.canvas.height),t._activeAnimations.forEach((function(i){i.draw(o,t._canvasContext)})),window.requestAnimationFrame(i)};i()},t.prototype.addAnimation=function(t){this._activeAnimations.push(t)},t.prototype.clearAnimations=function(){this._activeAnimations=[]},t}();t.Wave=d})(),n})())); \ No newline at end of file +!function(t,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o();else if("function"==typeof define&&define.amd)define([],o);else{var i=o();for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(this,(()=>(()=>{"use strict";var t={196:function(t,o,i){var n=this&&this.__assign||function(){return n=Object.assign||function(t){for(var o,i=1,n=arguments.length;i{Object.defineProperty(o,"__esModule",{value:!0}),o.AudioData=void 0;var i=function(){function t(t){this.data=t}return t.prototype.setFrequencyBand=function(t){var o=Math.floor(.0625*this.data.length),i=Math.floor(.0625*this.data.length),n=Math.floor(.375*this.data.length),s={base:this.data.slice(0,o),lows:this.data.slice(o+1,o+i),mids:this.data.slice(o+i+1,o+i+n),highs:this.data.slice(o+i+n+1)};this.data=s[t]},t.prototype.scaleData=function(t){t<255&&(this.data=this.data.map((function(o){var i=Math.round(o/255*100)/100;return t*i})))},t}();o.AudioData=i},27:function(t,o){var i=this&&this.__awaiter||function(t,o,i,n){return new(i||(i=Promise))((function(s,a){function e(t){try{h(n.next(t))}catch(t){a(t)}}function r(t){try{h(n.throw(t))}catch(t){a(t)}}function h(t){var o;t.done?s(t.value):(o=t.value,o instanceof i?o:new i((function(t){t(o)}))).then(e,r)}h((n=n.apply(t,o||[])).next())}))},n=this&&this.__generator||function(t,o){var i,n,s,a,e={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){return function(a){if(i)throw new TypeError("Generator is already executing.");for(;e;)try{if(i=1,n&&(s=2&a[0]?n.return:a[0]?n.throw||((s=n.return)&&s.call(n),0):n.next)&&!(s=s.call(n,a[1])).done)return s;switch(n=0,s&&(a=[2&a[0],s.value]),a[0]){case 0:case 1:s=a;break;case 4:return e.label++,{value:a[1],done:!1};case 5:e.label++,n=a[1],a=[0];continue;case 7:a=e.ops.pop(),e.trys.pop();continue;default:if(!((s=(s=e.trys).length>0&&s[s.length-1])||6!==a[0]&&2!==a[0])){e=0;continue}if(3===a[0]&&(!s||a[1]>s[0]&&a[1]{var t=n;Object.defineProperty(t,"__esModule",{value:!0}),t.Wave=void 0;var o=i(196),s=i(597),a=i(595),e=i(683),r=i(157),h=i(541),u=i(475),c=i(614),l=i(373),p=i(735),d=function(){function t(t,i,n){void 0===n&&(n=!1);var d=this;this.animations={Arcs:o.Arcs,Circles:s.Circles,Cubes:a.Cubes,Flower:e.Flower,Glob:r.Glob,Lines:h.Lines,Shine:u.Shine,Square:c.Square,Turntable:l.Turntable,Wave:p.Wave},this._activeAnimations=[],this._canvasElement=i,this._canvasContext=this._canvasElement.getContext("2d"),this._muteAudio=n,this._interacted=!1,t instanceof HTMLAudioElement?(this._audioElement=t,/^((?!chrome|android).)*safari/i.test(navigator.userAgent)?["touchstart","touchmove","touchend","mouseup","click"].forEach((function(t){document.body.addEventListener(t,(function(){return d.connectAnalyser()}),{once:!0})})):this._audioElement.addEventListener("play",(function(){return d.connectAnalyser()}),{once:!0})):t instanceof AnalyserNode?(this._audioAnalyser=t,this._audioContext=null,this._audioSource=null,this._play()):t&&(this._audioContext=t.context,this._audioSource=t.source,this._audioAnalyser=this._audioContext.createAnalyser(),this._play())}return t.prototype.connectAnalyser=function(){this._interacted||(this._interacted=!0,this._audioContext=new AudioContext,this._audioSource=this._audioContext.createMediaElementSource(this._audioElement),this._audioAnalyser=this._audioContext.createAnalyser(),this._play())},t.prototype._play=function(){var t=this;this._audioSource&&(this._audioSource.connect(this._audioAnalyser),this._muteAudio||this._audioSource.connect(this._audioContext.destination)),this._audioAnalyser.smoothingTimeConstant=.85,this._audioAnalyser.fftSize=1024;var o=new Uint8Array(this._audioAnalyser.frequencyBinCount),i=function(){t._audioAnalyser.getByteFrequencyData(o),t._canvasContext.clearRect(0,0,t._canvasContext.canvas.width,t._canvasContext.canvas.height),t._activeAnimations.forEach((function(i){i.draw(o,t._canvasContext)})),window.requestAnimationFrame(i)};i()},t.prototype.addAnimation=function(t){this._activeAnimations.push(t)},t.prototype.clearAnimations=function(){this._activeAnimations=[]},t}();t.Wave=d})(),n})())); \ No newline at end of file diff --git a/dist/src/index.d.ts b/dist/src/index.d.ts index 0272e92..83839ba 100644 --- a/dist/src/index.d.ts +++ b/dist/src/index.d.ts @@ -13,7 +13,7 @@ export { IArcsOptions, ICirclesOptions, ICubesOptions, IFlowerOptions, IGlobOpti export declare type AudioElement = HTMLAudioElement | { context: AudioContext; source: MediaElementAudioSourceNode | MediaStreamAudioSourceNode; -}; +} | AnalyserNode; export declare class Wave { animations: { Arcs: typeof Arcs; diff --git a/src/index.ts b/src/index.ts index ea1b668..9e31066 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,7 +28,8 @@ export type AudioElement = | { context: AudioContext; source: MediaElementAudioSourceNode | MediaStreamAudioSourceNode; - }; + } + | AnalyserNode; export class Wave { public animations = { @@ -47,8 +48,8 @@ export class Wave { private _audioElement: HTMLAudioElement; private _canvasElement: HTMLCanvasElement; private _canvasContext: CanvasRenderingContext2D; - private _audioContext: AudioContext; - private _audioSource: MediaElementAudioSourceNode | MediaStreamAudioSourceNode; + private _audioContext: AudioContext | null; + private _audioSource: MediaElementAudioSourceNode | MediaStreamAudioSourceNode | null; private _audioAnalyser: AnalyserNode; private _muteAudio: boolean; private _interacted: boolean; @@ -79,7 +80,12 @@ export class Wave { { once: true } ); } - } else { + } else if (audioElement instanceof AnalyserNode) { + this._audioAnalyser = audioElement; + this._audioContext = null; + this._audioSource = null; + this._play(); + } else if (audioElement) { this._audioContext = audioElement.context; this._audioSource = audioElement.source; this._audioAnalyser = this._audioContext.createAnalyser(); @@ -98,9 +104,11 @@ export class Wave { } private _play(): void { - this._audioSource.connect(this._audioAnalyser); - if (!this._muteAudio) { - this._audioSource.connect(this._audioContext.destination); + if (this._audioSource) { + this._audioSource.connect(this._audioAnalyser); + if (!this._muteAudio) { + this._audioSource.connect(this._audioContext.destination); + } } this._audioAnalyser.smoothingTimeConstant = 0.85; this._audioAnalyser.fftSize = 1024; diff --git a/test/analyser.html b/test/analyser.html new file mode 100644 index 0000000..6ff75cf --- /dev/null +++ b/test/analyser.html @@ -0,0 +1,42 @@ + + + + + + + Document + + + + + + + + + + + + From fc9d339c49d1f7da44238f026c4a6870a36df9f6 Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Wed, 18 Oct 2023 18:52:50 -0700 Subject: [PATCH 2/2] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e2c9b00..10a4773 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@foobar404/wave", - "version": "2.0.4", + "version": "2.0.5", "description": "Audio visualizer library for javascript.", "main": "dist/bundle.js", "scripts": {