All Projects â†’ hikarock â†’ x-play

hikarock / x-play

Licence: MIT license
đŸŽŒ đŸŽ¶ đŸŽ” đŸŽč đŸŽ» đŸŽ· đŸŽș 🎾

Programming Languages

HTML
75241 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to x-play

Polymer Analyzer
Moved to Polymer/tools monorepo
Stars: ✭ 162 (+604.35%)
Mutual labels:  polymer, web-components
moment-element
Web Component (with Polymer) wrapper for the moment library
Stars: ✭ 15 (-34.78%)
Mutual labels:  polymer, web-components
Polymer Skeleton
💀 Skeleton for Polymer 3 app with Webpack, PostCSS and Service Workers ready.
Stars: ✭ 185 (+704.35%)
Mutual labels:  polymer, web-components
Polydev
Automatic web components profiling in chrome devtools
Stars: ✭ 118 (+413.04%)
Mutual labels:  polymer, web-components
abdonrd.com
My little personal website
Stars: ✭ 16 (-30.43%)
Mutual labels:  polymer, web-components
Cleverstyle Framework
CleverStyle Framework is simple, scalable, fast and secure full-stack PHP framework
Stars: ✭ 150 (+552.17%)
Mutual labels:  polymer, web-components
eslint-plugin-lit
lit-html support for ESLint
Stars: ✭ 90 (+291.3%)
Mutual labels:  polymer, web-components
Polymer Bundler
Moved to Polymer/tools monorepo
Stars: ✭ 1,206 (+5143.48%)
Mutual labels:  polymer, web-components
nuxeo-ui-elements
Library of UI web components
Stars: ✭ 20 (-13.04%)
Mutual labels:  polymer, web-components
mc-viewer
🌐🏠 A Web Component for visualizing Minecraft schematics
Stars: ✭ 25 (+8.7%)
Mutual labels:  polymer, web-components
Hot Table
Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
Stars: ✭ 114 (+395.65%)
Mutual labels:  polymer, web-components
fullcalendar-calendar
Web Component wrapper for FullCalendar
Stars: ✭ 21 (-8.7%)
Mutual labels:  polymer, web-components
Polymer Build
Moved to Polymer/tools monorepo
Stars: ✭ 107 (+365.22%)
Mutual labels:  polymer, web-components
Gwt Polymer Elements
Polymer Web Components for GWT. A collection of Material Design widgets for desktop and mobile.
Stars: ✭ 153 (+565.22%)
Mutual labels:  polymer, web-components
Gulp Vulcanize
Concatenate a set of Web Components into one file
Stars: ✭ 101 (+339.13%)
Mutual labels:  polymer, web-components
Polyserve
Moved to Polymer/tools monorepo
Stars: ✭ 194 (+743.48%)
Mutual labels:  polymer, web-components
L2t Paper Slider
Polymer element for displaying slides in a carousel
Stars: ✭ 53 (+130.43%)
Mutual labels:  polymer, web-components
Flip Clock
A flip clock, timer and countdown made with Polymer
Stars: ✭ 69 (+200%)
Mutual labels:  polymer, web-components
Storybook
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Stars: ✭ 67,445 (+293139.13%)
Mutual labels:  polymer, web-components
page-title
A Polymer element for easily updating a webpage's title, such as in a SPA.
Stars: ✭ 13 (-43.48%)
Mutual labels:  polymer, web-components

<x-play>

đŸŽŒ đŸŽ¶ đŸŽ” đŸŽč đŸŽ» đŸŽ· đŸŽș 🎾

DEMO

x-play

Get Started

% npm start

Examples

Piano 1

<x-play sound="piano" tempo="80" repeat="1" melody="d2 e2 c2 c1 g1"></x-play>

Piano 2

<x-play sound="piano" tempo="200" repeat="2"
  melody="| g3 e3 e3  - | f3 d3 d3  - | c3 d3 e3 f3 | g3 g3 g3  - |
          | g3 e3 e3 e3 | f3 d3 d3 d3 | c3 e3 g3 g3 | e3 e3 e3  - |
          | d3 d3 d3 d3 | d3 e3 f3  - | e3 e3 e3 e3 | e3 f3 g3  - |
          | g3 e3 e3 e3 | f3 d3 d3 d3 | c3 e3 g3 g3 | e3 e3 e3  - |"></x-play>

Drum

<x-play sound="snare" tempo="100" repeat="2" melody="-  c4  - c4  - c4  - c4"></x-play>
<x-play sound="kick"  tempo="100" repeat="2" melody="c4 c4 c4 c4 c4 c4 c4 c4"></x-play>

Props

  • melody (require)
    • scale[octave]
  • sound (default: "piano")
    • "cymbal"
    • "hihat"
    • "kick"
    • "piano"
    • "snare"
    • "tom"
  • tempo (default: "100")
  • repeat (default: "1")

Thanks!

慹æ›Čç„Ąæ–™ăƒ»ăƒ•ăƒȘăƒŒéŸłæ„œçŽ æ/魔王魂

Licence

MIT

Author

hikarock

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].