In this activity you'll learn how to add an audio element to a page.

• We'll continue working in 'media.php' and 'style.css' in Visual Studio Code. If you need the code so far, here it is. Don't worry if yours is different.

media.php

<?php
    include("header.php");
    include("menu.php");
?>
    <main>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit in commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestibulum non fermentum eros. Cras sodales, nisl eget congue interdum, massa nulla porta lectus, quis suscipit est ipsum sit amet ante.</p>
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspendisse potenti. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Maecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Integer feugiat sapien ac porttitor iaculis.</p>
        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur in ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p>
    </main>
<?php
    include("footer.php");
?>

style.css

ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
  top: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 16%;
  left: 0px;
}

main {
  background-color: lightgree;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  width: 300px;
}

img {
  float: left;
  max-height: 250px;
  border: solid 2px green;
  margin: 20px 20px 20px 0px;
  padding: 10px;
  border-radius: 30px;
}

video {
  max-height: 250px;
  float: right;
  clear: left;
  margin: 20px 0px 20px 20px;
  padding: 10px;
}

• Let's add an audio player at the bottom of the page before the closing </main> tag.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3"></audio>

• The code for audio elements is very similar to the code for video elements. Here we have an audio player set to play an audio file by Paul Walker available on Freesound.
• If you save and upload the file now, you won't see anything. There is no image associated with audio.
• To see the controls, we have to specify them.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls></audio>

• We can also add autoplay, which isn't allowed on some browsers unless also using muted but that doesn't make any sense.
• The other option we have is loop to replay the audio.

        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls loop></audio>

• In case you want to build a page showcasing audio (selling music or demonstrating your guitar skills) let's apply the same basic styling we've done for images and video.

audio {
  margin: 20px 20px 20px 0px;
  padding: 10px 10px 10px 0px;
}

• Personally, I don't think a border adds anything to the audio player so I've left it off. Similarly, the padding on the left ruins the alignment so I've set it to 0px. Feel free to modify this any way you like.
• In any case, on most pages you're more likely to leave your <audio> tag without any attributes so it won't be visible and you'll use Javascript to trigger the audio.

Next: Javascript Media