wc-trombone v0.1.2
🎺 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.
But not this one! Its sound is produced by resizing the window of your browser or popup. Pretty amazing, right?!
Goals
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.
Installation
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>Framework integration
Stencil documentation 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:
<wc-trombone></wc-trombone>Resize the window to make music!
Showcase
To make it go TooT click here
Credits
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.
