### Customize webaudio-pianoroll Element Attributes

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Demonstrates how to customize the `<webaudio-pianoroll>` element's appearance and behavior by setting various HTML attributes. This example sets width, height, xrange, markend, and color properties.

```html
<webaudio-pianoroll width="300" height="200" xrange="64" markend="64" collt="#33f" coldk="#338" editmode="dragmono"></webaudio-pianoroll>
```

--------------------------------

### Load webcomponents.js Polyfill

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Shows how to load the webcomponents-lite.min.js polyfill, which may be necessary for supporting Web Components in older browsers.

```html
<script src="webcomponents-lite.min.js"></script>
```

--------------------------------

### Web Audio API Initialization and Note Callback (JavaScript)

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index3.html

Initializes the Web Audio API context and defines a callback function to generate audio for notes. The callback creates an oscillator, applies a gain envelope for volume, and sets the pitch based on MIDI note numbers.

```javascript
actx=new AudioContext(); function Callback(ev){ var o=actx.createOscillator(); var g=actx.createGain(); o.type="sawtooth"; o.detune.value=(ev.n-69)*100; g.gain.value=0; o.start(actx.currentTime); g.gain.setTargetAtTime(0.2,ev.t,0.005); g.gain.setTargetAtTime(0,ev.g,0.1); o.connect(g); g.connect(actx.destination); }
```

--------------------------------

### webaudio-pianoroll Component API

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index.html

Documents the primary methods and properties exposed by the webaudio-pianoroll Web Component. This includes playback control, data manipulation, and visual configuration. Related commands like 'Stop' are also included.

```APIDOC
webaudio-pianoroll Component API:

Methods:
  play(audioContext, callback): Starts playback of the pianoroll. Requires an AudioContext instance and a callback function to handle note events.
  stop(): Stops the current playback.
  getMMLString(): Retrieves the current pianoroll data as a Music Macro Language (MML) string.
  setMMLString(mmlString): Loads pianoroll data from a provided MML string.

Properties:
  xrange: Controls the horizontal range (time span) displayed. Typically multiplied by a timebase.
  xoffset: Adjusts the horizontal starting position or scroll offset.
  yrange: Determines the vertical range (number of keys or notes) displayed.
  yoffset: Sets the vertical starting position or scroll offset.
```

--------------------------------

### Load webaudio-pianoroll Library

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Demonstrates how to include the webaudio-pianoroll.js library in an HTML document. This can be done by deploying the file locally or using the provided CDN link.

```html
<script src="./webaudio-pianoroll.js"></script>
```

```html
<script src="https://g200kg.github.io/webaudio-pianoroll/webaudio-pianoroll.js"></script>
```

--------------------------------

### webaudio-pianoroll Component API

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index3.html

Provides methods for interacting with the webaudio-pianoroll component, including retrieving and setting musical data, controlling playback, and managing the component's state. The component itself is configured with a timebase and mode.

```APIDOC
webaudio-pianoroll
  Configuration:
    timebase: Number (default: 480) - Sets the base time unit for musical events.
    mode: String (e.g., "Live Demo", "dragpoly") - Specifies the operational mode.

  Methods:
    play(audioContext: AudioContext, callback: Function): void
      - Starts playback of the piano roll content.
      - audioContext: The Web Audio API AudioContext instance.
      - callback: A function to be called for each note event during playback.

    getMMLString(): string
      - Retrieves the musical data in a string format (likely MML - Music Macro Language).

    setMMLString(mmlString: string): void
      - Sets the musical data for the piano roll from a string.

    Stop(): void
      - Stops the current playback.

  Properties (controlled via Layout function):
    xrange: Number - Controls the horizontal range or zoom level.
    xoffset: Number - Controls the horizontal scroll offset.
    yrange: Number - Controls the vertical range or zoom level.
    yoffset: Number - Controls the vertical scroll offset.
```

--------------------------------

### JavaScript Audio Context and Callback Logic

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index.html

Initializes the Web Audio API context, creates an oscillator and gain node, and defines a callback function to handle note events. The callback adjusts the oscillator's detune and the gain node's volume based on event data.

```javascript
var timebase = 16;
var actx = new AudioContext();
var osc = actx.createOscillator();
var gain = actx.createGain();
gain.gain.value = 0;
osc.type = "sawtooth";
osc.start();
osc.connect(gain).connect(actx.destination);

function Callback(ev) {
  osc.detune.setValueAtTime((ev.n - 69) * 100, ev.t);
  gain.gain.setTargetAtTime(0.5, ev.t, 0.005);
  gain.gain.setTargetAtTime(0, ev.g, 0.1);
}
```

--------------------------------

### WebAudio-Pianoroll Functions

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Provides methods to interact with the WebAudio-Pianoroll component, including updating the display, retrieving sequence data, controlling playback, and positioning the cursor.

```APIDOC
WebAudio-Pianoroll Methods:

- redraw()
  Description: Redraws the entire pianoroll component.
  Parameters: None.
  Returns: void.

- getMMLString()
  Description: Retrieves the musical data as a string in MML (Music Macro Language) format. This function is intended for 'mono' type editmodes.
  Parameters: None.
  Returns: string - The MML string representation of the current sequence.

- setMMLString(str)
  Description: Sets the musical data into the WebAudio-Pianoroll component from an MML string. This function is intended for 'mono' type editmodes.
  Parameters:
    - str (string): The MML string to load.
  Returns: void.

- locate(tick)
  Description: Sets the playback cursor to a specific tick position.
  Parameters:
    - tick (Number): The tick position to move the cursor to.
  Returns: void.

- play(audioContext, callback, starttick)
  Description: Initiates playback of the current sequence. The component itself does not produce sound but passes necessary data to a callback function. Requires an AudioContext for timing. Playback starts from the current cursor position if starttick is not specified.
  Parameters:
    - audioContext (AudioContext): The Web Audio API AudioContext instance for timing.
    - callback (Function): A function to receive playback data ({t: noteOnTime, g: noteOffTime, n: noteNumber}).
    - starttick (Number, optional): The tick position to start playback from. If omitted, playback begins at the current cursor position.
  Returns: void.

- stop()
  Description: Stops the current playback.
  Parameters: None.
  Returns: void.
```

--------------------------------

### Place webaudio-pianoroll Element

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Illustrates the basic placement of the custom `<webaudio-pianoroll>` element within an HTML structure. This creates a default pianoroll instance.

```html
<webaudio-pianoroll></webaudio-pianoroll>
```

--------------------------------

### CSS Styling for Pianoroll Layout

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index.html

Provides CSS rules for styling the various elements of the pianoroll interface, including the main container, ranges, and offsets. These styles define the visual layout and positioning of components.

```css
body { }
#base { background:#88d; position:relative; width:100%; height:500px; }
#proll { position:absolute; left:16px; top:50px; }
#xrange { position:absolute; left:700px; top:400px; }
#xoffset { position:absolute; left:480px; top:400px; }
#yrange { position:absolute; left:850px; top:270px; }
#yoffset { position:absolute; left:850px; top:60px; }
#prollyoff { position:absolute; left:1040px; top:16px; }
#prollyzoom { position:absolute; left:1040px; top:400px; }
.ind { background:#00f; width:64px; height:8px; margin:0; padding:0; display:inline-block; }
.pat { background:#00f; width:64px; height:32px; margin:0; padding:0; display:inline-block; }
```

--------------------------------

### WebAudio-Pianoroll Callback Data Structure

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Details the data structure passed to the callback function during playback by the `play()` method. This structure provides essential timing and note information for audio synthesis.

```APIDOC
Callback Data Structure:

The `play()` function passes data to its callback function in the following format:

`callback({t: noteOnTime, g: noteOffTime, n: noteNumber})`

Where:
- `t` (Number): The calculated audioContext timeline value for when the note should turn ON.
- `g` (Number): The calculated audioContext timeline value for when the note should turn OFF (note duration).
- `n` (Number): The MIDI note number for the event.
```

--------------------------------

### JavaScript Playback and Layout Control

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index.html

Contains functions to resume the audio context and initiate playback of the pianoroll component. It also includes a layout function to update component properties like xrange, xoffset, yrange, and yoffset based on user input.

```javascript
function Play() {
  actx.resume();
  document.getElementById("proll").play(actx, Callback);
}

function Layout(k) {
  switch (k.id) {
    case "xrange":
      document.getElementById("proll").xrange = k.value * timebase;
      break;
    case "xoffset":
      document.getElementById("proll").xoffset = k.value * timebase;
      break;
    case "yrange":
      document.getElementById("proll").yrange = k.value;
      break;
    case "yoffset":
      document.getElementById("proll").yoffset = k.value;
      break;
  }
}
```

--------------------------------

### Piano Roll Component Control and Layout Handling (JavaScript)

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index3.html

Manages the playback of the piano roll and handles user interactions that modify the component's layout parameters. It allows adjusting the time base, zoom levels, and offsets via UI elements.

```javascript
timebase=480; function Play(){ actx.resume(); document.getElementById("proll").play(actx,Callback); } function Layout(k){ switch(k.id){ case "xrange": document.getElementById("proll").xrange=k.value*timebase; break; case "xoffset": document.getElementById("proll).xoffset=k.value*timebase; break; case "yrange": document.getElementById("proll).yrange=k.value; break; case "yoffset": document.getElementById("proll).yoffset=k.value; break; } }
```

--------------------------------

### WebAudio-Pianoroll Configuration Attributes

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Defines the various attributes that can be set to configure the appearance and behavior of the WebAudio-Pianoroll component. These attributes control dimensions, editing modes, time resolution, scrolling, rulers, colors, and playback options.

```APIDOC
WebAudio-Pianoroll Attributes:

- width (Number): Width of the element in pixels. Default: 640.
- height (Number): Height of the element in pixels. Default: 320.
- editmode (String): Combination of 'grid'/'drag' and 'mono'/'poly'. Default: "gridmono".
- timebase (Number): Time resolution of 1 bar. (1 bar / timebase = 1 tick). Default: 16.
- xrange (Number): Time axis view range in ticks. Default: 16.
- yrange (Number): Y axis view range in note number. Default: 16.
- xoffset (Number): Time axis offset in ticks. Default: 0.
- yoffset (Number): Y axis offset in note number. Default: 60.
- xscroll (Number): If 1, enables x-axis scrolling. Default: 0.
- yscroll (Number): If 1, enables y-axis scrolling. Default: 0.
- grid (Number): Time axis grid density in ticks. Default: 4.
- snap (Number): Note x-position snapping in ticks. Default: 1.
- wheelzoom (Number): If non-zero, enables time axis zoom by mouse wheel. Default: 0.
- xruler (Number): Time axis ruler height in pixels. Default: 24.
- yruler (Number): Y axis ruler width in pixels. Default: 24.
- octadj (Number): Ruler octave value adjust (-1: 60=C4). Default: -1.
- cursor (Number): Current play position in ticks. Default: 0.
- markstart (Number): Play range start marker position in ticks. Default: 0.
- markend (Number): Play range end marker position in ticks. Default: 16.
- collt (String): Score background (light part) color. Default: "#ccc".
- coldk (String): Score background (dark part) color. Default: "#aaa".
- colgrid (String): Score grid color. Default: "#666".
- colnote (String): Note color. Default: "#f22".
- colnotesel (String): Selected note color (for editmode="drag"). Default: "#0f0".
- colnoteborder (String): Note border color. Default: "#000".
- colrulerbg (String): Ruler background color. Default: "#666".
- colrulerfg (String): Ruler foreground color. Default: "#fff".
- colrulerborder (String): Ruler border color. Default: "#000".
- bgsrc (String): Background image URL. Set collt/coldk to 'rgba(r,g,b,a)' for visibility. Default: null.
- cursorsrc (String): Play cursor image URL. Default: internal resource.
- cursoroffset (Number): Play cursor image x offset in pixels. Default: 0.
- markstartsrc (String): Mark start image URL. Default: internal resource.
- markstartoffset (Number): Mark start image x offset in pixels. Default: 0.
- markendsrc (String): Mark end image URL. Default: internal resource.
- markendoffset (Number): Mark end image x offset in pixels. Default: -24.
- kbsrc (String): Keyboard image URL. Default: internal resource.
- kbwidth (Number): Keyboard image width in pixels. Default: 40.
- loop (Number): Enable loop playback. Default: 1.
- preload (Number): Data preload time in seconds when playing. Default: 1.
- tempo (Number): Tempo for playback. Default: 120.
```

--------------------------------

### Piano Roll Component Styling (CSS)

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/index3.html

Defines the visual layout and appearance of the piano roll interface elements using CSS. It utilizes absolute positioning for precise placement of various UI components.

```css
body{} #base { background:#88d; position:relative; width:100%; height:500px; } #proll{ position:absolute; left:16px; top:50px; } #xrange{ position:absolute; left:700px; top:400px; } #xoffset{ position:absolute; left:480px; top:400px; } #yrange{ position:absolute; left:850px; top:270px; } #yoffset{ position:absolute; left:850px; top:60px; } #prollyoff{ position:absolute; left:1040px; top:16px; } #prollyzoom{ position:absolute; left:1040px; top:400px; } .ind{ background:#00f; width:64px; height:8px; margin:0; padding:0; display:inline-block; } .pat{ background:#00f; width:64px; height:32px; margin:0; padding:0; display:inline-block; }
```

--------------------------------

### WebAudio-Pianoroll Sequence Data Structure

Source: https://github.com/g200kg/webaudio-pianoroll/blob/master/README.md

Describes the internal data structure used by the WebAudio-Pianoroll component to store sequence information. This array can be accessed directly for advanced manipulation.

```APIDOC
Sequence Data Structure:

Direct access to the sequence data is available via `DOMElement.sequence`.

`DOMElement.sequence` is an Array of noteEvents. Each noteEvent is an object containing information for a single note:

`{t: noteOnTick, g: noteLength, n: noteNumber}`

Where:
- `t` (Number): The tick position when the note starts.
- `g` (Number): The duration of the note in ticks.
- `n` (Number): The MIDI note number.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.