{"id":18039672,"url":"https://github.com/timbokz/akko","last_synced_at":"2025-03-27T10:32:26.728Z","repository":{"id":57175312,"uuid":"99519100","full_name":"TimboKZ/Akko","owner":"TimboKZ","description":"🎼🎆 Music visualisation on Web Audio and WebGL","archived":false,"fork":false,"pushed_at":"2017-12-05T21:47:47.000Z","size":46021,"stargazers_count":18,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-01T16:39:28.328Z","etag":null,"topics":["javascript","music","music-visualisation","music-visualizer","visualiser","web-audio","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TimboKZ.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-08-06T23:30:10.000Z","updated_at":"2024-05-10T11:04:31.000Z","dependencies_parsed_at":"2022-09-03T11:00:49.951Z","dependency_job_id":null,"html_url":"https://github.com/TimboKZ/Akko","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FAkko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FAkko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FAkko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimboKZ%2FAkko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimboKZ","download_url":"https://codeload.github.com/TimboKZ/Akko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222235863,"owners_count":16953366,"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":["javascript","music","music-visualisation","music-visualizer","visualiser","web-audio","webgl"],"created_at":"2024-10-30T14:10:00.596Z","updated_at":"2024-10-30T14:10:01.402Z","avatar_url":"https://github.com/TimboKZ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![Akko Music Visualisation Framework](https://s3-eu-central-1.amazonaws.com/foxypanda-ghost/2017/10/akko.png)\n\n[![npm](https://img.shields.io/npm/v/akko.svg)](https://www.npmjs.com/package/akko)\n[![npm](https://img.shields.io/npm/dt/akko.svg)](https://www.npmjs.com/package/akko)\n[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/akko/badge?style=rounded)](https://www.jsdelivr.com/package/npm/akko)\n[![Join the chat at https://gitter.im/akko-vis/Lobby](https://badges.gitter.im/akko-vis/Lobby.svg)](https://gitter.im/akko-vis/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nMusic visualisation framework based on WebGL and Web Audio API.\n\n\u003e This project is still in early development stage, some APIs are likely to change. Please create [a new issue](https://github.com/TimboKZ/Akko/issues) if you find any bugs.\n\n# Introduction \n\nAkko's main purpose is to make writing music visualisers easy. It defines a robust, standardised framework for the task - you can focus on writing your visualiser without worrying about music playback, controls, or audio analysis. Once you're happy with your visualiser, you can put it into `.js` file and publish it online for other Akko users to enjoy.\n\nAkko uses [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) and [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API). This somewhat limits browser support, so you might want to check if it's supported in your browser: [here](https://caniuse.com/#feat=webgl) for WebGL and [here](http://caniuse.com/#feat=audio-api) for Web Audio API.\n\nThe graphics component of Akko is based on [three.js](https://threejs.org/). This means you'll be using three.js to write your visualisers. There are tons of learning resources online and Akko comes with several default visualisers to help you get started (see `lib/visualisers/`).\n\n# API\n\nSee the detailed [API reference](https://github.com/TimboKZ/Akko/blob/master/API.md).\n\n# Examples\n\n![Akko custom visualiser example](https://s3-eu-central-1.amazonaws.com/foxypanda-ghost/2017/08/Akko-Custom-Visualiser.png)\n\n[(online demo)](https://demos.kawaiidesu.me/akko/)\n\nExample Akko setups are located in the `examples/` folder. If you have [Node.js](https://nodejs.org/en/) installed, you can clone this repo then run `npm install` and `npm run examples` to start a local server. Alternatively, you could upload clone this repo to your own web server.\n\nIf you want to see what a simple Akko visualiser looks like, check out the `lib/visualisers/` folder. Examples there are pretty basic, but remember that you have all [three.js](https://threejs.org/) features at your disposal.\n\n# Features\n\n* Audio playback, analysis and control using Web Audio API.\n* Visualisation framework built on WebGL and three.js.\n* Visualiser selection menu allowing users to switch between multiple visualisers.\n* Simple visualiser abstraction that lets you publish your visualiser and use visualisers developed by others.\n* Real-time playlist allowing users to add tracks by URL, as a file upload or by drag \u0026 dropping a file into the visualiser. \n\n# Getting started\n\nTo try Akko, add it's JS and CSS files, as well as 2 of its external dependencies to your page. You might also have to set the height for Akko's container.\n\n```html\n\u003c!-- Akko's dependencies --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/bluebird/latest/bluebird.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Akko's files via jsDelivr CDN --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/akko@0.1.0/dist/akko.min.css\"/\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/akko@0.1.0/dist/akko.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Set the height for Akko's container --\u003e\n\u003cstyle\u003e\n#akko {\n    height: 500px;\n}\n\u003c/style\u003e\n```\n\nThen, inside the `\u003cbody\u003e` of your page, create a `\u003cdiv\u003e` container and launch Akko:\n\n```html\n\u003cdiv id=\"akko\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var akko = new Akko();\n    akko.start();\n\u003c/script\u003e\n```\n\nYou can now drag \u0026 drop an audio file into the visualiser to start playback. You could also use one of the input buttons in the menu in the top left of the screen. See [Examples](#examples) to learn how to define custom visualisers.\n\nAlternatively, if you're using Node.js for your project:\n\n```bash\nnpm install --save akko\n```\n\nThen:\n\n```javascript\nconst Akko = require('akko');\n```\n\n# Contributing\n\nThis project is still in its early development phase, so a lot of things are likely to change. If you want to extend the source code, please [create a new issue](https://github.com/TimboKZ/Akko/issues) so we can discuss the changes you want to make before you start.\n\nAll of the source code is written in ES6, except for some inline JS in the `examples/` directory. For developers' convenience, `npm run examples` and `npm run watch` are provided, starting the local dev server and Webpack watchers respectively. When making a pull request, make sure `npm run lint` returns no errors. Units and integrations tests coming soon. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbokz%2Fakko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimbokz%2Fakko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimbokz%2Fakko/lists"}