{"id":15022319,"url":"https://github.com/feross/bg-sound","last_synced_at":"2026-03-02T10:31:24.187Z","repository":{"id":65990030,"uuid":"157869847","full_name":"feross/bg-sound","owner":"feross","description":"Web Component to emulate the old-school \u003cbgsound\u003e HTML element","archived":false,"fork":false,"pushed_at":"2020-05-11T17:20:40.000Z","size":1224,"stargazers_count":102,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-09T02:29:08.400Z","etag":null,"topics":["background","bgsound","html","html-element","javascript","midi","sound","web-components"],"latest_commit_sha":null,"homepage":"https://bitmidi.com","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/feross.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-16T13:15:49.000Z","updated_at":"2025-07-20T04:51:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"e20c6507-7bd6-4faf-b11d-ea28d00a00f3","html_url":"https://github.com/feross/bg-sound","commit_stats":{"total_commits":44,"total_committers":3,"mean_commits":"14.666666666666666","dds":"0.11363636363636365","last_synced_commit":"352536e55b32049bd6754f5edd0c267430e1ac0f"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/feross/bg-sound","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fbg-sound","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fbg-sound/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fbg-sound/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fbg-sound/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/feross","download_url":"https://codeload.github.com/feross/bg-sound/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/feross%2Fbg-sound/sbom","scorecard":{"id":397573,"data":{"date":"2025-08-11","repo":{"name":"github.com/feross/bg-sound","commit":"352536e55b32049bd6754f5edd0c267430e1ac0f"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T19:23:22.528Z","repository_id":65990030,"created_at":"2025-08-18T19:23:22.528Z","updated_at":"2025-08-18T19:23:22.528Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29998513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T09:59:02.300Z","status":"ssl_error","status_checked_at":"2026-03-02T09:59:02.001Z","response_time":60,"last_error":"SSL_read: 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":["background","bgsound","html","html-element","javascript","midi","sound","web-components"],"created_at":"2024-09-24T19:57:47.311Z","updated_at":"2026-03-02T10:31:24.076Z","avatar_url":"https://github.com/feross.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bg-sound\n\n[![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![downloads][downloads-image]][downloads-url] [![javascript style guide][standard-image]][standard-url]\n\n[travis-image]: https://img.shields.io/travis/feross/bg-sound/master.svg\n[travis-url]: https://travis-ci.org/feross/bg-sound\n[npm-image]: https://img.shields.io/npm/v/bg-sound.svg\n[npm-url]: https://npmjs.org/package/bg-sound\n[downloads-image]: https://img.shields.io/npm/dm/bg-sound.svg\n[downloads-url]: https://npmjs.org/package/bg-sound\n[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg\n[standard-url]: https://standardjs.com\n\n### Web Component to emulate the old-school `\u003cbgsound\u003e` HTML element\n\nPlay MIDI files in a browser with a simple Web Component, emulating\n[`\u003cbgsound\u003e`, the Background Sound element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bgsound).\n\n## Install\n\n```\nnpm install bg-sound\n```\n\nThis package works in the browser with [browserify](https://browserify.org). If you do not use a bundler, you can use the [standalone script](https://bundle.run/bg-sound) directly in a `\u003cscript\u003e` tag.\n\n## Usage\n\nAdd a custom HTML element called `\u003cbg-sound\u003e`:\n\n```html\n\u003cscript src=\"bg-sound.min.js\"\u003e\u003c/script\u003e\n\u003cbg-sound src=\"sound.mid\"\u003e\u003c/bg-sound\u003e\n```\n\nAutomatically make legacy `\u003cbgsound\u003e` and `\u003cembed\u003e` HTML tags work:\n\n```html\n\u003c!-- Must include *BEFORE* all \u003cbgsound\u003e and \u003cembed\u003e tags --\u003e\n\u003cscript src=\"../bg-sound.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003eBgSound.enableCompatMode()\u003c/script\u003e\n\n\u003c!-- All of the following HTML tags now work! --\u003e\n\u003cbgsound src=\"goldensun.mid\"\u003e\n\u003cembed src=\"goldensun.mid\"\u003e\n\u003cembed src=\"mario-death.mid\" loop=\"2\"\u003e\n\u003cembed src=\"sound.wav\"\u003e\n\u003cembed src=\"sound.wav\" loop=true\u003e\n```\n\n## Talk\n\nI introduced this project in a talk at [JSConf Colombia 2018](https://jsconf.co/).\n\n[![The Lost Art of MIDI talk](img/slide.png)](https://speakerdeck.com/feross/the-lost-art-of-midi-bringing-back-to-the-web)\n\n- [Slides](https://speakerdeck.com/feross/the-lost-art-of-midi-bringing-back-to-the-web)\n- Talk video (coming soon!)\n\n## FAQ\n\n### Why is the tag called `\u003cbg-sound\u003e` (with a dash)?\n\nThe name of a custom HTML element must contain a dash (-). This is what the spec says, presumably because otherwise browsers could not introduce new HTML tags without web compatibility risk.\n\n### Why is the script tag required?\n\nThe script tag is needed to define the behavior of the `\u003cbg-sound\u003e` HTML element. Without it, the browser would just treat the tag like a `\u003cdiv\u003e`.\n\n### Where do the WebAssembly code and instrument sound files come from?\n\nBy default, these files will load remotely from [BitMidi](https://bitmidi.com). This is nice for simple demos and quick hacks. However, it is recommended to host these files yourself. (I reserve the right to remove the CORS headers which allow this to work at any time if too much bandwidth is used.)\n\n### What are the `timidity` and `freepats` packages?\n\n```bash\nnpm install timidity freepats\n```\n\nThe `\u003cbg-sound\u003e` custom element lazily loads a WebAssembly file and instrument\nsounds at runtime.\n\nThe [`timidity`](https://github.com/feross/timidity) package provides the WebAssembly file (`libtimidity.wasm`). The\n`freepats` package provides the instrument sound files.\n\nIt's important to ensure that the `timidity` and `freepats` folders in\n`node_modules` are being served to the public. For example, here is how to mount\nthe necessary files at `/` with the `express` server:\n\n```js\nconst timidityPath = path.dirname(require.resolve('timidity'))\napp.use(express.static(timidityPath))\n\nconst freepatsPath = path.dirname(require.resolve('freepats'))\napp.use(express.static(freepatsPath))\n```\n\nOptionally, provide a `baseUrl` attribute to customize where the player will\nlook for the lazy-loaded WebAssembly file `libtimidity.wasm` and the\n[FreePats General MIDI soundset](https://www.npmjs.com/package/freepats) files.\nThe default `baseUrl` is `https://bitmidi.com/timidity/`.\n\n```js\n\u003cbg-sound src=\"sound.mid\" baseUrl=\"/custom-path\"\u003e\u003c/bg-sound\u003e\n```\n\n### How do I automatically make legacy `\u003cbgsound\u003e` and `\u003cembed\u003e` tags work?\n\nInclude this code before any `\u003cbgsound\u003e` or `\u003cembed\u003e` HTML tags:\n\n```html\n\u003c!-- Must include *BEFORE* all \u003cbgsound\u003e and \u003cembed\u003e tags --\u003e\n\u003cscript src=\"../bg-sound.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003eBgSound.enableCompatMode()\u003c/script\u003e\n\n\u003c!-- All of the following HTML tags now work! --\u003e\n\u003cbgsound src=\"goldensun.mid\"\u003e\n\u003cembed src=\"goldensun.mid\"\u003e\n\u003cembed src=\"mario-death.mid\" loop=\"2\"\u003e\n\u003cembed src=\"sound.wav\"\u003e\n\u003cembed src=\"sound.wav\" loop=true\u003e\n```\n\nIf you want to provide your own `baseUrl`, then simply pass that into the `BgSound.enableCompatMode()` function call as follows:\n\n```js\nBgSound.enableCompatMode({ baseUrl: '/custom-path' })\n````\n\n## Demo\n\nIf you like this, then check out [BitMidi.com](https://bitmidi.com), the wayback machine for old-school MIDI files! Check out some examples MIDIs here:\n\n- [Adele - Skyfall](https://bitmidi.com/adele-skyfall-mid)\n- [Beatles - Imagine](https://bitmidi.com/beatles-imagine-mid)\n- [Beyonce - Crazy in Love](https://bitmidi.com/beyonce-crazy-in-love-mid)\n- [CANYON.MID](https://bitmidi.com/canyon-mid)\n- [Cowboy Bepop - Space Lion](https://bitmidi.com/cowboy-bepop-space-lion-mid)\n- [Eiffel 65 - Blue](https://bitmidi.com/dj-ali-eiffel-blue-mid)\n- [Kingdom Hearts - Dearly Beloved](https://bitmidi.com/kingdom-hearts-dearly-beloved-mid)\n- [Mario Bros. - Super Mario Bros. Theme](https://bitmidi.com/mario-bros-super-mario-bros-theme-mid)\n- [Passenger - Let Her Go](https://bitmidi.com/passenger-let_her_go-mid)\n- [Portal - Still Alive](https://bitmidi.com/portal-still-alive-mid)\n- [Rick Astley - Never Gonna Give You Up](https://bitmidi.com/r-astley-never-gonna-give-you-up-k-mid)\n- [Simpsons Theme Song](https://bitmidi.com/simpsons-mid)\n- [Sonic the Hedgehog - Green Hill Zone](https://bitmidi.com/sonic-the-hedgehog-green-hill-zone-mid)\n- [TOTO - Africa](https://bitmidi.com/toto-africa-k-mid)\n\n## License\n\nMIT. Copyright (c) [Feross Aboukhadijeh](https://feross.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fbg-sound","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffeross%2Fbg-sound","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffeross%2Fbg-sound/lists"}