Skip to content

WXZVRD/AudioPlayer-Visualized

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

15 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎡 Audio-Visualizer Player

React Three.js Vite ESLint

Русский: АудиоплССр с Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ Π½Π° Three.js, Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ Π½Π° ΠΌΡƒΠ·Ρ‹ΠΊΡƒ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
English: Audio player with a real-time music-responsive 3D visualization using Three.js.


🎬 ДСмонстрация ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° / Project Demo

Drag & Drop

Русский:
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ Π°ΡƒΠ΄ΠΈΠΎΠΏΠ»Π΅Π΅Ρ€ΠΎΠΌ с ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ 3D-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. КаТдоС Π°ΡƒΠ΄ΠΈΠΎ Ρ‚Ρ€Π΅ΠΊ измСняСт Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° экранС.

English:
Enjoy the audio player with interactive 3D visuals. Every track dynamically influences shapes and animations in real-time.


✨ ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ / Features

Русский:

  • 🎢 ВоспроизвСдСниС Π°ΡƒΠ΄ΠΈΠΎ Ρ„Π°ΠΉΠ»ΠΎΠ² прямо Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅
  • 🌐 3D визуализация Π°ΡƒΠ΄ΠΈΠΎ Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ с использованиСм Three.js
  • πŸ’¨ ДинамичСская дСформация ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΠΎΠ΄ ΠΌΡƒΠ·Ρ‹ΠΊΡƒ
  • 🎨 Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ кастомизации Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов
  • ⚑ Высокая ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ благодаря React + Three.js + Vite
  • πŸ”§ ΠŸΡ€ΠΎΡΡ‚Π°Ρ интСграция ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ

English:

  • 🎢 Play audio tracks directly in the browser
  • 🌐 Real-time 3D audio visualization with Three.js
  • πŸ’¨ Dynamic object deformation responding to music
  • 🎨 Customizable visual effects
  • ⚑ High performance with React + Three.js + Vite
  • πŸ”§ Easy integration and extensibility

πŸ›  Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ / Tech Stack

Frontend:

  • βš› React 19
  • 🌌 Three.js (3D visualization)
  • πŸ–Œ @react-three/fiber & @react-three/drei
  • πŸŽ› Simplex Noise for procedural animations
  • ⚑ Vite (fast bundler & dev server)
  • βœ… ESLint & Prettier for code quality

About

Audio player with a real-time music-responsive 3D visualization using Three.js.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published