Spaces:
Running
Running
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> | |
| <!-- Import necessary scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/tone@14.7.58"></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"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/html-midi-player@1.5.0"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <script>hljs.initHighlightingOnLoad();</script> | |
| <!-- Import CSS styles --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="badge-container"> | |
| <img src="https://img.shields.io/github/license/dbjohnson/midigen.svg" alt="License Badge"> | |
| <img src="https://img.shields.io/pypi/v/midigen.svg" alt="PyPI Badge"> | |
| <img src="https://github.com/dbjohnson/midigen/actions/workflows/tests.yml/badge.svg" alt="Tests Badge"> | |
| <a href="https://github.com/dbjohnson/midigen" target="_blank"> | |
| <img src="github.svg" alt="GitHub Logo" class="github-logo"> | |
| </a> | |
| </div> | |
| <h1>midigen</h1> | |
| <p class="description">Easily generate simple midi backing tracks with matched chord voicings, swing, and randomization. Note sequences are generated via Markov chain.</p> | |
| </header> | |
| <main> | |
| <section class="example-section"> | |
| <h3>Example Output</h3> | |
| <div class="midi-container"> | |
| <midi-visualizer type="piano-roll" id="mainVisualizer" src="demo.mid"></midi-visualizer> | |
| <midi-player | |
| src="demo.mid" | |
| sound-font="" | |
| visualizer="#mainVisualizer" | |
| id="mainPlayer" | |
| loop | |
| class="midi-player" | |
| ></midi-player> | |
| </div> | |
| <div class="html-midi-player-link"> | |
| <a href="https://github.com/cifkao/html-midi-player" target="_blank">html-midi-player</a> | |
| </div> | |
| </section> | |
| <section class="command-line-section"> | |
| <h3>Command Line Tool</h3> | |
| <pre><code class="language-bash">midigen --key C --chords ii9 V7 I9 vi7 --loop 5 --tempo 90 --swing 0.05 -o ii-V-i-vi.mid</code></pre> | |
| </section> | |
| <section class="python-section"> | |
| <h3>Python</h3> | |
| <pre><code class="language-python">from midigen.notes import Note | |
| from midigen.keys import Key, Mode | |
| from midigen.time import TimeSignature, Measure | |
| from midigen.sequencer import Song, Track, open_output | |
| # Open new MIDI port | |
| port = open_output() | |
| # Play C minor scale | |
| Key(Note.C, Mode.Minor).to_track().play(port) | |
| # Create a simple ii V I vi chord progression in the key of C | |
| key = Key(Note.C, Mode.Major) | |
| time_signature = TimeSignature(4, 4) | |
| tempo = 90 | |
| progression = [2, 5, 1, 6] | |
| chords = Track.from_measures([ | |
| Measure.from_pattern( | |
| pattern=[ | |
| key.relative_key(degree).chord( | |
| # Default chords are base triads - try adding extensions | |
| extensions=[7], | |
| # Choose a voicing close to the root triad | |
| match_voicing=key.triad() | |
| ) | |
| ] * time_signature.numerator, | |
| time_signature=time_signature, | |
| velocity=90 | |
| ) | |
| for degree in progression | |
| ]) | |
| # Play to port | |
| chords.play(port, tempo=tempo) | |
| # Write the song to a MIDI file | |
| Song([chords]).to_midi('midigen.mid', tempo=tempo)</code></pre> | |
| </section> | |
| </main> | |
| </div> | |
| <script> | |
| // Add any additional JavaScript functionality here | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Example: Add event listeners for MIDI player controls | |
| const midiPlayer = document.getElementById('mainPlayer'); | |
| if (midiPlayer) { | |
| midiPlayer.addEventListener('play', function() { | |
| console.log('MIDI playback started'); | |
| }); | |
| midiPlayer.addEventListener('pause', function() { | |
| console.log('MIDI playback paused'); | |
| }); | |
| midiPlayer.addEventListener('end', function() { | |
| console.log('MIDI playback ended'); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |