{"id":16760817,"url":"https://github.com/bhj/cdgraphics","last_synced_at":"2025-06-20T06:35:33.105Z","repository":{"id":38423225,"uuid":"52303790","full_name":"bhj/cdgraphics","owner":"bhj","description":"A fast, flexible CD+Graphics (CD+G) renderer","archived":false,"fork":false,"pushed_at":"2025-04-29T02:14:30.000Z","size":583,"stargazers_count":24,"open_issues_count":1,"forks_count":13,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-08T00:07:47.923Z","etag":null,"topics":["canvas","cdg","cdgraphics","createimagebitmap","html5","html5-canvas","html5-canvas-element","html5-canvas-js","javascript","karaoke"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhj.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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,"zenodo":null},"funding":{"github":"bhj"}},"created_at":"2016-02-22T20:36:45.000Z","updated_at":"2025-03-24T07:17:52.000Z","dependencies_parsed_at":"2024-01-11T06:54:58.874Z","dependency_job_id":"652ff841-fbc7-40af-8376-8b35899bd91c","html_url":"https://github.com/bhj/cdgraphics","commit_stats":{"total_commits":131,"total_committers":3,"mean_commits":"43.666666666666664","dds":0.04580152671755722,"last_synced_commit":"6aafc50be4392e1326b82957ac2fd74f4a8c7bc8"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/bhj/cdgraphics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhj%2Fcdgraphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhj%2Fcdgraphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhj%2Fcdgraphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhj%2Fcdgraphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhj","download_url":"https://codeload.github.com/bhj/cdgraphics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhj%2Fcdgraphics/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260896395,"owners_count":23079009,"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":["canvas","cdg","cdgraphics","createimagebitmap","html5","html5-canvas","html5-canvas-element","html5-canvas-js","javascript","karaoke"],"created_at":"2024-10-13T04:24:39.568Z","updated_at":"2025-06-20T06:35:28.090Z","avatar_url":"https://github.com/bhj.png","language":"JavaScript","funding_links":["https://github.com/sponsors/bhj"],"categories":[],"sub_categories":[],"readme":"# cdgraphics\n\nA fast, flexible [CD+Graphics (CD+G)](https://en.wikipedia.org/wiki/CD%2BG) renderer.\n\n* Designed for [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)\n* Audio synchronization when used with [currentTime](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-currentTime)\n* Optional background keying (transparency)\n* Reports background RGBA and content bounds for each frame\n* Supports all [modern browsers](https://caniuse.com/mdn-api_imagedata_imagedata)\n* No dependencies\n\n## Installation\n```\n$ npm i cdgraphics\n```\n\n## API\n\n### `new CDGraphics()`\n\nInstantiates a new parser/renderer.\n\n```js\nimport CDGraphics from 'cdgraphics'\nconst cdg = new CDGraphics()\n```\n\n### `.load(buffer)`\n\nLoads a CD+G file from an [ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), which can be had via the [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) of a [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). You must `load()` a CD+G file before calling `render()`.\n\n```js\nfetch(cdgFileUrl)\n  .then(response =\u003e response.arrayBuffer())\n  .then(buffer =\u003e cdg.load(buffer))\n```\n\n### `.render(time, [options])`\n\n- `time`: Number (in seconds) of the frame to render. Should usually be the [currentTime](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#attr-currentTime) of an `\u003caudio\u003e` element.\n- `options`: Object with one or more of the following:\n  - `forceKey`: Boolean forcing the background to be transparent, even if the CD+G title did not explicitly specify it. Defaults to `false`.\n\nReturns an object with the following properties:\n\n- `imageData`: [ImageData object](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) containing the rendered frame's pixel data.\n- `isChanged`: Boolean indicating whether the frame changed since the last render. Useful for skipping unnecessary re-paints to a canvas.\n- `backgroundRGBA`: Array containing the frame's background color in the form `[r, g, b, a]` with alpha being `0` or `1`. The reported alpha includes the effect of the forceKey option, if enabled.\n- `contentBounds`: Array containing the coordinates of a bounding box that fits the frame's non-transparent pixels in the form `[x1, y1, x2, y2]`. Typically only useful when the forceKey option is enabled.\n\n## Usage\n\nThe following excerpt demonstrates an audio-synced render loop that draws to a canvas. See [the demo code](https://github.com/bhj/cdgraphics/blob/master/demo/demo.js) for a more complete example.\n\n ```js\nconst audio = document.getElementById('audio')\nconst canvas = document.getElementById('canvas')\nconst ctx = canvas.getContext('2d')\nlet frameId\n\nconst doRender = time =\u003e {\n  const frame = cdg.render(time)\n  if (!frame.isChanged) return\n\n  createImageBitmap(frame.imageData)\n    .then(bitmap =\u003e {\n      ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)\n      ctx.drawImage(bitmap, 0, 0, canvas.clientWidth, canvas.clientHeight)\n    })\n}\n\n// render loop\nconst pause = () =\u003e cancelAnimationFrame(frameId)\nconst play = () =\u003e {\n  frameId = requestAnimationFrame(play)\n  doRender(audio.currentTime)\n}\n\n// follow \u003caudio\u003e events\naudio.addEventListener('play', play)\naudio.addEventListener('pause', pause)\naudio.addEventListener('ended', pause)\naudio.addEventListener('seeked', () =\u003e doRender(audio.currentTime))\n ```\n\n## Demo\n\nTo run the demo and see how it all comes together:\n\n1. Clone the repo\n2. Place your audio and .cdg file in the `demo` folder\n3. Update lines 1 and 2 of `demo/demo.js` with those filenames\n4. `$ npm i`\n5. `$ npm run demo`\n\n## Acknowledgements\n\n* Originally based on the [player by Luke Tucker](https://github.com/ltucker/html5_karaoke), with improvements from [Keith McKnight's fork](https://github.com/kmck/karaoke)\n* [Jim Bumgardner's CD+G Revealed](http://jbum.com/cdg_revealed.html) document/specification\n\n## License\n\n[ISC](https://opensource.org/licenses/ISC)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhj%2Fcdgraphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhj%2Fcdgraphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhj%2Fcdgraphics/lists"}