Simple audio player for web page

HTML & CSS
28

@coothead and @Ray.H,

I could use some help both figuring out how to lay out the audio player control in my photo gallery, and then also how to style it with HTML/CSS!!

Here is some code to work with…

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

	<title>Audio Player + Photo Gallery</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }

    body{
      font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
      font-weight: normal;
      font-size: 1em;
      line-height: 1.4em;
      color: #000;                  /* default */
      background-color: #FFF;       /* default */
    }

    h1, h2, h3, h4{
      padding: 0.5em 0 0.5em 0;
      font-weight: bold;
      text-align: left;
    }

    h1{
      font-size: 1.6em;
      border-bottom: 2px solid;
      border-color: inherit;
    }

    h1 > a{
      color: inherit;
      text-decoration: none;
    }

    p{
      padding: 0 0 1em 0;
    }

    a{
      color: #00F;
    }

    .themeDark{
      color: #FFD700;
      background-color: #000;
    }

    #containerMast_fixed{
      position: fixed;
      top: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0 2em 1em 2em;
      background-color: inherit;
    }

    #containerBody{
      width: 100%;
      box-sizing: border-box;
      padding: 5.5em 2em 2em 2em;
    }

    .flexBox{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 auto;
    }

    h2.galleryTitle{
      padding: 0;
      font-size: 1.3rem;
      text-align: center;
    }

    ul.flexGallery{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: flex-start;
      list-style: none;
    }

    li.flexGalleryItem{
    /*  width: 200px;           /**/
      margin: 20px 40px 10px 0;
    }
    
    li.flexGalleryItem img{
      height: 180px;
    /*  width: 200px;           /**/
      border: 1px solid #999;
    /*  box-shadow: 5px 5px 15px 0 #AAA;      /**/
    }
    
    /* NOT SURE WHAT TO DO HERE... */
    .audioPlayer{
      display: inline-block;
      margin-left: auto;
    /*
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
    /**/
    }

    .keepListening{
      display: inline-block;
      margin: 0 0 1rem 0;
      padding: 0 0 1rem 0.5rem;
    }

  </style>
</head>

<body class="themeDark">
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1><a href="/">MySite</a></h1>
  </div>
  
  <!-- Body -->
  <div id="containerBody">
    <!-- Title -->
    <h2 class="galleryTitle">Gallery Title</h2>

    <!-- Audio Player -->
    <audio class='audioPlayer' autoplay controls loop  title='Song artist/title goes here...'>
      <source src='../galleries/test.mp3' type='audio/mpeg'>
    </audio>
    <a href='' alt=''>Keep listening...</a>
    
    <!-- Flex Container -->
    <div class="flexBox">
      
      <!-- Gallery -->
      <ul class="flexGallery">
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
        <li class='flexGalleryItem'>
          <img src="https://via.placeholder.com/180">
        </li>
        
      </ul><!-- End of .flexGallery -->

    </div><!-- End of .flexBox -->
    
  </div><!-- End of #containerBody -->

</body>

</html>

Here are some issues I am having...

1.) Originally I wanted the audio player right aligned to keep it out of the way, but now I’m not sure if it should be left or right aligned.

2.) I’m not sure how to make the “Keep listening…” text unobtrusive? It already feels like the audio player is on the border of being to large - I base this off the fact that I am on a 13" laptop and am trying to learn to “think mobile” in my decisions.

3.) Ideally this would work with mobile.

4.) Was struggling with the HTML/CSS. newbie stuff for you, but I have been away for a long time, plus I was never a guru with this stuff.