Support for Static Audio Input

[lMortimerl]

Hello everyone,

I'm proposing a feature request for audioMotion-analyzer to support static audio input. Currently, when using audioMotion-analyzer on websites, certain browsers like Chrome display an integrated audio player, which can disrupt the overall user experience, particularly on mobile devices where users may receive notifications that a site is playing audio.

Background

To address this issue and provide a smoother user experience, I believe implementing support for static audio input could offer a solution. This feature would enable users to provide the analyzer with static audio files (e.g., MP3, WAV).

Request

By incorporating this feature, we could ensure a seamless user experience across all devices and browsers, eliminating any potential disruptions caused by integrated audio players.

Discussion

I'm opening this discussion to gather feedback on the feasibility of implementing static audio input in audioMotion-analyzer. Your insights and suggestions on how to approach this feature are highly valued.

Looking forward to your input!

[hvianna]

I'm not sure if this answers your question, but you can load an audio file, create an AudioBufferSourceNode from it and use that node as audioMotion's source. See this Web Audio example for the code involved.

This method doesn't require the use of an <audio> element, but you'd still need to play the audio (with sourceNode.start()) to get a visualization, so I don't think that would prevent the browser notification. But please let me know if it works!

[lMortimerl]

Thank you very much, I've tried to implement it. Here is my apporach:

const audioContext       = new AudioContext();
const audioResponse      = await fetch(audioSrc);
const audioArrayBuffer   = await audioResponse.arrayBuffer();
const decodedAudioBuffer = await audioContext.decodeAudioData(audioArrayBuffer);

const sourceNode = new AudioBufferSourceNode(audioContext, {
	buffer: decodedAudioBuffer,
});
sourceNode.start();

const audiomotion = new AudioMotionAnalyzer(audiomotionElement, {
	source         : audioContext,
	ansiBands      : false,
	colorMode      : 'gradient',
	connectSpeakers: false,
	mirror         : 1,
	mode           : 10,
	splitGradient  : true,
	gradient       : 'rainbow',
	showPeaks      : false,
	reflexRatio    : 0.5,
	reflexAlpha    : 1,
	reflexBright   : 1,
	lumiBars       : false,
	showScaleX     : false,
	showScaleY     : false,
	smoothing      : .1,
});

But when doing so, I unfortunatly dont have the option to mute the audio output, and the connectSpeakers option of the audiomotion element does not seem work.

Also, the browser shows the notification that a website is playing audio.

[hvianna]

const audiomotion = new AudioMotionAnalyzer(audiomotionElement, {
	source         : audioContext,

You should use source: sourceNode there ☝️.

But when doing so, I unfortunatly dont have the option to mute the audio output, and the connectSpeakers option of the audiomotion element does not seem work.

You can also use disconnectOutput() to mute the speakers. But connectSpeakers: false should work in the constructor. Please let me know if it still doesn't, after fixing your source (above).

Also, the browser shows the notification that a website is playing audio.

Unfortunately, I don't think this can be avoided.