Abcjs web audio player

Development Plugins
1

Hello forum,

I have been trying to figure out whether or not it is possible to use abcjs's Synthesized Audio functionality, so that I can add audio player controls to play rendered abcjs music with local sound files. The idea is to have audio control buttons (play/pause, stop, next, previous, etc.) and possibly a progress bar, which are all rendered via HTML in a Joplin plugin webpanel. I would then use a abcjs script like this to add audio functionality to the buttons and webpanel. I haven't had anything work yet, but maybe what I am trying to achieve is not possible. Would anyone know more about this?

Thanks in advance!

2

Is that an actual feature of abcjs?

3

Yes, I believe so. Here’s a very rudimentary implementation in a web-page where ABCJS is a factory function found in rosen’s abcjs-basic.js Nearly the entire editor and audio player is instantiated thus:

<script src="../../common-js/abcjs-basic.js" type="text/javascript"></script>
<script type="text/javascript">
    const {synth} = ABCJS;
    window.onload = function() {
      edit = new ABCJS.Editor("abc",
      { canvas_id: "paper",
        warnings_id: "warnings",
        abcjsParams: {responsive: 'resize'},
        synth: {
          el: "#audio",
          options: { displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true }
        },
      });
    }
</script>

It seems like that is straightforward enough to implement in Joplin’s abc plugin, but I’m not familiar enough with Joplin’s plugin architecture to make a credible stab at it. Sure would be nice to see though.

EDIT: I’m being naive I suppose. I had forgotten that before I could write that rudimentary implementation, I had to install several node modules and webpack requires them at the top of abcjs-basic.js I’ve no idea if Joplin can make use of that sort of architecture.