Skip to content

Kandreas9/audio-visualiser

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Audio Visualiser Web Component

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

CDN - jsDelivr

Showcase Example

How to use?

  • Copy the CDN link in your head tag as a module script.
<head>
	<script
		type="module"
		src="https://cdn.jsdelivr.net/gh/Kandreas9/user-avatar@main/dist/user-avatar.js"
	></script>
</head>
  • You can now use the <audio-visualiser></audio-visualiser> tag
<body>
	<audio-visualiser></audio-visualiser>
</body>

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

<head>
	<script
		type="module"
		src="https://cdn.jsdelivr.net/gh/Kandreas9/user-avatar@main/dist/user-avatar.js"
	></script>
</head>
<body>
	<audio-visualiser
		audio-type="video"
		audio-src="path/to/file"
		controls-color="white"
		default-classes="neon"
	></audio-visualiser>
</body>

About

🎧 A blazingly fast audio visualiser web component

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors