https://github.com/tanepiper/mm-components
Music Markups components
https://github.com/tanepiper/mm-components
stenciljs vanilla-javascript vanilla-js web-audio-api webaudio webcomponents
Last synced: about 1 month ago
JSON representation
Music Markups components
- Host: GitHub
- URL: https://github.com/tanepiper/mm-components
- Owner: tanepiper
- License: mit
- Created: 2017-12-18T19:06:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-20T10:09:35.000Z (over 7 years ago)
- Last Synced: 2025-02-28T18:47:44.635Z (about 2 months ago)
- Topics: stenciljs, vanilla-javascript, vanilla-js, web-audio-api, webaudio, webcomponents
- Language: TypeScript
- Size: 247 KB
- Stars: 49
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Music Markup Web Components
Music Markup Web Components are built using [StencilJS](https://stenciljs.com) and distributed as web components (currently not using Shadow DOM);
The idea behind it is to provide some general markup for creating music instruments and visualisations using web components.
Currently there are three components:
## ``
This is the top level tag to use to create the audio context. You can provide an `alternative-context` if you want to provide your own `AudioContext`, otherwise it will create a shared one for the application
## ``
The `` tag provides an audio context for creating a keyboard element. It takes one property at the moment `oscillator-type`, which can be one of `sine, square, sawsawtooth or triangle`. Inside you attach via a single slot any keys you want to bind. The `mm-keyboard` listens for real keyboard events as well as events from virtual keys. Currently it also provides the wave form picker.
## ``
The `` tag is used to add a key to the keyboard. You can provide it a `frequency` and `time` for the note, and you can also pass a `class-name` property to pass down custom classes.
In the current example it's used like this
```html
```
Future features include:
- [ ] Adding support for MP3 Audio / WAV files
- [ ] Provide theme support (Design different skins)
- [ ] Add a visualiser for control
- [ ] Support nested tags that provide node pass throughs
## Getting Started
To start a new project mm-components uses the Stencil starter
```bash
git clone https://github.com/tanepiper/mm-components.git mm-components
cd mm-components
git remote rm origin
```
and run:
```bash
npm install
npm start
```
To view the build, start an HTTP server inside of the `/www` directory.
To watch for file changes during development, run:
```bash
npm run dev
```
To build the app for production, run:
```bash
npm run build
```
To run the unit tests once, run:
```
npm test
```
To run the unit tests and watch for file changes during development, run:
```
npm run test.watch
```