Class on 11.7.13 HTML5 Audio

Here are the files we worked on in class: htmlAudio_inClass.zip

Today we will start with a bit more on Audacity and look at Exporting files.

http://audacity.sourceforge.net/download/plugins

Adding the LAME MP3 library. To export MP3 files you will ned to

  1. Download the .zip file with the library. Visit this page. Look for the download link in step 1 under the title Alternative zip download for Lame 3.98.2
  2. Right-Click and save to Documents. You can ignore the other steps on that page and follow these.
  3. Unzip the file
  4. When you export in Audacity just before the end it will ask you where libmp3lame.dylib is located. Point it to the file you unzipped in the previous steps.

HTML5 Audio

Then we will move to adding an HTML5 Audio player to your page.

We will use these to demo adding audio to your page: htmlAudio.zip

Documentation on the audio and source elements, the two new ones we’ll need to play HTML5 Audio
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

Browser support for <audio> element
http://caniuse.com/audio

Article that covers why we’re in the state we are in with audio.
http://24ways.org/2010/the-state-of-html5-audio/

Main tutorial article
http://www.elated.com/articles/html5-audio/

 

Other Articles
http://www.html5rocks.com/en/tutorials/audio/quick/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Links for Free IconsIcons
http://somerandomdude.com/work/open-iconic/
http://www.smashingmagazine.com/2011/12/29/freebie-free-vector-web-icons-91-icons/
http://www.hongkiat.com/blog/free-icon-sets-to-bookmark/
example of link requirement: http://medialoot.com/item/listicons-arrows-bullets-webfont/
http://zurb.com/playground/foundation-icons

Leave a Reply