html-midi-player, with tone.js

 html-midi-player | Play and display MIDI files online

GitHub - cifkao/html-midi-player: 🎹 Play and display MIDI files on the web

<midi-player> and <midi-visualizer> HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.

Notable websites that use html-midi-player include abcnotation.com, Musical Nexus and demo websites for music generation models: piano infilling, stochastic positional encoding.

@magenta/music - v1.23.1

HTML MIDI Player Basic Example

This is a perfect example of modern Web Components - they work like native HTML elements but provide complex MIDI functionality powered by Magenta.js and Tone.js under the hood!

<midi-player

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"

  sound-font visualizer="#myPianoRollVisualizer">

</midi-player>

<midi-visualizer type="piano-roll" id="myPianoRollVisualizer"

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">

</midi-visualizer>

<midi-player

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"

  sound-font visualizer="#myStaffVisualizer">

</midi-player>

<midi-visualizer type="staff" id="myStaffVisualizer"

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">

</midi-visualizer>

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>

<!-- Alternative: Separate script tags for each library -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.58/build/Tone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.23.1/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5/dist/focus-visible.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-midi-player@1.5.0/dist/midi-player.min.js"></script>

export class VisualizerElement extends HTMLElement {

  static get observedAttributes() {

    return ['src', 'type'];

  }

  connectedCallback() {

    this.attachShadow({mode: 'open'});

    this.shadowRoot.appendChild(visualizerTemplate.content.cloneNode(true));

    // ... initialize visualizer

  }

}

See the Pen HTML MIDI Player Basic Example by Ondřej Cífka (@cifkao) on CodePen.

ML/AI: BirdNET-Pi

mcguirepr89/BirdNET-Pi: A realtime acoustic bird classification system for the Raspberry Pi 4B, 3B+, and 0W2 built on the TFLite version of BirdNET. @GitHub

A realtime acoustic bird classification system for the Raspberry Pi 4B, 400, 3B+, and 0W2

BirdNET-Pi is built on the BirdNET framework by @kahst using pre-built TFLite binaries by @PINTO0309 . It is able to recognize bird sounds from a USB microphone or sound card in realtime and share its data with the rest of the world.

related mobile app

Merlin Bird ID – Free, instant bird identification help and guide for thousands of birds – Identify the birds you see

Merlin Bird ID by Cornell Lab - Apps on Google Play

Merlin Bird ID by Cornell Lab on the App Store