https://github.com/vishwas-r/audio-player-canvasjs-visualizer

A feature-rich web audio player with real-time visualization using Web Audio API and CanvasJS.
https://github.com/vishwas-r/audio-player-canvasjs-visualizer

audio-player canvasjs html5-audio javascript music-visualization web-audio

Last synced: about 1 year ago
JSON representation

A feature-rich web audio player with real-time visualization using Web Audio API and CanvasJS.

• Host: GitHub
• URL: https://github.com/vishwas-r/audio-player-canvasjs-visualizer
• Owner: vishwas-r
• License: mit
• Created: 2025-03-19T06:37:25.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-27T05:25:22.000Z (about 1 year ago)
• Last Synced: 2025-03-27T06:26:15.452Z (about 1 year ago)
• Topics: audio-player, canvasjs, html5-audio, javascript, music-visualization, web-audio
• Language: JavaScript
• Homepage: https://vishwas-r.github.io/audio-player-canvasjs-visualizer/
• Size: 26.2 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Modern Web Audio Player 🎵

A feature-rich web audio player with real-time visualization using Web Audio API and CanvasJS.

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

[![Live Demo](https://img.shields.io/badge/Demo-Live-green)](https://vishwas-r.github.io/audio-player-canvasjs-visualizer/)

[![Player Screenshot](https://vishwas-r.github.io/audio-player-canvasjs-visualizer/assets/images/screenshot.jpg)](https://vishwas-r.github.io/audio-player-canvasjs-visualizer/)

## Features

- 🎧 Modern UI with dark theme

- 📊 Real-time audio visualization

- 📻 Playlist management

- ⏯ Play/Pause/Next/Previous controls

- 🔊 Volume control with mute

- ⏱ Time seek functionality

- 📱 Responsive design

## Live Demo

[Try it here](https://vishwas-r.github.io/audio-player-canvasjs-visualizer/)

## Installation

1. Clone the repo:

```bash

git clone https://github.com/vishwas-r/audio-player-canvasjs-visualizer.git

```

2. Open in browser:

```bash

cd modern-web-audio-player

open index.html

```

# Usage

- Add your MP3 URLs in the `songs` array in `script.js`

- Customize styling in `styles.css`

- Host or open locally

# Customization

- Modify colors in `:root` CSS variables

- Adjust visualization parameters in `analyzer.fftSize`

- Add/remove playlist items

- Change chart type (`column`, `line`, `area`)

# Dependencies

- [CanvasJS (CDN)](https://canvasjs.com/)

- Web Audio API (native)

# Contributing

Pull requests welcome!

# License

[MIT](https://opensource.org/license/mit)