Adding Sound, Video, and Animation

Transcription

1 Adding Sound, Video, and Animation CHAPTER 15 A s you learned in previous chapters, you can bring your website to life with interactive and animated pages using Cascading Style Sheets (Chapter 3), JavaScript widgets, Dreamweaver effects and behaviors (Chapter 13), and images (Chapter 5). But as you ve probably seen by now, today s web pages go even further they blink, sing, and dance with sound, videos, and display interactive animations. That s the subject of this chapter. You ll start off learning how to use the new HTML5 tags to add audio and video to your web pages. Along the way, you ll learn about the file formats (also known as containers) that today s web browsers work with. For years, Adobe s Flash program dominated the web universe as the primary way to display complex multimedia presentations, such as slick animations, interactive games, and video tutorials. Flash isn t the only game in town these days, but it s still widely used, and you ll learn how to add Flash animations and video to your site. The heir apparent to Flash is Adobe s Edge Animate, and you ll learn how to add Animate creations to your web pages. Adding Sound to Your Page There are plenty of reasons to add sound to your web page. Perhaps you have a band to promote and you want to put some of your original songs online. Maybe you run a corporate website and want to include an audio message from the CEO. (He s not photogenic, so an audio works best.) Or, maybe you re the Cornell Lab of Ornithology ( and you post bird sounds, as shown in Figure

2 ADDING SOUND FiGURE 15-1 These days, you find audio used all over the Web. One great example is Cornell University s Macaulay Library of Natural Sounds ( where visitors can pause, rewind, and play audio and video clips of sounds like bird calls. In the past, webmasters had to turn to browser plug-ins like Adobe Flash to add sound clips. (See page 686 for more on Flash.) Thanks to HTML5 and its new <audio> tag, that s no longer the case. So, why isn t it as easy to add your song to a web page as it is to add a photo? It s the same old culprit making things difficult browser incompatibility. Modern browsers are designed to understand the audio tag and they can play audio files you don t need any add-ons or plug-ins. That s the good news. The bad news is that each of the big five browsers Internet Explorer, Chrome, Firefox, Safari, and Opera play some, but not all, audio formats. The bottom line is that you can t choose a single audio format (like MP3) and be sure that your audience will hear your song. If you want to reach a wide audience, you need to provide the audio clip in at least two formats. As you ll see, your good friend Dreamweaver helps you do that. As a result, each web browser gets to play the sound clip that it understands. There are two things you have to do to use audio on your website. First, you produce the audio files some basic tips follow in the next section. Second, you add code to include the audio files as part of your web page. Dreamweaver handles the second task; you handle the first. NOTE You can t put just any old song you got from itunes on your web page because there are copyright issues to consider. You don t want Metallica showing up on your doorstep demanding royalties. 670

3 Producing Audio Files in Browser-Friendly Formats Before you can add an audio clip to a web page, you need to record it and then convert it to the file formats you plan to offer. Your original recording may come from a handheld audio recorder, or it may have been recorded on the same computer you re using to build your website. In any case, the process involves capturing sound with a mic, converting that sound to bits and bytes, and storing it in a computer file. There are dozens of audio formats, just like there are different formats for storing photos. Original recordings are often saved in high quality formats (such as WAV or AIFF) that result in very big files. You almost always want to convert your recording to a smaller file, even at the expense of some audio fidelity. The smaller file will take up less room on your server, and more importantly, it will download faster when a guest visits your page. ADDING SOUND Web browsers can play three audio formats. The first two, MP3 and Ogg, are the most common for web pages: MP3. This is the most popular file format, and the one most people think of when it comes to music. Internet Explorer, Chrome, and Safari all support MP3 files, which can be relatively small and yet provide pretty good sound quality. They perform this feat by compressing the audio signal, losing some sound quality along the way. So why don t all browsers support the MP3 standard? It comes down to patents and money. Ogg. This audio file format was developed as an open source, patent-free alternative to MP3. It s pretty common on Linux computers less so with Windows PCs and Macs. Chrome, Firefox, and Opera support Ogg (sometimes called Ogg/Vorbis). WAV. Sometimes called Audio for Windows, Microsoft and IBM developed the WAV file format back when computers could barely beep. Unlike the other two formats, WAV files usually contain uncompressed audio. That means the sound quality is great, but the files are huge. You most likely won t use WAV files on your website because they take a long time to travel over the Internet. However, if you need to provide uncompressed audio for the best quality sound, Chrome, Firefox, Safari, and Opera support this format. (Yes, that s every browser except Microsoft s Internet Explorer. Wasn t that the company that developed the audio format in the first place?) If you re responsible for converting audio files to browser-friendly formats, you ll need to use a program like Adobe s Audition or the open source program Audacity. If you have a subscription to Adobe Creative Cloud, you probably have access to Audition. You can download Audacity from There are versions for Windows, Macs, and Linux computers, and best of all, it s free. These power-user audio programs do much more than convert files from one format to another. They can mix sound and take the audio from an entire orchestra and turn it all into a commercial-quality CD. You don t need all that power to convert files to web formats. In fact, the entire process is almost as easy as opening a word processing file and saving it in a different format. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 671

4 ADDING SOUND Here are the basic steps for converting an audio file: 1. In your audio program, choose File Open to open your original audio clip. (The command is the same for Audition and Audactiy.) Use the original recording or the best quality audio file you can get your hands on. That way, you ll get the best possible sound from the conversion. Initially, audio programs display the sound in waveform a visual representation of sound. You d work on this waveform if you were editing the sound file, but fortunately, you just want to convert it, so you can use the File menu. 2. If you re using Audition, choose File Export File. For Audacity, choose File Export (Figure 15-2). This command opens a window where you can name the audio file you re creating and choose the audio file format. FiGURE 15-2 Most audio programs, like Audacity (shown here), are complex and take a while to learn. But if you just want to convert an audio file from one format to another, that s easy to do. You do most of your work in Audacity s File menu, where you open the sound file and then export it in a new format. 3. Save the audio in an MP3 file. In Audition, set the format menu to MP3 Audio. In Audacity set Save as type to MP3 Files. Click OK (Audition) or Save (Audacity). Your audio program creates a file with the.mp3 extension. The format menus give you an idea of the variety of audio files. The important ones for web developers are MP3, Ogg, and WAV. In most cases, you want to offer your web visitors an MP3 and an Ogg audio file. Next, you create the Ogg file. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 672

5 TIP When you export a file in your audio program, it uses the original file name and adds an extension like.mp3 or.ogg. You need to keep those extensions, but you can change the rest of the name. However, as you ll see in the next section, you save yourself some work when your audio clips use the same name to the left of the extension. For example, you could create ceo_message.mp3 and ceo_message.ogg. ADDING SOUND 4. Save the audio in an Ogg file. In Audition, set the format menu to Xiph Ogg Container. In Audacity, set Save as type to Ogg Vorbis Files. Click OK or Save. Your audio program creates a file with the.ogg extension. In most cases, you won t create a WAV file for your web page because the files are usually too big. It might be appropriate if you need top-notch audio quality or if the sound clips themselves are just a couple of seconds long. In any case, if you decide to produce a WAV file, choose the format (as in Step 4) and then save the file. Adding Audio to Web Pages As explained in the previous section, when you put a sound file on your website, you should offer both an MP3 file and an Ogg file. Using those two file formats, you can reach just about everyone with a modern browser. Once you have an audio clip, you need to store it with your other website files and create links in your web pages to it. You use the Insert panel to add the <audio> tag to your web page, and you use the Properties panel to manage the technical details. For example, you use the Properties panel to identify the audio source files and to choose whether or not you provide playback controls. Here are the steps for adding an audio clip to a web page. Your first task is to add your audio files to your website: 1. In Dreamweaver, make sure you have the Files panel open (Window File), and then click the Files tab. 2. Drag your audio clips (MP3 and Ogg) from Windows Explorer or the Mac Finder to the Files panel. Dragging the audio files into the Files panel is the easiest way to add them to your website. If your root folder is cluttered, you can create a separate folder for your sound or other media files. 3. In the Files panel, double-click the web page that will provide the audio. Then click the spot on the page where you want to insert the audio file and its playback controls. The playback controls are the only visual indicator that there s an audio clip there. You might also want to identify the clip with a label or other visual element. Say the boss asks you to post a message on the company intranet. You could create a heading like A Message from Our CEO and then place the audio in a paragraph under it. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 673

6 ADDING SOUND 4. Open the Insert panel (Window Insert) and then, using the menu at the top, choose the Media category. The Insert panel s Media category provides options for audio, video, Flash, and Edge Animate files. Dreamweaver displays a rectangular placeholder with a speaker in the middle of it on your web page (Figure 15-3), indicating the presence of the <audio> tag in your page s HTML code. Now you need to identify the source of the audio. 5. Click HTML5 Audio. NOTE Don t just drag your audio clip from the Files menu onto a web page. That creates a link to the sound file, but it doesn t insert the <audio> tag that browsers need to actually play the clip. 6. Click the folder icon in the Properties panel (next to the Source box), and then browse to the MP3 file. The file has the.mp3 extension. This is one of two file formats you re providing for your visitors. If your files share the same name but different extensions (such as ceo_message.mp3 and ceo_message.ogg), Dreamweaver automatically fills in the Alt Source 1 box with the second audio file. If the two files have different names, you need to fill in the Alt Source box manually. (If the Properties panel doesn t show the same properties as those in Figure 15-3, you need to select the audio placeholder on your web page.) FiGURE 15-3 When you insert an <audio> tag in Design view, a speaker icon shows you where it will appear in your document. You use the Properties panel to name the source audio files, include playback controls, and display a fallback message for visitors whose browsers don t handle audio. 7. In the Title box, give your audio clip a short descriptive name. This message appears in a tooltip whenever a visitor hovers over the audio controls. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 674

7 8. In the Fallback Text box, type something like Sorry, your browser doesn t support this audio clip. ADDING SOUND If your visitor s browser doesn t support any of your audio clip formats, she ll see this message. 9. Set the Preload menu to Auto and then change it back to None. (Why the odd menu two-step? See the None option below.) As the name implies, the preload attribute determines whether your visitor s browser starts downloading the audio file while it downloads text, photos, and other parts of the web page. Audio files can be large, so you might not want automatic preloading. Here s what the different options do: None. Tells the browser not to preload the audio. This is the option to use if your audio file is particularly large (over a minute long) or when some of your visitors are unlikely to play the audio. You may reasonably ask why go through the rigmarole of changing the menu from none to something else and then back again. When you first insert an audio clip, Dreamweaver displays the word None in Preload menu, but it doesn t actually write the preload= none code in your web page. To have Dreamweaver do that, you need to change the preload option to something other than None first, and then change it back to None. Switch to Split view to double-check the code if you re in doubt. Auto. Tells web browsers to automatically download the audio file while the page loads. Use this option if the main purpose of the page is to play the audio file, and you re sure nearly everyone will want to listen. Depending on the size of the audio file, this choice may make the entire page load slowly. Metadata. This option tells browsers to download information about the audio, such as its track list and duration. This is a good option for audio clips several minutes long. 10. Make sure you have the Controls checkbox turned on. It s almost always best to give your audience audio controls. They let visitors start and stop playback and adjust the volume. Controls also provide information about the length of the audio clip. 11. Leave the Autoplay, Loop, and Muted checkboxes turned off. There may be cases where it s appropriate to turn these controls on, but too often they re just plain annoying. Here s what they do: Autoplay. The audio clip starts playing as soon as it loads. But what if your web visitor is in the library or a quiet office? Loop. As advertised, this makes your clip play over and over and over and over... Few things are more annoying than a short clip that loops. This is especially true if you haven t given your audience controls to stop it, as described in step 10. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 675

8 USING HTML5 VIDEO Muted. This turns off your audio clip s sound, which may be confusing to less savvy web visitors. Also, if you don t provide audio controls, guests have no way of turning the sound on. When you finish adding audio to your page, test it on different browsers and devices (Figure 15-4). You can test drive your audio in Live view, too you ll see and hear how it works for visitors using the Chrome browser. If you have other browsers on your computer, you can use File Preview in Browser to check your page. CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 676

9 CHAPteR 15: ADDING SOUND, VIDEO, AND ANIMATION 677