1 / 10

Music composition with HTML 5-Canvas

Create, edit, and share music with an easy-to-use online editor. Utilizing HTML5 Canvas, Fabric.js, and VexTab, this tool allows anyone to express their musical creativity. Dive into the world of music composition with a rich feature set that includes user log-in, sheet editing, and sheet sharing capabilities. Transform your musical ideas into reality and explore the vast possibilities that this innovative platform offers.

jamesandrews
Download Presentation

Music composition with HTML 5-Canvas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Music composition with HTML 5-Canvas

  2. Abstarct • Online version music editor. • Easy to use, just need some simple direction. • Everyone can be a musician. • Share your pride to others.

  3. What we used • HTML5 Canvas • Fabric.js • VexTab • Node.js + sqlite • Bootstrap

  4. Framework server Log-in system user Edit sheet Sheet →vextab

  5. HTML 5 • Including HTML, CSS and JavaScript. • More functional tag and API than HTML4, like web storage, video tag, file I/O and canvas etc.

  6. Canvas • Canvas allows us to create some graphics on the web page. • The API is disappointingly low-level. It can just allow programmer to draw some basic shapes. • Fabric.js is a powerful and easy-to-use JavaScript library.

  7. Fabric.js • Easy to use. Has many useful utility design. • Object can be selected, rotated, scaled etc. • Ex. Image object.

  8. VexTab • An open-source online music notation rendering API in JavaScript. • Give it information, and it can not only show the notation, but has API to play the music we wrote.

  9. VexTab • Tabstave notation=true tablature=false • notes Cn-D-E/4 F#/5

  10. Future work • Share with others • Record user’s data • Other notes • chord

More Related