Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/StefanNieuwenhuis/wc-trombone
A trombone web component which you can play by resizing the window!
https://github.com/StefanNieuwenhuis/wc-trombone
html javascript jsx stencil stencil-components webaudio-api webcomponents
Last synced: about 1 month ago
JSON representation
A trombone web component which you can play by resizing the window!
- Host: GitHub
- URL: https://github.com/StefanNieuwenhuis/wc-trombone
- Owner: StefanNieuwenhuis
- License: mit
- Created: 2019-07-31T14:36:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-08-02T08:35:34.000Z (over 5 years ago)
- Last Synced: 2024-10-27T18:45:39.289Z (about 2 months ago)
- Topics: html, javascript, jsx, stencil, stencil-components, webaudio-api, webcomponents
- Language: TypeScript
- Homepage: https://stefannieuwenhuis.github.io/wc-trombone
- Size: 135 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - Trombone Component - An amazing Trombone Component that makes music when you resize the window. It's A showcase on how StencilJs and the Web Audio API can collaborate to create awesome things. (List of Awesome Components Made using StencilJS / Individual Components)
README
# 🎺 Trombone Web Component 🎺
"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).
But not this one! Its sound is produced by resizing the window of your browser or popup. Pretty amazing, right?!
By [Stefan Nieuwenhuis](https://twitter.com/stefannhs)
## Goals
The 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.
This Web Component is built with [StencilJs](https://stenciljs.com).
## Installation
Script tag (with unpkg):
Put the following tag in the `` of your `index.html` and you can use the element anywhere in your application:
```js
```
Node Modules (npm or yarn):
Add the `wc-components` as dependency to `node_modules` via npm or yarn:
```bash
# add dependency with npm:
$ npm install wc-trombone
# or with yarn:
$ yarn add wc-trombone
```
Put the following tag in the `` of your `index.html` and you can use the element anywhere in your application:
```js
```
## Framework integration
[Stencil documentation](https://stenciljs.com/docs/overview) provides examples of Javascript and framework integration for Angular, React, Vue and Ember.
## How to use?
After installing the dependency, just add the following tag in your `html`:
```html
```
Resize the window to make music!
## Showcase
To make it go *TooT* click [here](https://stefannieuwenhuis.github.io/wc-trombone/)
## Credits
A 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.
