2. IE 9Google

4. .mp4.ogv.webm

6. Width Height Src Poster Loop Autoplay Mute Preload controls

10. The only way you can deliver music or any kind of audio recording right now over the web is using a plugin like QuickTime or RealPlayer. The trouble with plugins is that they are completely user dependent. Your end user has to download and install the right plugin. With HTML5’s tag you no longer have to worry about whether your end user has the right plugin or not. As long as you offer your files in the popular,.mp3,.wav or.ogg formats, you will be fine. Mobile devices such as android phones do not have Flash and can not play certain embeded audio or video. http://www.w3schools.com/tags/ref_av_dom.asp http://www.w3schools.com/tags/tag_video.asp

11. Without controls With controls

12. Audio Formats Audio attributes Autoplay Loop Preload Controls Src

13. https://addons.mozilla.org/en- us/firefox/addon/download-youtube/ File converter http://www.microvideoconverter.com Tools http://www.online-convert.com/

14. Audio File: http://ned.highline.edu/~mmhitch/202/video/audio/reboot.mp3 Video File: http://ned.highline.edu/~vikram/202/team_assignments/videos/talkingdog.mp4 Audio js: http://ned.highline.edu/~mmhitch/202/video/audio.js Audio css: http://ned.highline.edu/~mmhitch/202/video/audio.css

17. Play

19. Audio.css body { text-align: center; } header, section, footer, aside nav, article, hgroup { display: block; } /**** *Audio ****/ nav { margin: 5px 0; }

20. #skinny { width: 200px; /* of whole player */ height: 40px; margin: 10px auto; padding: 5px; background: #2c2c29; border: 4px groove #00f900; border-radius: 10px; }

21. #audioButtons { float: left; width: 70px; height: 10px; } #defaultAudioBar { position: relative; float: left; width: 90px; /* bar + button widths, dont make bigger than skin */ height: 4px; margin: 5px auto; padding: 4px; /*progress bar will show up inside here */ border: 2px solid gray; /*border around bar */ background: #c0c0c0; border-radius: 10px; }

22. #progressAudioBar { position: absolute; width: 0px; /* 0 by default */ height: 4px; background: #00ff00; /*color of the progress bar, size changes as audio plays */ border-radius: 10px; } Audio.js Change maxBarSize to match #defaultAudioBar width

23. http://thenewboston.org/watch.php?cat=43&number=27 http://thenewboston.org/watch.php?cat=43&number=28 http://thenewboston.org/watch.php?cat=43&number=29 http://thenewboston.org/watch.php?cat=43&number=30 Code: http://www.tnbforum.com/viewtopic.php?f=25&t=18238