{"id":21611217,"url":"https://github.com/kantelabs/music-visualizer","last_synced_at":"2025-04-11T05:33:22.147Z","repository":{"id":79964235,"uuid":"98463172","full_name":"KanteLabs/Music-Visualizer","owner":"KanteLabs","description":"Interactive music visualizer built with threejs and web audio api","archived":false,"fork":false,"pushed_at":"2023-06-24T04:46:58.000Z","size":2931,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-25T03:34:17.419Z","etag":null,"topics":["audio-visualizer","creative-art","creative-coding","generative-art","music","music-visualizer","threejs","visualizer","web-audio-api","webgl"],"latest_commit_sha":null,"homepage":"https://kantelabs.github.io/Music-Visualizer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KanteLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-26T20:27:45.000Z","updated_at":"2024-09-05T16:32:17.000Z","dependencies_parsed_at":"2024-11-24T21:11:35.311Z","dependency_job_id":null,"html_url":"https://github.com/KanteLabs/Music-Visualizer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanteLabs%2FMusic-Visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanteLabs%2FMusic-Visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanteLabs%2FMusic-Visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KanteLabs%2FMusic-Visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KanteLabs","download_url":"https://codeload.github.com/KanteLabs/Music-Visualizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248347614,"owners_count":21088698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-visualizer","creative-art","creative-coding","generative-art","music","music-visualizer","threejs","visualizer","web-audio-api","webgl"],"created_at":"2024-11-24T21:11:28.787Z","updated_at":"2025-04-11T05:33:22.133Z","avatar_url":"https://github.com/KanteLabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Music Visualizer\nUser's can either upload a song or choose one that has been uploaded by other users and then see the visualizations for it on their screen. Once a song is uploaded visualizations are created by analyzing the frequency data and waveform with the Web Audio Api. The data is then render with THREE.js. GUI controls are also included to control the camera rotation and positioning. Different songs create different colors and affect how high each bar goes in the visualization.\n\n[View Live Demo Here](https://kantelabs.github.io/Music-Visualizer/)\n\n### Bars - Main Visualizer\n![Bars](/assets/visual1_zoom.png)\n### Experimental Web Visualizer\n![Web](/assets/visual2_zoom.png)\n[Link to Web](https://kantelabs.github.io/Music-Visualizer/web.html)\n\n### Technical Details\nThe core of this project was built using THREE.js in order to render the visualizers in canvas. When a user uploads a song to visual it also gets stored in Google Firebase so that the song can be reused by other people. This is also useful for people that do not want to upload a song. Web Audio Api analyzes the song data so that it could be visualized by THREE.js.\n  \n### Sample Code\nThis sample code was how I generated the random floating shapes around the scene.\n\n```javascript\n var asteroidMesh = new Array()\n    var asteroidGeometry = new THREE.TetrahedronGeometry((Math.random() + 0.5 ), 2);\n    var asteroidMaterial = new THREE.MeshPhongMaterial({ \n        color: (Math.random() * 0xffffff), \n        flatShading: true \n    });\n\n    var i = 0;\n    for(var x = 0; x \u003c 1; x++){\n        var j = 0;\n        asteroidMesh[i] = new Array();\n        for(var y = 0; y \u003c 1000; y++){\n            asteroidMesh[i][j] = new THREE.Mesh(asteroidGeometry, asteroidMaterial);\n            asteroidMesh[i][j].position.x = ( Math.random() - 0.5 ) * 300;\n            asteroidMesh[i][j].position.y = ( Math.random() - 0.5 ) * 300;\n            asteroidMesh[i][j].position.z = ( Math.random() - 0.5 ) * 300;\n            asteroidMesh[i][j].scale.z = (Math.random() * 2, Math.random() * 2, Math.random() * 2);\n            asteroidMesh[i][j].rotation.set(Math.random() * 4, Math.random() * 4, Math.random() * 4)\n            scene.add(asteroidMesh[x][j])\n            j++;\n        }\n        i++;\n    }\n```\n\n### Future Improvements\n  - Incorporate AFrame for VR \u0026 smoother interactions []\n  - Basic VR using Google Cardboard []\n  - Include at least 3 music visualizers []\n  - Can generate random shapes around the visualizer []\n  - have certain features determined by song data\n    - color []\n    - size []\n    - shape type? []\n  - option to choose different scenes []","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkantelabs%2Fmusic-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkantelabs%2Fmusic-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkantelabs%2Fmusic-visualizer/lists"}