Editor Audio control: CSS required: load abcjs-audio.css

[Marina Ferreira]

I am trying to render audio controls on Editor instantiation, here's the code:

const abcjsEditor = new abcjs.Editor('abc', {
  canvas_id: "canvas",
  abcjsParams: {
    responsive: 'resize',
    format: {
      composerfont: 'Times New Roman 12 italic',
      stretchlast: true,
    },
    add_classes: true,
    selectTypes: ['bar', 'note', 'ending', 'part', 'slur'],
  },
  synth: { el: "#composer-audio" },
})

But it does not render the controls, it renders an empty box instead, along with a warning:
CSS required: load abcjs-audio.css

I am importing the css on the top of the file with:

import 'abcjs/abcjs-audio.css'

I also tried calling:

abcjsEditor.current.synth.synthControl.play()

and that works fine, audio is played, no errors.

I also tried adding a link to index.html, and although the file is loaded, the warning remains.

[Paul Rosen]

I'm guessing that the css file is either not getting loaded or it is scoped or something. Do you have this at a public URL? I'd be happy to look at it and see if I can figure it out.

[Marina Ferreira]

It's in this branch.
I just sent you an invite.

[Paul Rosen]

I don't do much React but I think it is a React thing. My first guess is that it has to do with scoping. The AbcjsWrapper component is where it is declared but the html is created from inside abcjs.

I see there is a global.ts file. Can you import it there and include it in the GlobalStyles object?

[Marina Ferreira]

Thanks a lot for taking a look at it. Yes, I do think it's about scope.
That AbcjsWrapper is actually an old code. When I was using that class the audio controls were actually rending fine, but that was a while ago. The code that is returning that warning is in this hook. That is consumed by this component.

I did try adding the content from abcjs-audio.css into global.ts, but had the same error. The rest of the styles in that file work well though.

[Paul Rosen]

I tried to start your project but got a few syntax errors. Example:

ERROR in [eslint]
src/components/Composer/hooks/useComposer.ts
  Line 221:71:  'mediaStream' is defined but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars

In any case, if there is a URL I'd rather look at it in the browser anyway.

[Marina Ferreira]

I've deployed a live preview here.
I also removed those warnings, if you wish to run it local, the page with the audio is here.

[Paul Rosen]

The css is being loaded correctly. That's why the message isn't appearing.

But the audio control isn't being created. I'm not sure why but that is something to do with setting up the editor, I guess. From the example, this code will work:

abcjsEditor = new ABCJS.Editor("abc", {
  canvas_id: "paper",
  warnings_id: "warnings",
  synth: {
  el: "#audio",
  options: { displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true }
  },
  abcjsParams: {
  add_classes: true,
  clickListener: clickListener
  },
  selectionChangeCallback: selectionChangeCallback
  });

The difference from your code is the synth parameter doesn't have options specified. I'm not sure if that is it or not.

[Marina Ferreira]

That was indeed the problem. I thought it was optional though (Synth Properties docs).
Thanks a lot for the help!