### CDN Integration Example
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Include the library via CDN in your HTML. This example shows basic setup with dependencies and custom elements.
```html
```
--------------------------------
### Complete HTML Example with Multiple MIDI Players and Visualizers
Source: https://context7.com/cifkao/html-midi-player/llms.txt
A full HTML example demonstrating multiple midi-player instances sharing midi-visualizer components. Includes custom CSS for players and visualizers, event listeners for player states, and configuration for a waterfall visualizer.
```html
MIDI Player Demo
MIDI Player Demo
```
--------------------------------
### NPM Installation
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Install the package from NPM and import it as an ES module in your JavaScript application.
```APIDOC
## NPM Installation
Install the package from NPM and import it as an ES module in your JavaScript application.
```bash
npm install --save html-midi-player
```
```javascript
// Import as ES Module
import 'html-midi-player';
// The custom elements are now registered and ready to use
// You can then create elements programmatically or use them in your HTML
```
```
--------------------------------
### NPM Installation
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Install the package from NPM for use in your JavaScript application. The custom elements are registered automatically.
```bash
npm install --save html-midi-player
```
```javascript
// Import as ES Module
import 'html-midi-player';
// The custom elements are now registered and ready to use
// You can then create elements programmatically or use them in your HTML
```
--------------------------------
### Basic MIDI Player and Visualizer Setup
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Integrate a midi-player and midi-visualizer into your HTML. The player is linked to the visualizer using the 'visualizer' attribute.
```html
```
--------------------------------
### Initialize MIDI Players and Event Listeners
Source: https://github.com/cifkao/html-midi-player/blob/master/index.html
Sets up event listeners for 'load', 'start', 'stop', and 'loop' events on all 'midi-player' elements after the DOM is loaded. Logs events to the console.
```javascript
window.addEventListener('DOMContentLoaded', function() { for (const player of document.querySelectorAll('midi-player')) { for (const event of ['load', 'start', 'stop', 'loop']) { player.addEventListener(event, console.log); } } const waterfallVisualizer = document.querySelector('#waterfallVisualizer'); waterfallVisualizer.config = { showOnlyOctavesUsed: true }; });
```
--------------------------------
### Style MIDI Player Loading Overlay
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Style the loading overlay of the midi-player using ::part(loading-overlay). This example sets a semi-transparent background.
```css
/* Style loading overlay */
midi-player::part(loading-overlay) {
background: rgba(0, 0, 0, 0.5);
}
```
--------------------------------
### Loading NoteSequence into midi-player
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Load MIDI content directly as a Magenta NoteSequence object for advanced programmatic control. Includes examples of sequence manipulation.
```javascript
const player = document.getElementById('myPlayer');
// Load MIDI from URL and convert to NoteSequence using Magenta core
const noteSequence = await core.urlToNoteSequence('https://example.com/song.mid');
// Assign the NoteSequence directly to the player
player.noteSequence = noteSequence;
// You can also manipulate the sequence before loading
const clonedSequence = core.sequences.clone(noteSequence);
const trimmedSequence = core.sequences.trim(noteSequence, 0, 10); // First 10 seconds
const combinedSequence = core.sequences.concatenate([seq1, seq2]);
player.noteSequence = trimmedSequence;
```
--------------------------------
### Style MIDI Player Play Button
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Customize the appearance of the play button using ::part(play-button). This example sets background, border, border-radius, size, and adds a hover effect.
```css
/* Style the play button */
midi-player::part(play-button) {
background-color: #ffffff;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
cursor: pointer;
transition: transform 0.2s;
}
midi-player::part(play-button):hover {
transform: scale(1.1);
}
```
--------------------------------
### Subscribe to MIDI Player Events
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Listen for various playback events like load, start, stop, loop, and individual notes to trigger actions during MIDI playback. Ensure the player element is ready before adding event listeners.
```javascript
const player = document.getElementById('myPlayer');
// Fired when MIDI content is loaded and ready to play
player.addEventListener('load', () => {
console.log('MIDI file loaded successfully');
console.log('Duration:', player.duration, 'seconds');
});
// Fired when playback starts
player.addEventListener('start', () => {
console.log('Playback started');
});
// Fired when playback stops (includes finished flag)
player.addEventListener('stop', (event) => {
console.log('Playback stopped');
console.log('Finished naturally:', event.detail.finished);
});
// Fired when player loops back to beginning (when loop=true)
player.addEventListener('loop', () => {
console.log('Playback looped');
});
// Fired on each note onset during playback
player.addEventListener('note', (event) => {
const note = event.detail.note;
console.log('Note played:', {
pitch: note.pitch,
startTime: note.startTime,
endTime: note.endTime,
velocity: note.velocity,
instrument: note.instrument
});
});
```
--------------------------------
### Style MIDI Player Seek Bar
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Style the seek bar of the midi-player using ::part(seek-bar). This example sets the width, height, and border-radius.
```css
/* Style the seek bar */
midi-player::part(seek-bar) {
width: 100%;
height: 8px;
border-radius: 4px;
}
```
--------------------------------
### Basic midi-player Usage
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Use the `` element with the `src` attribute to load MIDI files. Options include SoundFont support and looping.
```html
```
--------------------------------
### Configure MIDI Player Visualizer Settings
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Customize visualizer appearance and behavior by setting properties like `noteHeight`, `pixelsPerTimeStep`, and `minPitch` within the `config` object. These settings are applied via JavaScript.
```javascript
visualizer.config = {
noteHeight: 4,
pixelsPerTimeStep: 60,
minPitch: 30
};
```
--------------------------------
### midi-player - NoteSequence Loading
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Load MIDI content directly using Magenta's NoteSequence format for programmatic control over the musical data.
```APIDOC
## midi-player - NoteSequence Loading
Load MIDI content directly using Magenta's NoteSequence format for programmatic control over the musical data.
```javascript
const player = document.getElementById('myPlayer');
// Load MIDI from URL and convert to NoteSequence using Magenta core
const noteSequence = await core.urlToNoteSequence('https://example.com/song.mid');
// Assign the NoteSequence directly to the player
player.noteSequence = noteSequence;
// You can also manipulate the sequence before loading
const clonedSequence = core.sequences.clone(noteSequence);
const trimmedSequence = core.sequences.trim(noteSequence, 0, 10); // First 10 seconds
const combinedSequence = core.sequences.concatenate([seq1, seq2]);
player.noteSequence = trimmedSequence;
```
```
--------------------------------
### Bind MIDI Player to Visualizers (HTML)
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Connect a MIDI player to one or more visualizers directly in HTML using the 'visualizer' attribute. Specify visualizers by CSS selector, allowing multiple bindings.
```html
```
--------------------------------
### Style MIDI Player Control Panel
Source: https://github.com/cifkao/html-midi-player/blob/master/doc/midi-player.md
Use the ::part syntax to style specific parts of the midi-player element, such as the control panel. This allows for custom theming of the player's appearance.
```css
midi-player::part(control-panel) {
background: aquamarine;
border-radius: 0px;
}
```
--------------------------------
### Bind MIDI Player to Visualizers (JavaScript)
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Programmatically connect MIDI players to visualizers using the 'addVisualizer' and 'removeVisualizer' methods. This allows dynamic management of visualizer bindings.
```javascript
// Bind programmatically using JavaScript
const player = document.getElementById('myPlayer');
const visualizer1 = document.getElementById('pianoRollVisualizer');
const visualizer2 = document.getElementById('waterfallVisualizer');
// Add visualizers to player
player.addVisualizer(visualizer1);
player.addVisualizer(visualizer2);
// Remove a visualizer binding
player.removeVisualizer(visualizer1);
// Note: A single visualizer can be bound to multiple players
// It will update only while the associated player is playing
```
--------------------------------
### Set MIDI Player Source via HTML
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Specify the MIDI file to be played by setting the 'src' attribute on the midi-player element.
```html
```
--------------------------------
### Bind Visualizers to MIDI Player
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Connect visualizers to the MIDI player using the `visualizer` attribute in HTML with a CSS selector, or by calling the `addVisualizer` method in JavaScript with a DOM element. This updates the visualizer only when the player is active.
```html
```
```javascript
player.addVisualizer(document.getElementById('myVisualizer'));
player.addVisualizer(document.getElementById('myOtherVisualizer'));
```
--------------------------------
### Style MIDI Player Time Display
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Customize the time display elements (current-time and total-time) using ::part(time), ::part(current-time), and ::part(total-time). This includes font, size, and color.
```css
/* Style time display */
midi-player::part(time) {
font-family: monospace;
font-size: 14px;
color: #ffffff;
}
midi-player::part(current-time) {
color: #ffeb3b;
}
midi-player::part(total-time) {
color: #e0e0e0;
}
```
--------------------------------
### MIDI Visualizer Methods
Source: https://github.com/cifkao/html-midi-player/blob/master/doc/midi-visualizer.md
Methods available on the MIDI visualizer element for controlling and updating the visualization.
```APIDOC
## MIDI Visualizer Methods
### Description
Methods available on the MIDI visualizer element for controlling and updating the visualization.
### Methods
- **clearActiveNotes**(): void - Clears any currently active notes from the visualization.
- **redraw**(activeNote?: INote | undefined): void - Redraws the visualizer, optionally highlighting a specific active note.
- **reload**(): void - Reloads the current MIDI sequence and redraws the visualizer.
```
--------------------------------
### CDN Integration
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Include the library via CDN and add the custom elements to your HTML. The library requires Tone.js and Magenta.js core as dependencies.
```APIDOC
## CDN Integration
Include the library via CDN and add the custom elements to your HTML. The library requires Tone.js and Magenta.js core as dependencies.
```html
```
```
--------------------------------
### midi-player Element - Basic Usage
Source: https://context7.com/cifkao/html-midi-player/llms.txt
The `` element provides a complete MIDI playback UI with play/pause button, seek bar, and time display. Set the `src` attribute to load a MIDI file URL.
```APIDOC
## midi-player Element - Basic Usage
The `` element provides a complete MIDI playback UI with play/pause button, seek bar, and time display. Set the `src` attribute to load a MIDI file URL.
```html
```
```
--------------------------------
### Style MIDI Player Control Panel
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Use the ::part(control-panel) pseudo-element to style the main control panel of the midi-player. This includes background, border-radius, padding, and box-shadow.
```css
/* Style the main control panel */
midi-player::part(control-panel) {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
```
--------------------------------
### Style Staff Visualizer
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Set a custom background color for the staff visualizer.
```css
/* Staff visualizer styling */
midi-visualizer.staff-visualizer {
background: #fffef0;
}
```
--------------------------------
### Enable Looping for MIDI Player
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Use the `loop` attribute in HTML or set the `loop` property to `true` in JavaScript to make the MIDI player repeat playback indefinitely.
```html
```
```javascript
player.loop = true;
```
--------------------------------
### Include Scripts for HTML MIDI Player
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Add these script tags to your HTML page to include the necessary libraries for the midi-player and its dependencies.
```html
```
--------------------------------
### Configure MIDI Visualizer Appearance
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Customize the visualizer's look and feel using the 'config' property with Magenta's VisualizerConfig options. Load MIDI content via 'src' or 'noteSequence'.
```javascript
const visualizer = document.getElementById('myVisualizer');
// Configure visualizer appearance
visualizer.config = {
noteHeight: 6,
pixelsPerTimeStep: 60,
noteSpacing: 1,
noteRGB: '35, 70, 90',
activeNoteRGB: '255, 0, 0',
minPitch: 21,
maxPitch: 108,
showOnlyOctavesUsed: true
};
// Load MIDI content
visualizer.src = 'https://example.com/song.mid';
// Or set NoteSequence directly
visualizer.noteSequence = myNoteSequence;
// Manually trigger redraw (usually automatic)
visualizer.redraw();
// Clear highlighted/active notes
visualizer.clearActiveNotes();
// Reload visualizer
visualizer.reload();
```
--------------------------------
### Set MIDI Player Source via JavaScript
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Dynamically set the MIDI file source for a midi-player element using its 'src' property in JavaScript.
```javascript
player.src = "twinkle-twinkle.mid";
```
--------------------------------
### MIDI Visualizer Properties
Source: https://github.com/cifkao/html-midi-player/blob/master/doc/midi-visualizer.md
Properties that can be set on the MIDI visualizer element to configure its behavior and content.
```APIDOC
## MIDI Visualizer Properties
### Description
Properties that can be set on the MIDI visualizer element to configure its behavior and content.
### Properties
- **config** (VisualizerConfig) - Magenta visualizer config object.
- **noteSequence** (INoteSequence | null) - Magenta note sequence object representing the currently displayed content.
- **src** (string | null) - MIDI file URL. This property also corresponds to the `src` attribute.
- **type** (string) - Visualizer type. Allowed values are "piano-roll", "waterfall", or "staff". This property also corresponds to the `type` attribute.
```
--------------------------------
### Style MIDI Visualizer Container
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Style the midi-visualizer element itself, setting its display, dimensions, background, border-radius, and overflow properties.
```css
/* Style the visualizer container */
midi-visualizer {
display: block;
width: 100%;
height: 300px;
background: #1a1a2e;
border-radius: 8px;
overflow: hidden;
}
```
--------------------------------
### Set NoteSequence via JavaScript
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Assign a Magenta NoteSequence object directly to the 'noteSequence' property of a midi-player for playback.
```javascript
player.noteSequence = TWINKLE_TWINKLE;
```
--------------------------------
### Configure SoundFont for MIDI Player
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Use the `sound-font` attribute in HTML or the `soundFont` property in JavaScript to specify a SoundFont for the MIDI player. The default SoundFont is used if the attribute is present without a value.
```html
```
--------------------------------
### Style Active MIDI Visualizer Notes
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Style currently playing notes in the midi-visualizer by targeting SVG rect elements with both 'note' and 'active' classes.
```css
/* Style currently playing notes */
midi-visualizer svg rect.note.active {
fill: #ff6b6b;
stroke: #ee5a5a;
}
```
--------------------------------
### JavaScript Control of midi-player
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Control playback, load files, and manage player state programmatically using JavaScript properties and methods.
```javascript
// Get the player element
const player = document.getElementById('myPlayer');
// Load a MIDI file via URL
player.src = 'https://example.com/song.mid';
// Configure SoundFont (null = oscillator, '' = default SoundFont, or custom URL)
player.soundFont = ''; // Use default SoundFont
// Enable/disable looping
player.loop = true;
// Playback control methods
player.start(); // Start or resume playback
player.stop(); // Stop playback
// Get playback state
console.log(player.playing); // boolean - is currently playing
console.log(player.currentTime); // number - current position in seconds
console.log(player.duration); // number - total duration in seconds
// Seek to specific time (in seconds)
player.currentTime = 30;
// Reload the player (useful after external changes)
player.reload();
// Access the underlying Magenta NoteSequence
const noteSequence = player.noteSequence;
console.log('Total notes:', noteSequence.notes.length);
```
--------------------------------
### MIDI Player Element API
Source: https://github.com/cifkao/html-midi-player/blob/master/doc/midi-player.md
This section details the attributes, properties, methods, and events available for the midi-player HTML element.
```APIDOC
## MIDI Player Element API
### Description
Provides a custom HTML element for playing MIDI files with various configuration options and playback controls.
### Attributes
| Attribute | Description |
|--------------|--------------------------------------------------|
| `visualizer` | A selector matching `midi-visualizer` elements to bind to this player |
### Properties
| Property | Attribute | Type | Description |
|----------------|--------------|-------------------------|--------------------------------------------------|
| `currentTime` | | `number` | Current playback position in seconds |
| `duration` | | `number` | Content duration in seconds |
| `loop` | `loop` | `boolean` | Indicates whether the player should loop |
| `noteSequence` | | `INoteSequence | null` | Magenta note sequence object representing the currently loaded content |
| `playing` | | `boolean` | Indicates whether the player is currently playing |
| `soundFont` | `sound-font` | `string | null` | Magenta SoundFont URL, an empty string to use the default SoundFont, or `null` to use a simple oscillator synth |
| `src` | `src` | `string | null` | MIDI file URL |
### Methods
| Method | Type |
|--------------------|-----------------------------------------|
| `addVisualizer` | `(visualizer: VisualizerElement): void` |
| `reload` | `(): void` |
| `removeVisualizer` | `(visualizer: VisualizerElement): void` |
| `start` | `(): void` |
| `stop` | `(): void` |
### Events
| Event | Type | Description |
|---------|---------------------------------------|--------------------------------------------------|
| `load` | | The content is loaded and ready to play |
| `loop` | | The player has automatically restarted playback after reaching the end |
| `note` | `CustomEvent<{ note: INote; }>` | A note starts |
| `start` | | The player has started playing |
| `stop` | `CustomEvent<{ finished: boolean; }>` | The player has stopped playing |
### CSS Shadow Parts
| Part | Description |
|-------------------|--------------------------------------------------|
| `control-panel` | `
` containing all the controls |
| `current-time` | Elapsed time |
| `loading-overlay` | Overlay with shimmer animation |
| `play-button` | Play button |
| `seek-bar` | `` showing playback position |
| `time` | Numeric time indicator |
| `total-time` | Total duration |
```
--------------------------------
### Configure SoundFont via JavaScript
Source: https://github.com/cifkao/html-midi-player/blob/master/README.md
Set the `soundFont` property in JavaScript to `null` to disable SoundFonts, an empty string for the default, or a URL to a specific SoundFont. This allows dynamic control over audio output.
```javascript
player.soundFont = null; // no SoundFont
player.soundFont = ''; // default SoundFont (same as below)
player.soundFont = 'https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus';
```
--------------------------------
### MIDI Visualizer Element Types
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Use the `` element to graphically display MIDI content. Choose from 'piano-roll', 'waterfall', or 'staff' notation types by setting the 'type' attribute.
```html
```
--------------------------------
### midi-player - JavaScript Control
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Control the player programmatically using JavaScript properties and methods for dynamic playback control, seeking, and state management.
```APIDOC
## midi-player - JavaScript Control
Control the player programmatically using JavaScript properties and methods for dynamic playback control, seeking, and state management.
```javascript
// Get the player element
const player = document.getElementById('myPlayer');
// Load a MIDI file via URL
player.src = 'https://example.com/song.mid';
// Configure SoundFont (null = oscillator, '' = default SoundFont, or custom URL)
player.soundFont = ''; // Use default SoundFont
// Enable/disable looping
player.loop = true;
// Playback control methods
player.start(); // Start or resume playback
player.stop(); // Stop playback
// Get playback state
console.log(player.playing); // boolean - is currently playing
console.log(player.currentTime); // number - current position in seconds
console.log(player.duration); // number - total duration in seconds
// Seek to specific time (in seconds)
player.currentTime = 30;
// Reload the player (useful after external changes)
player.reload();
// Access the underlying Magenta NoteSequence
const noteSequence = player.noteSequence;
console.log('Total notes:', noteSequence.notes.length);
```
```
--------------------------------
### Style MIDI Visualizer Notes
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Style the SVG rect elements with the class 'note' within a midi-visualizer, controlling their fill, stroke, and stroke-width.
```css
/* Style note rectangles in piano-roll */
midi-visualizer svg rect.note {
fill: #4a9eff;
stroke: #2d7dd2;
stroke-width: 1px;
}
```
--------------------------------
### Style Waterfall Visualizer
Source: https://context7.com/cifkao/html-midi-player/llms.txt
Apply specific styling to the waterfall visualizer, such as rounded corners for note rectangles.
```css
/* Waterfall visualizer specific styling */
midi-visualizer.waterfall-visualizer svg rect {
rx: 2; /* Rounded corners */
ry: 2;
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.