music-elements

Basic Usage

Custom Frequency

This one plays C5 (523.25 Hz) instead:

Metronome

A click track at a configurable BPM:

Code Examples

HTML

<!-- Default 440 Hz -->
<tone-generator></tone-generator>

<!-- Custom frequency -->
<tone-generator frequency="523.25"></tone-generator>

<!-- Auto-play on load -->
<tone-generator playing></tone-generator>

JavaScript

const tone = document.querySelector('tone-generator');

// Start/stop methods
tone.start();
tone.stop();
tone.toggle();

// Change frequency dynamically
tone.frequency = 880;

// Check if playing
console.log(tone.playing);

// Listen to events
tone.addEventListener('tone-start', (e) => {
  console.log('Started at', e.detail.frequency, 'Hz');
});
tone.addEventListener('tone-stop', () => {
  console.log('Stopped');
});