https://github.com/stagas/x-pianokeys

Web Component MIDI ready piano keys.
https://github.com/stagas/x-pianokeys

daw keys midi piano ui web-component

Last synced: about 2 months ago
JSON representation

Web Component MIDI ready piano keys.

• Host: GitHub
• URL: https://github.com/stagas/x-pianokeys
• Owner: stagas
• License: mit
• Created: 2022-01-25T18:20:36.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-11T18:39:50.000Z (almost 2 years ago)
• Last Synced: 2024-08-08T22:52:02.811Z (5 months ago)
• Topics: daw, keys, midi, piano, ui, web-component
• Language: TypeScript
• Homepage:
• Size: 134 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




x-pianokeys    





Web Component MIDI ready piano keys.





npm i x-pianokeys 


pnpm add x-pianokeys 

yarn add x-pianokeys

## Examples

#  web  


    
Try it live    #  view source  example/web.tsx  


```tsx

/** @jsxImportSource minimal-view */

import { render } from 'minimal-view'

import { PianoKeys } from 'x-pianokeys'

document.body.innerHTML = /*html*/ `

html, body {

  width: 100%;

  height: 100%;

}

.piano {

  resize: both;

  overflow: hidden;

}





`

const audioContext = new AudioContext()

render(

  <>

    


     { }}

    />

    


    


     { }}

    />

    


    


     { }}

    />

    


    


     { }}

    />

    

  >,

  document.getElementById('demo')!

)

// setTimeout(() => {

//   document.querySelector('x-piano')!.turnOnKey(2)

//   document.querySelector('x-piano')!.turnOnKey(5)

//   document.querySelector('x-piano')!.turnOnKey(3)

// }, 1000)

// 


//   

// 


// for demo: requestAnimationFrame <- for shoty

// const pianos = document.querySelectorAll('x-piano') as NodeListOf

// let ivl = setInterval(() => {

//   const piano = pianos[Math.random() * pianos.length | 0]

//   const note = Math.random() * 20 | 0

//   piano.turnOnKey?.(note)

//   setTimeout(() => piano.turnOffKey?.(note), Math.random() * 1500)

// }, 50)

// setTimeout(() => {

//   clearInterval(ivl)

// }, 1000)

```



## API

  #  MidiEvents        


{

  #  midimessage        


WebMidi.MIDIMessageEvent
        
}
        #  PianoKeys(props)        
    
    #  props        


props
        
  


PianoKeys(props)   =>  

VKid
    


## Credits

- [minimal-view](https://npmjs.org/package/minimal-view) by [stagas](https://github.com/stagas) – Minimal reactive component view library.

- [to-fluent](https://npmjs.org/package/to-fluent) by [stagas](https://github.com/stagas) – Convert a function with a settings object to fluent API.

- [webaudio-tools](https://npmjs.org/package/webaudio-tools) by [stagas](https://github.com/stagas) – Useful tools for WebAudio.

## Contributing

[Fork](https://github.com/stagas/x-pianokeys/fork) or [edit](https://github.dev/stagas/x-pianokeys) and submit a PR.

All contributions are welcome!

## License

MIT © 2023 [stagas](https://github.com/stagas)