0xfe / vexchords Goto Github PK
View Code? Open in Web Editor NEWJavaScript Chord Charts
Home Page: http://vexflow.com/vexchords/
License: MIT License
JavaScript Chord Charts
Home Page: http://vexflow.com/vexchords/
License: MIT License
Please add typescript support for this package, even adding the code mentioned on attachments section to my decs file an error will be returned informing Cannot use import statement outside a module
because inner vexchords modules are imported by module setup without a propper ts declaration.
decs.d.ts
file on root folder
declare module "vexchords"
Please provide a package named @types/vexchords
for typescript usage
Hi,
Thnak you for the reworked examples in the Readme, already a great help. One question: Is it possible to use 'name' with the 'draw' helper, similar to demo.html?
is there a way to generate chords that are scalable to fit their container instead of a fixed width / height in px?
You have unmatched opening peren in the first line of your first example:
chord.draw(({
// array of [string, fret]
chord: [
[1, 2],
[2, 1],
[3, 2],
[4, 0], // fret 0 = open string
[5, 'x'], // fret x = muted string
[6, 'x']
],
// optional: position marker
position: 5, // start render at fret 5
// optional: barres for barre chords
barres: [
{ fromString: 6, toString: 1, fret: 1 }
{ fromString: 5, toString: 3, fret: 3 }
],
// optional: tuning keys
tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
})
It would be super awesome if there was an option to toggle instrument to see the same chord in Ukulele or Piano.
Reference: https://tabs.ultimate-guitar.com/tab/ed-sheeran/perfect-chords-1956589
Great library, but I get continuous errors in the console log.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8203/sockjs-node/info?t=1677164371085. (Reason: CORS request did not succeed). Status code: (null).
Hi there,
Very cool lib, thank you very much!
I'm trying to use Vexchords in a rails app with webpacker.
After yarn add vexchords
I'm getting:
[Error] TypeError: null is not an object (evaluating 'makeInstance(parent).put')
addTo (application-f82f6df5a882e7713dc9.js:7384)
ChordBox (application-f82f6df5a882e7713dc9.js:34982:88)
draw (application-f82f6df5a882e7713dc9.js:35206)
./app/javascript/src/chord-diagrams.js (application-f82f6df5a882e7713dc9.js:156)
__webpack_require__ (application-f82f6df5a882e7713dc9.js:20)
./app/javascript/packs/application.js (application-f82f6df5a882e7713dc9.js:104:96)
__webpack_require__ (application-f82f6df5a882e7713dc9.js:20)
(anonymous function) (application-f82f6df5a882e7713dc9.js:84)
Global Code (application-f82f6df5a882e7713dc9.js:85)
The SVG lib seems to be required by Vexchords... Are there any dependancies that I'm not catching?
Thank you very much.
Hi Mo:
I was able to use your lib locally for my React app (built using Create React App).
However, when I build it for production, I'm seeing this error.
I did a lot of research and tried a bunch of things but couldn't figure out what's wrong.
I'm hoping you can give me some guidance.
Repro steps:
yarn build
yarn global add serve
serve -s build
In the README the very last example (the 4-string ukulele playing x232) shows note names inside the fret circle, is there a configuration option somewhere to enable this? Alternatively, is there a way to show the notes of the chord in place of the notes of the open strings?
From the example it would show E A D F# instead of E A D G below the chord box.
Example linked below
https://camo.githubusercontent.com/c69250fa7680de446c47a15f3127c24cdaeab82db7818f245f5187863acb48ac/68747470733a2f2f696d6775722e636f6d2f47713946706e552e706e67
Is there any other implementation example
Hello,
Thanks a lot for your work that I was able to set-up on a basic HTML test page.
But I encounter browser console errors about "WDS" (You will found the sames errors into the live demo at http://vexflow.com/vexchords/) :
[WDS] Disconnected!
GET http://localhost:8203/sockjs-node/info?t=1586419101157 net::ERR_CONNECTION_REFUSED
GET http://localhost:8203/sockjs-node/info?t=1586419107279 net::ERR_CONNECTION_REFUSED
GET http://localhost:8203/sockjs-node/info?t=1586419136864 net::ERR_CONNECTION_REFUSED
etc...
Can you advice me a proper way to disable this connections attempts ?
Cheers,
Seb
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.