Stack Overflow
Stack Overflow

Questions tagged [abcjs]

For questions about the open source javascript library, abcjs, that displays sheet music.

This should be used if you are including the abcjs library in your javascript.

The abcjs library allows a programmer to draw sheet music inside an SVG element. There are also facilities for playing a MIDI version of the music. It is useful if the music to be displayed is dynamic, so can't be created in advance. It is also useful to keep the entire process on the client side. See https://abcjs.net for more information.

9 questions
4
votes
1 answer

How to dynamically import non-React client side libraries in Next.js?

I have a simple project import Music from '../components/music'; export default function Home() { return ( ) } import dynamic from 'next/dynamic'; const abcjs = dynamic(import('abcjs'), { ssr: false }); export default…
glend
  • 1,592
  • 1
  • 17
  • 36
2
votes
3 answers

Javascript Regex: Second occurrence of block: ABC.js music notation

ABC is a music notation; I'm working on patterns to parse it as part of an app. Sometimes multiple renditions of a tune are in an ABC file, and I need to get just the first rendition -- or in an ideal world any rendition I specify. The beginning of…
rpc
  • 79
  • 7
1
vote
0 answers

react-abc: MIDI playback on iOS devices has several issues (missing notes, inconsistent tempo, unwanted sustain)

I'm using the react-abc package to enable MIDI playback on an app I'm working on. Only on iOS (tested on iOS13) devices are there several issues with the MIDI playback. The 3 issues I've noticed after several attempts are: Notes are sustained…
damon
  • 2,687
  • 8
  • 25
  • 35
1
vote
2 answers

How to display a simple abcjs sheet in an Angular application?

Using the abcjs library in an Angular 7 application, I have the following template:
with the controller: @Component({ selector: 'midi-sheet', templateUrl: './sheet.component.html', styleUrls:…
Stephane
  • 11,836
  • 25
  • 112
  • 175
0
votes
0 answers

Issues with abcjs

I was trying to use an example given to me in another question I asked a while ago, just changing some things here and there to learn and try to accomplish my goal. But it seems that something is not right with my ABC file. Are there different…
hjlemon02
  • 13
  • 2
0
votes
0 answers

Sync tonejs with abcjs

I'm trying to sync abcjs with ToneJS. abcjs plays a melody (via notation) and ToneJS plays a loop. I would like to sync these two audio sources. As I understand I need to create a shared AudioContext in which they both can play, but I'm not sure how…
olefrank
  • 6,452
  • 14
  • 65
  • 90
0
votes
1 answer

react-transition-group and react-abc (abcjs) Midi will not work at the same time (depends on Key of parent component)?

I have a small React project where the user can add notes to a Row, and then play MIDI audio of the notes that have been added (using react-abc / abcjs). The selected Notes should also animate in, using react-transition-group. My problem is that…
damon
  • 2,687
  • 8
  • 25
  • 35
0
votes
1 answer

REACT-NATIVE - abcjs - ReferenceError: Can't find variable: Element

import abcjs from 'abcjs'; export default class MusicScore extends Component { constructor(props) { super(props); this.state={ data: this.props.navigation.getParam('abctune'), } } render(){ …
Philip Butler
  • 479
  • 1
  • 5
  • 13
0
votes
2 answers

No moving cursor when playing the abcjs animation

Trying the have the cursor move on the sheet. The Angular 7 component is: public createSheet(name: string) { // tslint:disable-next-line: max-line-length const tunes = 'T: Cooley\'s\n' + 'M: 4/4\n' + 'L: 1/8\n' + 'R: reel\n' + …
Stephane
  • 11,836
  • 25
  • 112
  • 175