1 / 10

Music composition with HTML 5-Canvas

Explore our user-friendly online music editor powered by HTML5 Canvas, where anyone can become a musician. Use innovative tools like Fabric.js for intuitive graphics and VexTab for seamless music notation rendering. Our platform integrates Node.js and SQLite for a robust backend, while Bootstrap ensures a responsive design. Whether you want to compose, share, or record your musical ideas, our editor provides everything you need to express your creativity. Join us and share your musical pride with the world!

candice-marsh
Télécharger la présentation

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