Skip to content

In-browser 3D compact disc player simulation using THREE.JS (WebGL) and Web Audio API

Notifications You must be signed in to change notification settings

PaulSlocum/3dplayer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3dplayer

A Javascript audio player with a stylized 3D compact disc player interface that includes visual effects and audio effects. It uses WebGL and Web Audio and works in all modern browsers. The project is fully working but the API and details are still being finalized.

>> LINK TO WORKING PROJECT DEMO PAGE <<

Features:

  • simple interface to load an album by including a list of MP3 files and CD image in the script call
  • CD player sound effects and animated disc drawer
  • simulated CD player button interface with play, pause, stop, skip forward, skip back, repeat, etc.
  • realtime reverb and echo room effects
  • optional background and particle system visualizer effects

Technical features:

  • custom optical disc GLSL shader
  • Web Audio sound library with effects processor, background pre-loading, and automatic memory management
  • Blender CD player 3D model that can be easily customized

Screenshot:

screenshot

Usage

To load the player with an album, include the list of tracks in the script tag parameters.
The final version will also have a number of other parameters that can be configured.

<script type="module" src="3dplayer/3dplayer.js"
track1="music/expansion.mp3" 
track2="music/knight_rider.mp3" 
track3="music/one_person_might_not.mp3"
track4="music/okay_shorter_fade.mp3"
track5="music/trian.mp3"></script>

License forthcoming, probably MIT.

About

In-browser 3D compact disc player simulation using THREE.JS (WebGL) and Web Audio API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published