CPT431 Fall 2015

Music and Audio Computing

Web Audio Lecture #1

Getting started

  • Text editor: choose your favorite one, e.g., Vim, Emacs, Sublime, TextMate, ...
  • Web browser: Chrome is recommended, but you can try Firefox, Safari or even IE (maybe version 11?)
  • Sample audio files (.wav, or .mp3) that you want to play

Running code

  • Method1: running your local html files direclty using the web browser. This is OK to some degree but does not work when the code is associated with communicating with the server (e.g. XMLHttpRequest() ).
  • Method2: copying your local html files to a http server using ftp and running them by typing the URL. This is the way you need to do at the end but it is tedious to copy your code whenever you update them. It is not recommneded in the development phase.
  • Method3: using an emulated http server. My recommendation is http-server. Install it according to the instruction (If you are not sure how to do, ask me or TAs). Once you successfully install it, you can emulate the http server from your local path by typing "http-server [path]" in command line and "0.0.0.0:8080" in the URL of the web browser.
  • Method4: using HTML+CSS+Javascript playgrounds such as JSbin, JSFiddle , Codepen and Lineweaver. You can directly type your code and run it right away on the browser.

Example1: Hello, sine (or synth)!

This is the first example discussed in the class.

Regarding the HTML file, you can check out the source code in your browser. For example, in Chrome, go to the view menu --> Developer --> Developer Tools.


Example2: Play audio sample files from your local folder

This is the second example discussed in the class.


Example3: Play audio sample files from the server