HTML & CSS for beginners (part 23): Multimedia for the website (2)

You can integrate audio files in HTML5 just as easily as videos. HTML5 provides a separate element for this with audio.

<audio src="song.mp3"> Your browser does not support the audio element </audio>.

The name of the file to be played is assigned to the audio element via the src attribute. However, this does not yet play the file. Control elements are required for this.

If you want to show control elements, assign the controls attribute to the audio element.

<audio src="song.mp3" controls> Your browser does not support the audio element </audio>.

It should look like this in the browser:

If controls is missing, the element integrated via audio is not visible. It makes sense to omit the attribute if you want to insert your own control elements using JavaScript.

Unfortunately, the use of the audio element is also not possible without problems. Once again, this is the fault of the browsers, which support different formats. The following table provides you with the current status in this regard.

So what to do? The audio element also offers you the option of defining additional source elements. These elements are then assigned the various formats for the respective browsers. Here is an example:

<audio controls> <source src="song.mp3"> <source src="song.ogg"> </audio>

The src attributes are assigned the respective files, which are then available in the different formats.

In addition to controls, there are other attributes for the audio element. One of these is autoplay.

<audio controls autoplay> <source src="song.mp3"> <source src="song.ogg"> </audio>

If the attribute is set, playback of the audio file starts automatically as soon as it is loaded. This attribute is not normally set, as visitors should be left to decide for themselves when an audio file is played.

The loop attribute is also interesting. This attribute ensures that the file is played in a loop.

As with the integration of videos, there are also two attributes for audio files: type and media. You can also specify the corresponding MIME types and codecs here. The HTML5 specification lists the following typical specifications for the type attribute:

- type='audio/ogg; codecs=vorbis'

- type='audio/ogg; codecs=speex'

- type='audio/ogg; codecs=flac'

Please note that the two attributes may only be used for the source element and not for the audio element.

Integrating Flash & Co.

Flash films could be integrated in earlier HTML versions using a combination of embed and object. The resulting - by the way very unattractive - syntax then looked like this, for example:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>

This is the classic way via the object and embed element, which has existed in this form in HTML for a very long time.





However, "classic" does not mean that this variant was approved by the W3C in the past. This is because the object element was favored in HTML 4, which was also correctly interpreted by Internet Explorer. Netscape Navigator was different. It relied on the embed element. This different interpretation made the combination of object and embed element necessary.

HTML5 now officially provides the two elements object and embed for integrating active content.

embed is a container that is intended for displaying non-HTML content that is not covered by other elements such as img, video, audio, etc. Browser plug-ins are normally required to display the embedded content.

Using embed, Flash films, for example, can now be integrated in a standard-compliant manner. Here is an example of what this might look like:

<embed src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=en_DE" type="application/x-shockwave-flash" width="384" height="313" allowscriptaccess="always" allowfullscreen="true" />

Various attributes can be assigned to the embed element. The most important attribute is of course the src attribute. This is because it ultimately specifies the file to be embedded. The MIME type is specified via the type attribute.

In the case of Flash, this is application/x-shockwave-flash. However, if you want to include a LaTeX file, enter application/x-latex. The width and height of the embedded file are controlled via width and height.

Incidentally, there are other attributes that are not officially part of HTML5. However, they allow you to control the plug-in used. In the previous example, the two "Flash attributes" allowscriptaccess and allowfullscreen were used to specify that script access and full-screen mode are possible. There is also the quality attribute, which can be used to determine the quality of the Flash movie.

<embed src="flash.swf" width="600" height="300" type="application/x-shockwave-flash" quality="high" />

The object element

Similar to embed, the object element serves as a container for content. In contrast to embed, however, object recognizes three different content models. If the browser recognizes that it is a directly displayable graphic, it behaves as if it is an img element. If the referenced object is web content, it is displayed within an iFrame. (More on iFrames later in this series). For other content, object behaves like embed.

The following example shows the integration of a Flash movie via the object element.

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=en_DE&rel=0" width="400" height="300"> <param name="allowscriptaccess" value="always" /> <param name="allowfullscreen" value="true" /> <p> No Flash plug-in is available in your browser. </p> </object>

Finally, the question naturally arises as to whether you should use object or embed. At first glance, the two elements appear to be almost identical. And in fact, the object element can do everything that the embed element can do.





The object element should normally be used for embedding content - with the exception of images. This element makes it possible to specify alternative content that is displayed if the embedded element cannot be loaded.