• Unexpected token issue caused by Safari, as class variables should be declared in constructor
• Fixing Safari Bug for not finding audio context with fallback to webkitAudioContext

When using one-page apps which will render the DOM depending on the current route, if the current route has to render the Wave.js visualizer, then it has to be destroyed then created again, it will result in the following error :

bundle.cjs.js:13 Uncaught DOMException: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

This error occurs because the sources are being stored in the class itself which is destroyed and created again :

this.sources[element.toString()] = {
                "audioCtx": audioCtx,
                "analyser": analyser,
                "source": source
            };

For classic webpages there won't be any problem since the visualizer will normally not be destroyed, but for all modern frameworks like React, Angular, VueJS, etc.. it will fail.

I think we should allow a way to override the default sources storage if needed by passing a setSource method which will be used instead of all such cases

this.sources[element.toString()] = {
                "audioCtx": audioCtx,
                "analyser": analyser,
                "source": source
            };

And a getSource method which will be be used as a getter in such cases :

this.sources[element.toString()].animation

I created a simple working fiddle : http://jsfiddle.net/ma3zu8n5/1/

Uncaught TypeError: this.current_stream.loop is not a function at Wave.playStream (bundle.iife.js:266)

It's a small file. I am using codepen to learn this. I am using fromFile - so do I need playStream()?

Here's the link to my pen: https://codepen.io/KoniKodes/pen/mdmEpMV

Hi, first off what an amazing script you got here. Great job on this!

I was able to successfully display the waves in firefox and chrome, desktop and android devices. But for some reason the waves do not appear on safari iPhone.

I'm running an icecast server and displaying the waves via audio tag like so..

<audio id="radio" crossorigin="anonymous">
       <source src="https://mystation.com/stream" type="audio/mpeg" />
       <source src="https://mystation.com/stream.ogg" type="audio/ogg" />
</audio>

and I am triggering the playing of the audio like this..

var player = document.getElementById('radio');
player.load();
player.play();

I have a canvas html element on the page like this.. <canvas id="wavesCanvas" height="250" width="500"></canvas>

The waves is set like this..

var wave = new Wave();
var options = {type:"shockwave", colors: ["#6c2a99", "#e01919", "#b4751d"]};
wave.fromElement("radio","wavesCanvas",options);

The audio plays on all devices including safari on iPhone. The wavesjs shows on all browsers except safari on iPhone. I should note that I have not tested on safari on a mac because I do not own a mac at the moment.

Is this a known issue? Is there any special configurations needed for this to work on safari?

Wave.js doesn't seem to have ng-add support for Angular. This is making it difficult to use with Angular, especially since this package can't be recognized by Angular even after an NPM install.

Error: src/app/components/posts/record/record.component.ts:7:20 - error TS7016: Could not find a declaration file for module '@foobar404/wave'. '/home/electrenator/Documents/Code/[redacted]/front-end/node_modules/@foobar404/wave/dist/bundle.cjs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/foobar404__wave` if it exists or add a new declaration (.d.ts) file containing `declare module '@foobar404/wave';`

7 import {Wave} from '@foobar404/wave';
                     ~~~~~~~~~~~~~~~~~

I installed this package via the Angular CLI. This yields the same result as installing it via NPM. My install log:

$ ng add @foobar404/wave
ℹ Using package manager: npm
✔ Found compatible package version: @foobar404/[email protected].
✔ Package information loaded.

The package @foobar404/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

Currently I can't figure out how I can still use this package within my project. It would be nice if I would be able too :)

Software versions

Angular CLI: 12.2.13 Node: 12.21.0 Package Manager: npm 8.1.3 OS: linux x64 typescript: 4.3.5

hi, first. you did a great work.

am trying to visualize stream with multiple tracks, but visuals are only based on one track (the first track in the stream ) am new to web audio api. i would really appreciate your help.

(2.0 - I just upgraded today)

I'm trying to program some pre-sets for wave options and frequencies, and finding that IWaveOptions (and its enum for frequencyBand) are hidden away, meaning I have to go through an any or do hacks like frequencyBand: f as "base" | "lows" | "mids" | "highs" to get it to work. I'm trying to reconstruct what was "shockwave" in version 1 (3 frequency waves, each a different color).

Also, Wave (the animation) is kind over-powered when not frequency-split. I find that on a small canvas, it is often at 100% and so isn't really a very interesting visualization.

Hello, I've been using v1.x version of your lib and I was able to make effect like on attached image with Flower type.

I wanted to migrate to v 2.0, but effect of flower is completely different. Shine is kind of looking similiar, but:

1. The lines go only outside of diameter
2. When I slide the volume to max, lines are too big and I couldn't fix it with any options

This is old Flower with maximum volume:

This is new Shine with maximum volume:

Do you think I can achieve such effect with v2.0? Or wouldnt be possible to get an option to specify max width / height of the specific animation types somehow?

Thank you.

Followed the guide to use the CDN version and how to start the stream, etc but I am getting the following error.

wave.js:266 Uncaught TypeError: this.current_stream.loop is not a function at Wave.playStream (wave.js:266) at playSound (player.js:46) at change (player.js:72) at HTMLElement.onclick ((index):214)

Is there a way you could implement visualising audio while the audio tag is muted? I want the bars to jump on autoplay but the user has to unmute it for a better UX. In a previous issue, someone suggested { connectDestination: false } but that no longer works

Hello @foobar404,

Since we are more and more persons to use Wave.js, I think this is the right moment to go a step further and to rewrite the library to make it cleaner, more consistent, and easier to maintain, using Typescript. I spent some days on this task and I'm coming with an available tested proposition.

Since it would be a huge PR and I'm not sure how you wish (or don't wish) to integrate it, I put the proposition in my own temporary repository for the moment. You can take a look and decide what to do with it Here.

I'd be happy to help you with the integration if you need anything.

I tried to address the following concerns :

• Taking benefit of all typescript features.
• Typing variables (safer usage, clearer exposure, compiler checks benefit, easier readability & easier maintainability, autocompletion).
• Separation (isolation) of concerns for the different helpers (eg. skipUserCheck is only used with fromElement).
• Sanitization (Removing dead code, useless variables, optimizing code when possible, adding more consistency to the style).
• Using ESLint to adopt strong standards and protect commits.
• Using Webpack to facilitate (and make it more customizable) the build generation.
• Removal of draw-round-layers (was not doing anything, origamijs is no longer needed).
• Creating unit tests with the Jest framework (It would be wonderful to increase the coverage rate in the future).
• Using "standardized-audio-context" to deal with browsers specificities.
• Important note about fromFile: From my understanding, this helper is supposed to regularly call a callback with a single argument corresponding to a base64 image. If so, according to the code base, it seems this one was not correctly implemented (calling the callback at 'ended' event instead of during playing, I adjusted it correspondingly to make it work based on the understanding explained right before).
• Adding width & height options for fromFile (which will allow optimizing the rendering and will still default to window size)
• Adding an existingMediaStreamSource option to fromElement options, so that if the user already has a source it can pass it to be used safely without facing an Error from the browser. Null by default. Useful if, for example, an existing source does exist on the audio element (to apply audio effects for example).
• Adding a format parameter to be used to render the canvas with fromFile, default to "png"
• Fixing the multi-types feature (that was not working for me, ctx.clearRect(0, 0, w, h) was being called for each type instead of once before all).
• Automatically closing the AudioContext for all 3 helpers, except if an existingMediaStreamSource is passed to fromElement helper, if so, then it's not expectable to close the context since it's been created externally and might be still in use somewhere else.
• Removing the "react-test" since it will lead to incompatibility issues with babel-jest that we are now using, creating instead 3 examples with vanilla js in examples/ folder. Appropriate npm scripts are available to launch these examples (npm run example-from-file /npm run example-from-stream /npm run example-from-element).
• The fromElement example shows an advanced example of multiple canvas with multiple effects on each one, the 2 other examples are basic.
• WaveJS.fromStream(...), WaveJS.fromFile(...) and WaveJS.fromElement(...) will now all return a on object containing a deactivate() method. This method will stop all the operations (the examples files use it to automatically deactivate the visualizers after an arbitrary time of 10 seconds). If needed, in the future, we will be able to add more methods to this object in order to have more control over the current execution.
• When used inside a browser, the library is available through the global object WaveJS.
• When used server-side or with ES6, the library is available using import WaveJS from 'wave.js-typescript'; and hopefully after the integration: import WaveJS from '@foobar404/wave';.

The spirit and the usage of the library have not been altered. Though, there's a breaking change (which led me to set the 2.0.0 version) with the options parameter since it's now proper to different handlers (fromFile, fromStream, fromElement). These per-helper options must now be passed as a third argument instead of being mixed with the second argument.

This rewrite might also address the following issues :

• https://github.com/foobar404/Wave.js/issues/18
• https://github.com/foobar404/Wave.js/issues/24
• https://github.com/foobar404/Wave.js/issues/25
• https://github.com/foobar404/Wave.js/issues/20

And it integrates the following PRs :

• https://github.com/foobar404/Wave.js/pull/26
• https://github.com/foobar404/Wave.js/pull/16