play songs while fetching data, with visualization

Usage no npm install needed!

<script type="module">
  import aurallyAudioLoader from 'https://cdn.skypack.dev/@aurally/audio-loader';



Start songs/sounds while performing a request. With audio visualization (opt out).

You just have to tell the lib which sounds it should use and then you are good to go.


Have a look at the DEMO.


npm i --save @aurally/audio-loader


Call it once, at the start of your application

import { AudioLoader } from '@aurally/audio-loader';
AudioLoader(['assets/loading.mp3'], <options>);

This will intercept all XHR and fetch requests. The given playlist will be played at the start of every request. When the requests ends (if success or fail does not matter), it stops.

But there is more!

You can also see a wonderful wave audio visalization at the bottom, visualizing the sound/song you ware currently hearing. This behaviour is default, but opt-out-able. Also the lib can add a loading bar to the top (in matching colors/design to the wave animation), which is disabled by default.


export interface IOptions {
  withVisualization: boolean;
  oneSoundPerRequest: boolean;
  withLoadingBar: boolean;
  colors?: {
    primary: string;
    secondary: string;
    wave?: {
      shadow: string;
      accent: string;
property explanation
withVisualization enables/disables the wave animation
oneSoundPerRequest does not pauses the current sound after the request finished.
plays it till it ends. Does not start a new sound after.
withLoadingBar enables/disables the loading bar
colors lets you set the wave animation/ loading bar colors.
primary will be used for both, loading bar and wave.
secondary and wave is wave only

Disable for specific request

If you want to disable this library for specific requests, just import the DISABLE_HEADER and set any value to it.


Start with

npm run start

Serve with (install npm i -g http-server first)

http-server .

Now its available at localhost:8080