Objective: Implement a custom audio player using JavaScript and jQuery.

Background: You will be provided with design mockups for a custom audio player. Your task is to bring these designs to life by implementing the functional aspects using JavaScript or jQuery.

Attribute-Based Implementation:

• All player controls and functionalities should be implemented using data attributes.
• Play/Pause Button: Use data-audio="play" to control play and pause actions.
• Volume Control: Implement a volume control using a data attribute like data-audio="volume".
• Progress Bar: Use an attribute like data-audio="progress" for the progress bar functionality.
• Time Display: Implement the current time and total duration display using relevant data attributes.
• Mute Button: Use an attribute like data-audio="mute" for muting and unmuting audio

‍Task Details:

• Use vanilla JavaScript or JQuery. Clone the ViDesigns Audio Player project.
• Dynamic Loading of Audio Files: Your player should be capable of dynamically loading audio files. This means you should provide a way to pass the audio source as an attribute when initializing the player.
• Play/Pause Button: Implement a button that toggles between playing and pausing the audio.
• Volume Control: Create a slider for adjusting the volume of the audio.
• Progress Bar: Include a progress bar that shows the current playback position and allows users to seek to different parts of the audio.
• Time Display: Display the current time and total duration of the audio.
• Mute Button: Add a button to mute and unmute the audio.
• Cross-Browser Compatibility: Your implementation should be compatible with the latest versions of major browsers (Chrome, Firefox, Safari, and Edge).‍‍
• Error Handling: Implement basic error handling for scenarios like audio file not found or loading errors.

Deliverables:

• Source code files for the implemented audio player.
• A simple HTML page to demonstrate the functioning of the audio player.