{"id":25053895,"url":"https://github.com/sampi/finger","last_synced_at":"2025-05-07T06:46:58.303Z","repository":{"id":67821145,"uuid":"168749327","full_name":"sampi/finger","owner":"sampi","description":"Recreation of the OP-1's Finger sequencer using the Web MIDI API","archived":false,"fork":false,"pushed_at":"2019-02-05T17:55:32.000Z","size":1746,"stargazers_count":20,"open_issues_count":5,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T06:46:53.812Z","etag":null,"topics":["engineering","finger","midi","op-1","sequencer","teenage","teenage-engineering","web"],"latest_commit_sha":null,"homepage":"https://finger.sampi.io/","language":"HTML","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/sampi.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":"2019-02-01T19:26:17.000Z","updated_at":"2024-10-05T07:43:38.000Z","dependencies_parsed_at":"2023-08-27T17:16:14.609Z","dependency_job_id":null,"html_url":"https://github.com/sampi/finger","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/sampi%2Ffinger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sampi%2Ffinger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sampi%2Ffinger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sampi%2Ffinger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sampi","download_url":"https://codeload.github.com/sampi/finger/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252831178,"owners_count":21810779,"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":["engineering","finger","midi","op-1","sequencer","teenage","teenage-engineering","web"],"created_at":"2025-02-06T11:55:35.541Z","updated_at":"2025-05-07T06:46:58.282Z","avatar_url":"https://github.com/sampi.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to the OP-1 Finger Sequencer simulator\n\n## Try it out!\n\n[https://finger.sampi.io](https://finger.sampi.io/)\n\n## YouTube video\n\n[![YouTube demo](https://img.youtube.com/vi/AizpaaGNmSk/maxresdefault.jpg)](https://www.youtube.com/watch?v=AizpaaGNmSk)\n\n## Quick start instructions\n\n1. Plug an OP-Z into your computer or Android phone\n2. Open https://finger.sampi.io in Google Chrome\n3. Play some notes on the `module` track\n\n## Instructions\n\nYou can control the sequencer by connecting one or more MIDI devices to your computer.\nInput will be taken from every connected MIDI device on the control channel _(default: MIDI channel 14)_,\nOutput will be sent to two separate channels for drums _(default: MIDI channel 1)_ and synths _(default: MIDI channel 8)_.\n\nBest used with an OP-Z, the left half of the musical keyboard will correspond to drum patterns, the right half will control the synth patterns.\n\nTo change the MIDI channels, you can use the UI:\n\n- To change the Drum MIDI output channel: Click on the green drum icon on the bottom left of the screen.\n- To change the Control MIDI input channel: Click on the white piano icon on the very bottom of the screen.\n- To change the Synth MIDI output channel: Click on the blue synth icon on the bottom right of the screen.\n\nChanging settings is possible by changing the attributes of the `\u003cfinger-sequencer\u003e` element:\n\n- To set the BPM: `document.querySelector('finger-sequencer').setAttribute('bpm', 125);`\n\nHave fun playing!\n\n\u003e Browser compatibility: Any browser with support for the Web MIDI API (Google Chrome (desktop \u0026 Android), Android Browser, Samsung Internet)\n\n\u003e Copyright notice: All of the visual artwork and sequencer patterns were made by Teenage Engineering, I am just using it for fun here.\n\n### Troubleshooting\n\nIf nothing happens when you play notes, try to reload the page. MIDI devices are only recognized during load.\n\n## Technical info\n\nThe code itself is chaotic, because this is a prototype made over a couple of days.\n\n### Important/interesting files\n\n- [`/index.html`](https://github.com/sampi/finger/blob/master/index.html)\n\nContains the main SVG and imports all the necessary files.\n\n- [`/src/finger.js`](https://github.com/sampi/finger/blob/master/src/finger.js)\n\nThis is the main script, handling the incoming notes and animating the gorilla and the synth dude, as well as the sequencer.\n\n- [`/src/settings.js`](https://github.com/sampi/finger/blob/master/src/settings.js)\n\nThis script displays and controls the MIDI channel settings on the bottom of the page.\n\n- [`/src/midi.js`](https://github.com/sampi/finger/blob/master/src/midi.js)\n\nThis script makes it easier to listen to MIDI notes and send them.\n\n- [`/src/patterns.js`](https://github.com/sampi/finger/blob/master/src/patterns.js)\n\nThese are the factory preset patterns of the Finger Sequencer from the OP-1.\n\n- [`/src/pattern-printer.html`](https://github.com/sampi/finger/blob/master/src/pattern-printer.html)\n\nThis is a very basic quick script that captures MIDI input and prints it out as an Array to the dev console.\n\n### (Some of the) Web APIs used\n\n- Web Components (Custom Elements, Shadow DOM, HTML Templates)\n- Web MIDI\n- Web Animations\n- CSS Custom Properties\n- ES Modules\n- Custom Events\n- Service Workers\n- Cache\n- Web App Manifest\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsampi%2Ffinger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsampi%2Ffinger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsampi%2Ffinger/lists"}