In this activity you'll use Javascript trigger media in response to user input.

* We'll continue using 'media.php' and 'style.css' in Visual Studio Code. If you need the code again, here it is.

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>
        <audio src="https://freesound.org/data/previews/611/611814_13567802-lq.mp3" controls loop></audio>
    </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;
}

#album {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

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

• You may want to add audio when a user makes an action such as a correct (or incorrect) response to a quiz. For this you'd use Javascript to control your audio file.
• Let's simplify this by adding a button and playing or pausing the audio whenever the button is clicked.

        <input type="button" value="Play / Pause Audio" onclick="playPauseAudio()">

• A button is a type of input.
• The value is the text that will be displayed on the button.
• Finally, we will trigger a Javascript function called 'playPauseAudio()' on any click of the button.
• The button is now sitting in the middle of nowhere (inline with the audio player) but I'd like it to be on its own line underneath so let's add some CSS.

input[type=button] {
  display: block;
}

• This is a new type of selector. It refers to any input meeting the conditions set inside the [] , in this case that the type of input is 'button'.
• We then set it to block so that it will take its own line.

• Of course, this button doesn't do anything until we add some Javascript, but we don't really want to use 'lists.js' for our 'media.php' file so we need to add a link to a new file in the header.
• We could just add the line as HTML, but imagine if we did this for every page on a huge site. Better to make it dynamic.
• Update the first block of PHP code like this.

<?php
    $page = "media";
    include("header.php");
    include("menu.php");
?>

• Variables in PHP are always represented by $and the variable name.
• In this case, we have a variable named 'page' and we assign it the value of 'media' which is the page name.
• Add a command to display the variable.

<?php
    $page = "media";
    echo $page;
    include("header.php");
    include("menu.php");
?>

• When you save, upload and run the code, you'll see the word 'media' at the top.
• The code in 'header.php' is part of the same page, so we can use our variable there too.
• Now open 'header.php' and replace the <script> line with the following.

    <script src="<?php echo $page; ?>.js"></script>

• Notice that the only change we've made is to the word 'lists'. We've replaced it with PHP code saying to 'echo' (reproduce in the code) the value of the variable 'page'.
• If you save and upload 'media.php' and 'header.php' then open media.php and inspect the file, you'll see that the script source is now 'media.js'.

• Now we need to create the function that will play the audio file.
• Create a new file called 'media.js'.
• Add the function.

function playPauseAudio() {
    
}

• Now let's identify the audio file and save it as a variable.

function playPauseAudio() {
    var audio = document.getElementsByTagName('audio')[0];
}

• Audio can be played using the '.play()' function.

function playPauseAudio() {
    var audio = document.getElementsByTagName('audio')[0];
    audio.play();
}

• Give that a try before we add the pause option.
• Now, we first want to check the state of the audio (playing or paused) before we decide which action to take.

    if (audio.paused) {}

• This code will check whether our audio is .paused and allow us to choose our action based on the result. If true, we want to .play otherwise we want to .pause.
• Can you complete this function without looking at the code below?

function playPauseAudio() {
    var audio = document.getElementsByTagName('audio')[0];
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
    }
}

• We'll save controlling the video by Javascript for a exercise.

Next: Flexbox