"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.
But not this one! Its sound is produced by resizing the window of your browser or popup. Pretty amazing, right?!
The idea behind this Web Component is to learn more about the Web Audio API in a fun way and to bring Web Components to a wider audience.
This Web Component is built with StencilJs.
Script tag (with unpkg):
Put the following tag in the <head> of your index.html and you can use the element anywhere in your application:
<script src='https://unpkg.com/wc-trombone@latest/dist/wc-trombone.js'></script>Node Modules (npm or yarn):
Add the wc-components as dependency to node_modules via npm or yarn:
# add dependency with npm:
$ npm install wc-trombone
# or with yarn:
$ yarn add wc-trombonePut the following tag in the <head> of your index.html and you can use the element anywhere in your application:
<script src='node_modules/wc-trombone/dist/wc-trombone.js'></script>Stencil documentation provides examples of Javascript and framework integration for Angular, React, Vue and Ember.
After installing the dependency, just add the following tag in your html:
<wc-trombone></wc-trombone>Resize the window to make music!
To make it go TooT click here
A HUGE thanks to Matthew Rayfield, who came up with the idea of a popup trombone and who allowed me to turn his idea into a Web Component.
