The cool thing about HTML5 is that it allows you to add audio and video to your site without needing much ado about anything. It’s really made easy with the new <audio> and <video>-elements.
<audio>-element
Suppose we have a soundfile called “Nora-Tol-mega-mix.mp3”. Change your HTML sample file to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>
<body>
<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>
<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>
<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />
<audio controls>
<source src=”Nora-Tol-mega-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
</div>
</body>
</html>
You can add mp3, ogg and wav files to your site this way and it will immediately be turned into a simple, but cool audio player. Because we added the attribute “controls” we have made controls visible, like a play/pause button and volume. Note: To test this, you have to refer to a file that actually exists
Using the <source>-element we have assigned the file that the player should load. It’s a bit much, but basically we are saying the source (src) of the <source>-element is an audio/mp3 file (type) called “Nora-Tol-mix.mp3”. Obviously, like you do with any linking or referring, if you would placed the file in a folder called “music”, the <source>-element should look like this:
<source src=”music/Nora-Tol-mix.mp3” type=”audio/mpeg”>
You can link to multiple sources, for instance:
<audio controls>
<source src=”Nora-Tol-mix.ogg” type=”audio/mpeg”>
<source src=”Nora-Tol-mix.mp3” type=”audio/mpeg”>
<source src=”Nora-Tol-mix.wav” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
Which ever file the browser recognizes first will be the one that’ll get played. Just a bit of advice: You want this to be the smallest file you have. Offering audio and video files on your site will increase the use of data traffic. Excessive use usually gets charged extra by your site’s host.
Back on topic: Any text you nest within you <audio>-tag will be seen as an alternative text. This will only show in browser who don’t support this tag.
<video>-element
Ok, now let’s add a video. Change the file to:
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8”>
<title>Whatever title of your file</title>
</head>
<body>
<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>
<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>
<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />
<audio controls>
<source src=”Nora-Tol-mega-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>
or watch her video
<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
With the <video>-element you can add mp4, ogg and WebM files. MP4 are supported by all the new browsers. The attribute “controls” makes default controls visible on the player, like a play/pause button and volume.
If you want to develop even more advanced HTML5 media players, look for all the cool options you have available using HTML5 DOM. Google it to find out more.
In HTML5 there are also ways to add YouTube videos. However they are not different from the embed-codes that YouTube already offers itself. I assume you already know how this works and have chosen not to add this to the course.