https://github.com/todaylg/WebVR-Audio-Visualizer

A WebVR Audio Visualizer,Basic on Aframe and Web Audio API
https://github.com/todaylg/WebVR-Audio-Visualizer

aframe beat-detection music simplex spe three-js webvr

Last synced: about 1 month ago
JSON representation

A WebVR Audio Visualizer,Basic on Aframe and Web Audio API

• Host: GitHub
• URL: https://github.com/todaylg/WebVR-Audio-Visualizer
• Owner: todaylg
• License: mit
• Created: 2018-01-10T09:43:12.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T16:19:17.000Z (over 2 years ago)
• Last Synced: 2025-04-09T04:51:19.576Z (2 months ago)
• Topics: aframe, beat-detection, music, simplex, spe, three-js, webvr
• Language: JavaScript
• Homepage: http://todaylg.com/WebVR-Audio-Visualizer/
• Size: 92.2 MB
• Stars: 42
• Watchers: 2
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

• vr-resources - WebVR-Audio-Visualizer, A WebVR Audio Visualizer,Basic on Aframe and Web Audio API

README

        
# WebVR-Audio-Visualizer

> A WebVR Audio Visualizer,Basic on Aframe and Three.js.

### [Demo](http://todaylg.com/WebVR-Audio-Visualizer/)

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/mainEffect.png)

### Beat Detect

1.PreAnalysis

Detect the rhythm of the song's climax.

Learn the Detect Method from [JMPerez](https://github.com/JMPerez/beats-audio-api)

2.RealTimeAnalysis

Detect the rhythm of the basic part of the song.

Learn the Detect Method from [stasilo](https://github.com/stasilo/BeatDetector)

### Componet Structure

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Componet.png)

### Visual Effect

1.Graffiti.

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Graffiti.png)

2.Wave

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Wave.png)

simplex noise taking color

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/simplex1.png)

3.Ring Particle

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Ring.png)

4.Spray Particle

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Spray.png)

5.Spectrum

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/Spectrum.png)

simplex noise taking color

![image](https://github.com/todaylg/WebVR-Audio-Visualizer/blob/master/introImages/simplex2.png)

Learn a lot from [Inside Music](https://github.com/googlecreativelab/inside-music) and [Kframe](https://github.com/ngokevin/kframe)

tested on  Mobile\PC, no money to buy Vive

### Devlopment

you need install parcel first.(yarn or npm)

```

yarn global add parcel-bundler

or

npm install -g parcel-bundler

```

then

```

yarn

or

npm install

```

then

```

$ parcel index.html

```