https://github.com/Kandreas9/audio-visualiser

🎧 A blazingly fast audio visualiser web component
https://github.com/Kandreas9/audio-visualiser

Last synced: 2 months ago
JSON representation

🎧 A blazingly fast audio visualiser web component

• Host: GitHub
• URL: https://github.com/Kandreas9/audio-visualiser
• Owner: Kandreas9
• Created: 2022-05-24T21:11:26.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-24T21:32:46.000Z (over 2 years ago)
• Last Synced: 2024-08-02T05:22:26.895Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 33.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-blazingly-fast - audio-visualiser - 🎧 A blazingly fast audio visualiser web component (JavaScript)

README

        
# Audio Visualiser Web Component

A simple, light and blazingly fast web component for visualising audio.

[![CDN - jsDelivr][logo]][jsdelivr]

![Showcase Example][showcase]

## How to use?

- Copy the CDN link in your head tag as a module script.

```html

	

```

- You can now use the `` tag

```html

	

```

## Attributes

`audio-type`

- video (default)

- audio

`audio-src` - A link or path to your file. (YTB doesnt work)

`visualiser-color` - Any type of color you want hex or whatever.

`visualiser-bar-count` - The amount of bars the visualiser will have. (default is 50)

`controls-color` - Color for the controls (default is black)

`default-classes` - Set of premade classes with colors and gradients

- neon

## Full Example

```html

	

	

```

[logo]: https://img.shields.io/static/v1?label=CDN&message=jsDelivr&color=%23ff5626&logo=jsDelivr&logoColor=%23ff5626

[jsdelivr]: https://cdn.jsdelivr.net/gh/Kandreas9/audio-visualiser@main/dist/audio-visualiser.js

[showcase]: https://raw.githubusercontent.com/Kandreas9/audio-visualiser/main/src/assets/showcase.png