×

Service Worker for Offline Support:

The web application utilizes a Service Worker to provide offline support and allow users to access the website even when the internet connection is not available. Service Workers are a feature of modern web browsers that run in the background and intercept network requests, enabling the application to work offline by caching essential resources.

• When the user first visits the website while online, the Service Worker is installed and registered.
• The Service Worker caches critical assets, such as HTML, CSS, JavaScript files, and other resources, allowing the application to load and function offline.
• If the user loses internet connectivity or the web server is unreachable, the Service Worker serves cached resources, allowing the web application to continue running.
• The cached resources ensure that the web application remains accessible, and users can still interact with the locally stored audio files in IndexedDB and play previously loaded audio files.

Firebase Configuration:

The script sets up the configuration required to connect to Firebase Storage. It includes essential credentials like the API key, project ID, storage bucket, etc.

IndexedDB Initialization:

The script attempts to create an IndexedDB database called "AudioDatabase" with an object store named "audioFiles" and an index called "urlIndex." This IndexedDB database is used to store audio files locally on the user's device.

When the user selects an audio file from the list, the script converts the audio file into a Blob (Binary Large Object) data type. The Blob represents the audio data, and it is then stored in the "audioFiles" object store of the "AudioDatabase" IndexedDB database.

This process allows the audio files to be stored efficiently in the user's browser, enabling offline playback and quick retrieval when needed, without relying on continuous network access.

File List Retrieval:

When the web application is online, it fetches the list of audio files stored in Firebase Storage. If successful, the list of files is stored in a variable called fileList. If the fetch operation fails or the user is offline, the script loads the list of audio file names from Local Storage.

Populate File Select Dropdown:

The script populates the file select dropdown with the names of the audio files available in the fileList. This allows users to choose which audio file they want to play.

Play Audio Functionality:

When the user selects an audio file from the dropdown and clicks the play button, the script checks if the user is online or offline.

• If online, it tries to play the audio file directly from IndexedDB. If not found in IndexedDB, it fetches the file from Firebase Storage, saves it to IndexedDB for future offline playback, and then plays the audio.
• If offline, it directly plays the audio file from IndexedDB if it is available there.

Automatic Playback:

The application allows automatic playback of the next audio file when the current one finishes playing. If the user enables the autoplay checkbox, the application listens for the 'ended' event on the audio player and triggers the playback of the next audio file in the list.

Auto Delete File Functionality:

When the web application loads, it checks if the audio file is no longer present in Local Storage, which indicates that it has been deleted by the owner. In this case, the script also deletes the corresponding file from IndexedDB to ensure the database remains in sync with the current list of available audio files.