1. Sound and the Web

2. Transferring sound Download Progressive Download Stream

3. Download …entire file must be transferred before can listen

4. Progressive download Starts playing as soon as has enough frames/sound…temp file is actually stored If you could find it, you could replay it, modify it… If downloads faster than you can list/watch it, buffers the file… ITunes is progressive. No streaming server needed. This is what we will use

5. Streaming Plays when enough frames/music, no temp file is created…iheart, Spotify…uses a streaming server

6. Common Web Audio Formats wav, mp3, mp4 wav files are actually containers, can contain compressed or uncompressed (PCM) files. A Windows format mp3 is compressed…what can’t hear is discarded mp4 files are containers. Common format of the contained sound is h.264, a codec, a compressor, decompressor Note: Phones (iphone and Android) format is compressed,and can be lossless or lossy (.m4a)..actually mp4

7. PowerPoint Support

8. Pulse Code Modulation:Review Converting analog to digital sound: A method used to digitally represent sampled analog signals. It is the standard form of digital audio in computers, CDs, digital telephony and other digital audio applications.

9. Pulse-code modulation (PCM) is a method used to digitally represent sampled analog signals. It is the standard form of digital audio in computers, Compact Discs, digital telephony and other digital audio applications.

10. Example

11. Setup Create a JMA501/Practice/Sounds folder Download and unzip the sounds zip file. Also, Polamalu.wav Save them to your JMA501/Practice/Sounds folder Sound and html 4 was a disaster: plug-ins, many formats, each having own requirements. We start with HTML4’s mess

12. There are at least four ways to play audio html 4 html 5 Windows Media Player was for Internet Explorer, for Firefox

13. Embed example Here's HTML 4 code to have a sound play when a page loads: It assumes precious wav is in same folder as the html code (JMA501/Practice/sounds) <embed src="precious.wav" autostart="true" hidden="true" loop="false">

14. Copy and paste into Notepad Save as EmbedAuto.htm in Practice/sounds… be sure to choose All Files, and be sure to append the htm : Test in IE, Chrome and Firefox...right click on the file name, choose Open with

15. Interpretation The first line identifies the file. Change the precious.wav to the name and format of any sound file. The second line causes the sound to play automatically. Change true to false if you don't want it to start automatically. The third line hides the control panel. Change false to true to allow the control panel to be visible. The fourth line (loop) limits the sound to playing just once. Changing false to true will allow the sound to repeat endlessly. However, it becomes annoying very quickly. The last line simply closes the element

16. Embed with controls <embed src="matthews.wav“ controls=“console” autostart="false" loop="false" > Copy, paste and save as EmBedWithControls.htm Are many controls options besides console

17. Quote marks Be sure using regular quote marks

18. Embed Objects Windows Media Player <object id="WindowsMediaPlayer" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" Save as EmbedObject.htm

19. Html5 ex 1 Simple HTML 5 examples: Your browser does not support the audio element. Save as AudioHTML5.htm and test all browsers

20. Result

21. Html 5 and mp3 files Mp3 files Try polamalu.mp3. You have to change the type value to type="audio/mpeg” i.e.

22. Mp3 and html 5 Your browser does not support the audio element. Save as HTML5OK.htm

23. Wav files to mp3 Our precious file is a wav. We need to export the audio to the format supported by all the browsers (mp3). i.e. convert the wav to mp3 (mpeg). We will use Adobe Media Encoder application to do that conversion. First, let’s see what formats are supported in HTML 5 browsers

24. support Here are the main browser’s support for each of the three formats: (table below from w3schools).

25. Media Encoder Basic issue: We need to convert precious.wav to precious.mp3 to have it play in HTML 5 IE All Programs>Adobe Media Encoder cc 2014

26. Encoder

27. Presets Select System Presets>Audio only Traditionally we select mp3 128 bps (bits per second) as the output type: But with today’s fast computers, 256 bps would be better

28. Choose source Add precious.wav as the source... click the + sign and browse to it

29. Choose source…

30. Specify location Browse to specify the output file’s location:

31. Finish source Right-click on the source file:

32. Settings Choose Export Settings Should see:

33. Done Watch for a green checkmark, indicating the process is complete: Or look for Status: :Done

34. Another mp5 example Modify code to look for mp3 or wav…another HTML 5 example

35. Your browser does not support the audio element. Save as CheckWhatFormat.htm As noted: The controls attribute adds audio controls, like play, pause, and volume

36. Buttons Using HTML 5 buttons to Play/Pause audio: Buttons to Play Audio Save as PlayButtons.htm