essi Comments - marimo

essi

•Created by essi on 7/16/2024 in #help-support

Play MIDI files through `mo.audio()`

Wow, magic!!! Thanks++! Edit: the code with mo.state.

import marimo as mo
import anywidget
import traitlets

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode().tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    export default { render };
    """

abc_state = mo.state("T:C-major scale\nX:1\nM:4/4\nL:1/4\nK:C\nCDEF|GABC")
widget = mo.ui.anywidget(ABCjsWidget(abc=abc_state[0]._value))
widget

import marimo as mo
import anywidget
import traitlets

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode().tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    export default { render };
    """

abc_state = mo.state("T:C-major scale\nX:1\nM:4/4\nL:1/4\nK:C\nCDEF|GABC")
widget = mo.ui.anywidget(ABCjsWidget(abc=abc_state[0]._value))
widget

14 replies

Mmarimo

•Created by essi on 7/16/2024 in #help-support

Play MIDI files through `mo.audio()`

Maybe that's an issue displaying the svg outcome?

14 replies

Mmarimo

•Created by essi on 7/16/2024 in #help-support

Play MIDI files through `mo.audio()`

Thanks for the tip! But even without state mutation, nothing is displayed.

import marimo as mo
import anywidget
import traitlets

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode("""
    T:C-major scale
    X:1
    M:4/4
    L:1/4
    K:C
    CDEF|GABC
    """).tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    """

mo.ui.anywidget(ABCjsWidget())

import marimo as mo
import anywidget
import traitlets

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode("""
    T:C-major scale
    X:1
    M:4/4
    L:1/4
    K:C
    CDEF|GABC
    """).tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    """

mo.ui.anywidget(ABCjsWidget())

14 replies

Mmarimo

•Created by essi on 7/16/2024 in #help-support

Play MIDI files through `mo.audio()`

Hi @Myles Scolnick, I played a bit with ABCjs, anywidget and Marimo, but without success. It's working in Jupyter, though. Have I done anything wrong?

# cell 1
import anywidget
import traitlets
import marimo as mo

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode("X:1\nT:Scale\nM:4/4\nL:1/4\nK:C\nCDEF|GABC'|").tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    """

widget = mo.ui.anywidget(ABCjsWidget())
# widget = ABCjsWidget() # jupyter

# cell 2
widget.abc = """
X:1
T:Ode to Joy
M:4/4
L:1/4
K:C
EEFG|GFED|CCDE|E2D2|
"""

# cell 3
widget

# cell 1
import anywidget
import traitlets
import marimo as mo

class ABCjsWidget(anywidget.AnyWidget):
    abc = traitlets.Unicode("X:1\nT:Scale\nM:4/4\nL:1/4\nK:C\nCDEF|GABC'|").tag(sync=True)
    _esm = """
    import * as abcjs from "https://cdn.jsdelivr.net/npm/abcjs@6.2.2/+esm";
    export function render({ model, el }) {
        function updateABC() {
            el.innerHTML = '';
            abcjs.renderAbc(el, model.get('abc'));
        }
        model.on('change:abc', updateABC);
        updateABC();
    }
    """

widget = mo.ui.anywidget(ABCjsWidget())
# widget = ABCjsWidget() # jupyter

# cell 2
widget.abc = """
X:1
T:Ode to Joy
M:4/4
L:1/4
K:C
EEFG|GFED|CCDE|E2D2|
"""

# cell 3
widget

14 replies

Mmarimo

•Created by essi on 7/16/2024 in #help-support

Play MIDI files through `mo.audio()`

Hi, MIDI format indeed contains musical instructions rather than sound, requiring a synthesizer or soundfont for playback. In Jupyter, music21 (a Python library for music representation) can display scores with my_stream.show(), using an installed software like MuseScore, or play MIDI via my_stream.show('midi'). I developed Djalgo, a Python package for music composition using Jupyter and music21. As local installation is complex, I’m considering using Pyodide and Marimo on marimo.app. However, I need to solve display issues for both scores and MIDI. I’m considering developing a JavaScript MIDI player and integrating score rendering via e.g. ABCjs to overcome these challenges. However, I couldn't find a way to run JavaScript in Marimo cells, e.g.

 python
import marimo as mo

def create_abc_score(abc_notation):
    return mo.Html(f"""
    <div id="notation"></div>
    <script src="https://paulrosen.github.io/abcjs/dist/abcjs-basic-min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {{
            var abcNotation = `{abc_notation}`;
            abcjs.renderAbc("notation", abcNotation);
        }});
    </script>
    """)

_abc = """
X:1
T:Simple Scale
M:4/4
L:1/4
K:C
C D E F|G A B c|
"""

_score = create_abc_score(_abc)
_score

 python
import marimo as mo

def create_abc_score(abc_notation):
    return mo.Html(f"""
    <div id="notation"></div>
    <script src="https://paulrosen.github.io/abcjs/dist/abcjs-basic-min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {{
            var abcNotation = `{abc_notation}`;
            abcjs.renderAbc("notation", abcNotation);
        }});
    </script>
    """)

_abc = """
X:1
T:Simple Scale
M:4/4
L:1/4
K:C
C D E F|G A B c|
"""

_score = create_abc_score(_abc)
_score

14 replies