{"id":20735900,"url":"https://github.com/felipethome/audio-visualization","last_synced_at":"2026-04-20T17:32:52.746Z","repository":{"id":56542123,"uuid":"96931683","full_name":"felipethome/audio-visualization","owner":"felipethome","description":"Animation using the Web Audio API and Canvas","archived":false,"fork":false,"pushed_at":"2023-01-12T08:36:28.000Z","size":10946,"stargazers_count":1,"open_issues_count":4,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-11T11:14:48.066Z","etag":null,"topics":["animation","canvas","webaudio-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/felipethome.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-11T19:55:07.000Z","updated_at":"2020-11-02T22:30:12.000Z","dependencies_parsed_at":"2023-02-09T11:00:58.486Z","dependency_job_id":null,"html_url":"https://github.com/felipethome/audio-visualization","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/felipethome/audio-visualization","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipethome%2Faudio-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipethome%2Faudio-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipethome%2Faudio-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipethome%2Faudio-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/felipethome","download_url":"https://codeload.github.com/felipethome/audio-visualization/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/felipethome%2Faudio-visualization/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32057641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["animation","canvas","webaudio-api"],"created_at":"2024-11-17T05:40:35.550Z","updated_at":"2026-04-20T17:32:52.730Z","avatar_url":"https://github.com/felipethome.png","language":"JavaScript","readme":"# Audio Visualization\n\nSimple animation using the WebAudio API and Canvas.\n\nThe idea of the animation is to show the music going on around the Earth. If the music is \"louder\" then the music notes are further away. The Earth keeps attracting the music to itself with its gravity. Each sphere around the Earth represents a group of frequencies.\n\nThe frequencies of the audio are captured in real time. Each group of frequencies corresponds to one floating sphere. The size of the spheres are related to the average of all frequencies. If the average is a big number so the spheres will be big too. Same thing goes for the speed they move away: the greater the average the greater the speed.\n\n[Demo](https://felipethome.github.io/audio-visualization)\n\n## What does this animation uses?\n\nThis animation uses the Web Audio API and HTML canvas element.\nThe code uses ES6+, but it is transpiled using Babel.\n\n## Compatibility\n\nUp to date Chrome and Firefox will definitely work.  \nUp to date Safari and Edge will work, but their decodeAudioData function is buggy, so I do not guarantee that.  \nInternet Explorer: No.  \n\n[Web Audio API compatibility table](https://caniuse.com/#search=web%20audio%20api)  \n[Canvas compatibility table](https://caniuse.com/#search=canvas)\n\n## How can I try it?\n\nClone this repo:\n\n    git clone github.com/felipethome/audio-visualization\n\nInstall dependencies:\n\n    npm install\n\nFor a development version:\n\n    npm run dev\n\nThen check localhost:8080.\n\n## LICENSE\n\nBSD-3","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipethome%2Faudio-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffelipethome%2Faudio-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffelipethome%2Faudio-visualization/lists"}