{"id":20886121,"url":"https://github.com/srowhani/audiophile","last_synced_at":"2026-04-29T03:31:54.250Z","repository":{"id":88227242,"uuid":"21111797","full_name":"srowhani/audiophile","owner":"srowhani","description":"HTML5 Audio API playground","archived":false,"fork":false,"pushed_at":"2015-08-01T14:23:46.000Z","size":10192,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-19T11:14:18.707Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/srowhani.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}},"created_at":"2014-06-23T02:39:46.000Z","updated_at":"2016-10-31T19:11:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"b1119806-089c-4908-b59d-763292882629","html_url":"https://github.com/srowhani/audiophile","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/srowhani%2Faudiophile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srowhani%2Faudiophile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srowhani%2Faudiophile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/srowhani%2Faudiophile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/srowhani","download_url":"https://codeload.github.com/srowhani/audiophile/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243268085,"owners_count":20263803,"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":[],"created_at":"2024-11-18T08:15:51.225Z","updated_at":"2025-12-29T03:42:21.673Z","avatar_url":"https://github.com/srowhani.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"AudioPhile\n==========\n\nA quick application I made that makes use of the HTML5 audio element, and API\nto load sound files and play them back, as well as visualizing them.\n\n\u003ch2\u003eThird Party Libraries\u003c/h2\u003e\n\u003cul\u003e\u003cli\u003e\u003ch4\u003eRequireJS\u003c/h4\u003e\u003csmall\u003eFor loading each of the modules\u003c/small\u003e\u003c/li\u003e\u003c/ul\u003e\n\u003ch2\u003eSide Notes\u003c/h2\u003e\nUsing Canvas, I draw the frequency data which is represented as an UintArray by iterating through it\nand drawing each of the array values as rectangles.\n\nAs for the beat matching, if:\u003cbr/\u003e\n\u003ccode\u003e[].slice.call(_player.getFrequency(), 0, 4).reduce(function(x,y){return x+y})\u003c/code\u003e\n\u003cbr/\u003e\nsurpasses 720 (the limit for each frequency is 200) I set the fillstyle of my canvas context to be\na blue gradient as opposed to the default red one.\n\n\u003cbr/\u003e\nAlso, I capped the limit of \u003ccode\u003erequestAnimationFrame\u003c/code\u003e by doing the following:\u003cbr/\u003e\n\n\u003ccode\u003ewindow.setTimeout(\n  function(){\n    requestAnimationFrame(update);\n  }, 1000/30)\n\u003c/code\u003e\u003cbr/\u003e\n\nThis ensures that the frames per second won't surpass 30.\n\n\u003ch2\u003eUsage\u003c/h2\u003e\n\u003csmall\u003eIt's pretty simple, you drop music into the dashed div box, and it should load them.\nOnce it has, clicking the div will grab the src from the element's dataset, and begin playback\u003c/small\u003e\n\n\u003ch2\u003eDemo\u003c/h2\u003e\n\u003csmall\u003eCan be found \u003ca href='http://srowhani.github.io/AudioPhile' target='_blank'\u003ehere\u003c/a\u003e.\u003c/small\u003e\n\n\u003ch2\u003eLearning sources\u003c/h2\u003e\n\u003cul\u003e\n  \u003cli\u003ehttp://ianreah.com/2013/02/28/Real-time-analysis-of-streaming-audio-data-with-Web-Audio-API.html\u003c/li\u003e\n  \u003cli\u003ehttps://webaudio.github.io/web-audio-api/\u003c/li\u003e\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrowhani%2Faudiophile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsrowhani%2Faudiophile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsrowhani%2Faudiophile/lists"}