The modern web today is a mature platform that allows you to do a lot of cool things to build the experience you want thanks to newer HTML tags. This includes embedding cool things like audio, video and canvases onto your page.
To embed an audio file on your page, use the
audio tag. This tags has four main attributes, with the most important being the source of your audio file, the
The inside of the opening and closing tags can be used to display a message to the user in case the audio failed to embed.
<audio src="music.mp3">This browser does not support this tag.</audio>
controls attribute displays typical controls like play, pause and volume. The
autoplay attribute will cause the audio to play automatically. Because this doesn't require any user input, only use
autoplay in situations where it makes sense! If you would like the audio file to loop, add the
<audio src="music.mp3" controls autoplay loop>This browser does not support this tag.</audio>
If you would like to provide multiple file formats for the browser to select the best one, you can use the
source tag with a
type attribute, like so:
<audio controls autoplay loop> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.wav" type="audio/wav"> <p>This browser does not support this tag.</p> </audio>
Embedding video is actually pretty similar to audio. Use a
video tag and give it a
<video src="video.mp4">This browser does not support this tag.</video>
You have the same attributes available when using
In addition, you have the optional
height attributes to control the size, and the option to mute the video via the
mute attribute. If you want to display an image before the video is played, you can do so with the
<video width="640" height="480" poster="video_image.png" controls autoplay loop muted> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <p>This browser does not support this tag.</p> </video>
The canvas is an element that you can use to draw graphics, images, graphs, and many other things onto. A canvas, created using the
canvas tag, only represents the container for where the graphics will be drawn.
<canvas width="400" height="200"> </canvas>
Up next, miscellaneous tags! You know, the tags that exist but people rarely show love to them. We're going to shed some light on them so that you can make the informed decision to use them or not.