Music composition with HTML 5-Canvas. Abstarct Online version music editor. Easy to use, just need some simple direction. Everyone can be a musician.

Slides:

Advertisements

Similar presentations

CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO 1.

Advertisements

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

HTML Group 5. Outline Distribute Research HTML’s humble beginnings… Tim Berners-Lee Robert Cailliau Worldwide Web Only Text March 1989 October 1990 March.

Updating and Maintaining Web Pages Contributed by Richard Truxall, The Library Network Community Information Toolkit Copyright ©

© Anselm SpoerriInfo + Web Tech Course Information Technologies Info + Web Tech Course Anselm Spoerri PhD (MIT) Rutgers University

Macromedia Dreamweaver 4 Advanced Level Course. Add Rollovers Rollovers or mouseovers are possibly the most popular effects used in designing Web pages.

Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.

Development of mobile applications using PhoneGap and HTML 5

Unit 2, Lesson 5 Website Development Tools AOIT Web Design Copyright © 2008–2012 National Academy Foundation. All rights reserved.

WHAT IS PHP PHP is an HTML-embedded scripting language primarily used for dynamic Web applications.

Web Design Basic Concepts.

Free Sound Recorder By FreeAudioVideoSoft. Pricing & Installation Software is absolutely FREE With agreement to terms and conditions Installation Requirements:

Director of Computer Center, DaYeh University Ku-Yaw Chang.

SIG WEB January 31, 3PM. What is HTML5? What it is: Allows for better intergration of media consumption. A new open standard Provides new APIs.

READY-TO-WEAR: QUICK AND EASY MICROSITES FOR DATA-DRIVEN REPORTS Brian Karfunkel Data Analyst NYU Furman Center NNIP Idea Showcase July 16,

© Cheltenham Computer Training 2001 Macromedia Dreamweaver 4 - Slide No 1 Macromedia Dreamweaver 4 Advanced Level Course.

Introduction to ArcGIS API for JavaScript

Chapter 19: Adding JavaScript

Canvas academy.zariba.com 1. Lecture Content 1.What is Canvas? 2.Including Canvas in your HTML 3.Commands in Canvas 4.Drawing Shapes with Canvas 5.Animations.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

Dreamweaver 8 Introduction What you can do with Dreamweaver 8 What's new in Dreamweaver 8.

1 Graphics CSCI 343, Fall 2015 Lecture 2 Introduction to HTML, JavaScript and WebGL.

Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.

PageDesigner Introduction Sybase, Inc.. Features WYSIWYG web page editor for HTML/CSS/JSP/JSF pages Full HTML4.0, CSS2 support Design, Source and preview.

The Simple Pages plug-in Christina Bell 23 February 2012.

 Computer use language to communicate  A web browser will read these tags and translate it into what you actually see  Viewing Code of ESPN WebsiteESPN.

Trunica Inc. 500 East Kennedy Blvd #300 Tampa, FL Cross Platform Mobile Apps With Cordova and Visual Studio 2015 © Copyright 2015.

HTML 5 The Future of Web Development. What is HTML5? “HTML5 is a specification of how the web’s core language, HTML, should be formatted and utilized.

Modern Programming Language. Web Container & Web Applications Web applications are server side applications The most essential requirement.

Purdue Pride Joe Gutierrez Tung Ho Janam Jahavier 3/3/2010Purdue Pride.

Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.

STORAGE LOCAL OR ONLINE. DATA STORAGE: DATA YOU STORE ONLINE FILES SUCH AS IMAGES, SPREADSHEETS, VIDEO OR MUSIC. ONLINE DATA STORAGE: WHEN FILES ARE STORES.

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

Introduction to the World Wide Web & Internet CIS 101.

The “Quick Change” Method of Web Design. Create Your Design Create and cut up the graphics for your web site. Create a masterstyle sheet. Name it “plainmasterstylesheet.html.

(1) HTML5, CSS, Twitter Bootstrap. (2) HTML5 Will be the new standard New features Drag and Drop and Support for local storage,,,, New input types Removed.

Browser Compatibility Testing, using different browsers Conditional Statements.

Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective

What is a Wiki? A wiki is an online database that can be edited by anyone with access to it. “ Wiki ” is Hawaiian meaning ‘ fast ’ or ‘ quick ’

® ® copyright © 2013 Open Geospatial Consortium What HTML5 and REST mean to the Geo community Raj Singh, PhD Open Geospatial Consortium

SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.

丁建文國立高雄應用科大資管系副教授兼任計網中心軟體發展組組長跨平台行動應用軟體開發技術 : HTML5 & Mobile JavaScript Framework 暨南大學.

CSCI 3100 Tutorial 2 Web Development Tools 1 HTML 5 & CSS 3 1.

Learn Nodejs by Building 10 projects. What is Nodejs  An Open source, Cross platform, Event Based and Non-blocking framework used to develop server side.

Part – 3 : HTML 5 SVG Tag. † SVG stands for Scalable Vector Graphics. † SVG is used to define vector-based graphics for the Web. † SVG defines the graphics.

4.3. Code animations by using JavaScript Access data access by using JavaScript. Creating Animations, Working with Graphics, and Accessing Data.

INTRODUCTION ABOUT DIV Most websites have put their content in multiple columns. Multiple columns are created by using or elements. The div element is.

Why is HTML5 a buzz word? Is HTML5 really a technology worth talking?

Web Basics: HTML/CSS/JavaScript What are they?

Web Technologies Computing Science Thompson Rivers University

Human Computer Interaction

© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.

Chapter 4: Scalable Vector Graphics (SVG)

Updating and Maintaining Web Pages

JavaScript is a language that is used on any website to add tags, improve the function of the website and allow users to interact. When the development.

Unit 2, Lesson 5 Website Development Tools

Unit 2, Lesson 5 Website Development Tools

PHP + Oracle = Data-Driven Websites

Course Review HTML5 Level II Course Review

Information Technologies Anselm Spoerri PhD (MIT)

Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%

Fast, free, fun Weebly web sites.

Types of Spatial Data Sites

Secure Web Programming

Globally interconnected 6lowPAN

ASP.NET MVC Web Development

Web Technologies Computing Science Thompson Rivers University

Unit 10 The Web Book Test.

Creating buttons in Fireworks

Information Technologies Anselm Spoerri PhD (MIT)

Presentation transcript:

Music composition with HTML 5-Canvas

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

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

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

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.

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.

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

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.

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

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