https://github.com/likethemammal/css-visualizer

Visualizers made entirely from DOM elements and CSS3 Animations and Transforms.
https://github.com/likethemammal/css-visualizer

audio-data css3-animations dom-manipulation music-visualizer soundcloud-api webaudio-api

Last synced: about 2 months ago
JSON representation

Visualizers made entirely from DOM elements and CSS3 Animations and Transforms.

• Host: GitHub
• URL: https://github.com/likethemammal/css-visualizer
• Owner: likethemammal
• License: apache-2.0
• Created: 2014-02-02T04:33:07.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2019-04-10T02:55:58.000Z (over 6 years ago)
• Last Synced: 2024-10-29T22:31:16.686Z (about 1 year ago)
• Topics: audio-data, css3-animations, dom-manipulation, music-visualizer, soundcloud-api, webaudio-api
• Language: JavaScript
• Homepage: https://likethemammal.github.io/css-visualizer/iframe.html?id=visualizer--default
• Size: 77.7 MB
• Stars: 158
• Watchers: 16
• Forks: 14
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# CSS (Animated) Music Visualizer

A set of visualizers animated entirely using DOM elements and CSS3 Animations and Transforms. **No SVG, Canvas, WebGL, or plug-in**.

Everything is a `
`.


[**Live Demo**](https://likethemammal.github.io/css-visualizer/iframe.html?id=visualizer--default)

![CSS Visualizer - Hexagon Mode](https://raw.githubusercontent.com/likethemammal/css-visualizer/7214f9eb1b37496006896cd1083d74387e97a9ec/imgs/screenshot.png)

![CSS Visualizer - Bars Mode](https://i.imgur.com/WkTcNR5.png)

## About

Uses the Web Audio API to decode audio data.

* [Soundcloud API](https://developers.soundcloud.com/)

* [visualizer-micro](https://github.com/likethemammal/visualizer-micro)

## Todo:

* Chromecast support (doesnt support mp3s)

* Other visualizations

## License

Licensed under Apache License 2.0.

[@Likethemammal](https://twitter.com/likethemammal)