{"id":16117825,"url":"https://github.com/stefannieuwenhuis/wc-trombone","last_synced_at":"2026-03-06T07:32:25.453Z","repository":{"id":98812950,"uuid":"199873777","full_name":"StefanNieuwenhuis/wc-trombone","owner":"StefanNieuwenhuis","description":"A trombone web component which you can play by resizing the window!","archived":false,"fork":false,"pushed_at":"2019-08-02T08:35:34.000Z","size":138,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-28T09:01:37.129Z","etag":null,"topics":["html","javascript","jsx","stencil","stencil-components","webaudio-api","webcomponents"],"latest_commit_sha":null,"homepage":"https://stefannieuwenhuis.github.io/wc-trombone","language":"TypeScript","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/StefanNieuwenhuis.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}},"created_at":"2019-07-31T14:36:34.000Z","updated_at":"2023-05-02T16:49:15.000Z","dependencies_parsed_at":"2023-03-09T21:00:14.327Z","dependency_job_id":null,"html_url":"https://github.com/StefanNieuwenhuis/wc-trombone","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.02941176470588236,"last_synced_commit":"52b32a94a2fc84e6a524b54ea4c6ee22724d1437"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanNieuwenhuis%2Fwc-trombone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanNieuwenhuis%2Fwc-trombone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanNieuwenhuis%2Fwc-trombone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StefanNieuwenhuis%2Fwc-trombone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StefanNieuwenhuis","download_url":"https://codeload.github.com/StefanNieuwenhuis/wc-trombone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243918629,"owners_count":20368745,"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":["html","javascript","jsx","stencil","stencil-components","webaudio-api","webcomponents"],"created_at":"2024-10-09T20:47:07.539Z","updated_at":"2026-03-06T07:32:25.409Z","avatar_url":"https://github.com/StefanNieuwenhuis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎺 Trombone Web Component 🎺\n\"The trombone is a musical instrument in the brass family. As on all brass instruments, sound is produced when the player's vibrating lips (embouchure) cause the air column inside the instrument to vibrate.\" -- [Wikipedia](https://en.wikipedia.org/wiki/Trombone).\n\nBut not this one! Its sound is produced by resizing the window of your browser or popup. Pretty amazing, right?!\n\nBy [Stefan Nieuwenhuis](https://twitter.com/stefannhs)\n\n![npm (tag)](https://img.shields.io/npm/v/wc-trombone/latest?color=blue)\n![npm](https://img.shields.io/npm/dt/wc-trombone)\n\n## Goals\nThe idea behind this Web Component is to learn more about the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) in a fun way and to bring Web Components to a wider audience. \n\nThis Web Component is built with [StencilJs](https://stenciljs.com).\n\n## Installation \nScript tag (with unpkg):\nPut the following tag in the `\u003chead\u003e` of your `index.html` and you can use the element anywhere in your application:\n\n```js\n\u003cscript src='https://unpkg.com/wc-trombone@latest/dist/wc-trombone.js'\u003e\u003c/script\u003e\n```\n\nNode Modules (npm or yarn):\nAdd the `wc-components` as dependency to `node_modules` via npm or yarn:\n\n```bash\n# add dependency with npm:\n$ npm install wc-trombone\n\n# or with yarn:\n$ yarn add wc-trombone\n```\n\nPut the following tag in the `\u003chead\u003e` of your `index.html` and you can use the element anywhere in your application: \n\n```js\n\u003cscript src='node_modules/wc-trombone/dist/wc-trombone.js'\u003e\u003c/script\u003e\n```\n\n## Framework integration\n[Stencil documentation](https://stenciljs.com/docs/overview) provides examples of Javascript and framework integration for Angular, React, Vue and Ember.\n\n## How to use?\nAfter installing the dependency, just add the following tag in your `html`:\n\n```html\n\u003cwc-trombone\u003e\u003c/wc-trombone\u003e\n```\n\nResize the window to make music!\n\n## Showcase\nTo make it go *TooT* click [here](https://stefannieuwenhuis.github.io/wc-trombone/)\n\n## Credits\nA HUGE thanks to [Matthew Rayfield](https://twitter.com/MatthewRayfield), who came up with the idea of a popup trombone and who allowed me to turn his idea into a Web Component.\n\n![thanks Matthew](https://media.giphy.com/media/3oz8xIsloV7zOmt81G/giphy.gif) \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefannieuwenhuis%2Fwc-trombone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefannieuwenhuis%2Fwc-trombone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefannieuwenhuis%2Fwc-trombone/lists"}