Web Harp is a browser musical instrument built from Web Components. Each string is a custom element that can vibrate visually and produce a tone when strummed. JavaScript modules keep component dependencies out of the main HTML page, leaving it with one application entry point. section 5.2
The application grows through three nested components:
- <webharp-app> forms the application shell and passes the strings count to its child component. section 5.2
- <webharp-strings> imports the string component, creates the requested number of elements, and lays them out with flexbox. section 5.2
- <webharp-string> defines the visible line, exposes strum and stopStrum methods, and registers itself with customElements. section 5.2
- A legacy MIDI.js dependency is wrapped as an importable module; the string component loads a piano soundfont and maps strum power and string number to playback. section 5.4
Minimal application entry point
The page references one module and declares the application with a configurable string count: <script type="module" src="./components/app/app.js"></script> and <webharp-app strings="12"></webharp-app>. The application imports its descendants, so dependency management remains decentralized. section 5.2
Listing 5.5. A minimal application HTML file for our Web Harp demo
<html>
<head>
<title>Web Harp</title>
<script type="module" #1
src="./components/app/app.js">
</script>
<link href="csshake.min.css" #2
type="text/css" rel="stylesheet">
<link href="main.css" #3
type="text/css" rel="stylesheet">
</head>
<body>
<webharp-app strings="8"></webharp-app>
</body>
</html>
Inspect the minimal HTML file to see the single module reference, external stylesheets, and configurable Web Harp element. section 5.2
