Simple audio player for web page

To whom is that question addressed? :shifty:

coothead

@coothead,

Since you spoke first, how about you? :wink:

Well, if that is the case, then you must know
by now what I am going to say to you. :rofl:

Please give more details and the code that
you are at present using.

This will enable me and or others to look at
your problem(s) in more detail.

coothead

1 Like

The title attribute is a global attribute, that means…

Global attributes are attributes common to all HTML elements; they can be used on all elements, though they may have no effect on some elements.

2 Likes

I applied your code but with a different source…

<audio controls>
 <source src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3" type="audio/mpeg">
</audio>

I am asking if there is a way to make it so if you hover over the player it would display a popup with text, e.g. the song title.

When I want that with a photo I use title=“some text here” in the < img > element.

Hi there UpstateLeafPeeper,

so are you referring to this…

https://codepen.io/coothead/pen/RwNgGBO

…or to this…

https://www.coothead.co.uk/playlist/index.html

coothead

Answer was given in post #24

You can use the title attribute on the audio tag

<audio controls title="You Can't Always Get What You Want">
 <source src="https://www.coothead.co.uk/audio/You-Cant-Always-Get-What-You-Want.mp3" type="audio/mpeg">
</audio>
1 Like

@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.

Ultimately it will be centered on mobiles and it doesn’t look bad centered on desktops.

It will need to drop below the player on mobiles and it balances out better that way on desktops.

You can loose all those classes on your gallery list items, no need to give them a class name that describes what they already are. They are list items in a parent ul named flexGallery. Just looking at the html tells you that right away.

I made several extra comments in your CSS as well as some changes.

<!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;
    }
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    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%;
      padding: 0 2em;
      background-color: inherit;
    }

    .containerBody{  /*changed to a class to minimize specifity*/
      /*width: 100%;  delete this, blocks are full width by default*/
      max-width: 1200px; /*keep all content at a readable length*/
      margin: auto;
      padding: 4em .5em .5em .5em;
    }

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

     .column {
      flex-direction:column;
     }

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

    ul.flexGallery{
      display: flex;
      /*flex-wrap: wrap;*/
      /*flex-direction: row; */
      flex-flow: row wrap; /*combined rules above to one rule*/
      justify-content: center;
      list-style: none;
    }
    /*li.flexGalleryItem*/
    .flexGallery li{
      margin: 20px;
    }
    /*li.flexGalleryItem img*/
    .flexGallery img{
      height: 180px;
      border: 1px solid #999;
    }
    /* NOT SURE WHAT TO DO HERE...*/
    .audioPlayer{
      display: block;
      margin:0 auto;
    }
    .keepListening{
      margin:0 auto;
    }

  </style>
</head>
<body class="themeDark">
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1><a href="/">MySite</a></h1>
  </div>

  <!-- Main -->
  <div class="containerBody">
    <!-- Title -->
    <h2 class="galleryTitle">Gallery Title</h2>

    <!-- Audio Player -->
    <div class="flexBox column">
      <audio class='audioPlayer' autoplay controls loop  title='Song artist/title goes here...'>
        <source src='../galleries/test.mp3' type='audio/mpeg'>
      </audio>
      <a class="keepListening" href='#' alt=''>Keep listening...</a>
    </div><!-- End of .flexBox -->

    <!-- Flex Container -->
    <div class="flexBox">

      <!-- Gallery -->
      <ul class="flexGallery">
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
        <li>
          <img src="https://via.placeholder.com/180">
        </li>
      </ul><!-- End of .flexGallery -->
    </div><!-- End of .flexBox -->
  </div><!-- End of #containerBody -->
</body>
</html>
1 Like

Hi there UpstateLeafPeeper,

I appears that you no longer want a selection of mp3’s for your visitors.
Is that because you are unable to install the javascript etc or just a
change of direction?

Would this example…

https://codepen.io/coothead/pen/gObRJJg

… be of any use to your project?

coothead

1 Like

@Ray.H,

I appreciate your constructive comments in my code. Thanks for showing me subtle things to make my code more efficient - I hope I can get to where you are some day!!

True, but I’m not entirely sure I like the centering on a laptop/desktop as it distracts from the Gallery Title.

I am playing around with the following changes, but can’t seem to get them to work…

.audioControls{
    width: 270px;
    background-color: #999;
}

.audioControls a{
    display: inline-block;
    margin: 0 auto;
}

!<-- Audio Player -->
<div class="flexBox column">
  <div class=audioControls">
     <audio class="" autoplay controls loop  title="Song artist/title goes here...">
        <source src="../galleries/test.mp3" type="audio/mpeg">
      </audio>
      <a class="keepListening" href='#' alt=''>Keep listening...</a>
   </div>

I am trying to create a shrink-wrap container around the < audio > element and my hyperlink, and I want the ability to left, center or right align the hyperlink in that parent container. I should also have the ability to vertically align the hyperlink in the parent container - would probably look best if it was vertically centered w.r.t. the player.

Then once I have that working, I can treat that .audioContainer as a single element in the flexBox you added and align that however I want!

Thanks for the tip!

Thanks!

1 Like

I like your idea, but am thinking it would be quicker to work with the traditional audio controls you first suggested. (When I have more time, I would like to do a deeper dive into your code and possibly learn some Javascript and about things that you take for granted like sprites!)

I also like the HTML player because the control is more traditional and intuitive and people will immediately understnad how to interact with it. To get you last example to have an acceptable UI required more time than I have right now.

(Your new “play” button looks much better as it matches my color scheme!)

Again, I like your Javascript example and want to come back to it, but if I don’t wrap up this photo website I will never get my business website done. (I have already spent like 150 hours on this photo site and for what?! No regrets as it got my head back into web development, but I need to wind things up by tomorrow.)

Hi there UpstateLeafPeeper,

there seems to be some misunderstanding about this…

   <a href="https://www.example.com" target="blank">Keep Lisening</a>

…which, as I suggested, in another thread of yours,
would keep the audio playing.

That was just my test code not the finished article
for your intended gallery page and was meant to be
used like this…

<!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 media="screen">
*{
      margin: 0;
      padding: 0;
    }
html {
      box-sizing: border-box;
    }
*, *:before, *:after {
      box-sizing: inherit;
    }

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%;
      padding: 0 2em;
      background-color: inherit;
    }

.containerBody{  /*changed to a class to minimize specifity*/
      /*width: 100%;  delete this, blocks are full width by default*/
      max-width: 1200px; /*keep all content at a readable length*/
      margin: auto;
      padding: 4em .5em .5em .5em;
    }

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


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

ul.flexGallery{
      display: flex;
      /*flex-wrap: wrap;*/
      /*flex-direction: row; */
      flex-flow: row wrap; /*combined rules above to one rule*/
      justify-content: center;
      list-style: none;
    }
    /*li.flexGalleryItem*/
.flexGallery li{
      margin: 20px;
    }
    /*li.flexGalleryItem img*/
.flexGallery img{
      height: 180px;
      border: 1px solid #999;
    }
    /* NOT SURE WHAT TO DO HERE...*/
.audioPlayer{
      display: block;
      width: 86%;
      max-width: 20em;
      margin-left: 1.5em;
     background-color: #999;
    }

  </style>
</head>
<body class="themeDark">
  <!-- Mast -->
  <div id="containerMast_fixed">
    <h1><a href="/">MySite</a></h1>
  </div>

  <!-- Main -->
  <div class="containerBody">
    <!-- Title -->
    <h2 class="galleryTitle">Gallery Title</h2>

    <!-- Audio Player -->

      <audio class="audioPlayer" autoplay controls loop  title="Song artist/title goes here...">
        <source src="https://www.coothead.co.uk/audio/bell.mp3" type="audio/mpeg">
      </audio>


    <!-- Flex Container -->
    <div class="flexBox">

      <!-- Gallery -->
      <ul class="flexGallery">
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
        <li>
          <a href="https://example.com" target="blank"><img src="https://via.placeholder.com/180" width="180" height="180" alt=""></a>
        </li>
      </ul><!-- End of .flexGallery -->
    </div><!-- End of .flexBox -->
  </div><!-- End of #containerBody -->
</body>
</html>

coothead

1 Like

Hi there UpstateLeafPeeper,

here is the “Modal Window” example that
I suggested somewhere else might be a
possible solution for continual mp3 playing…

https://codepen.io/coothead/full/povrbKY

coothead

1 Like

@coothead, I think you accidentally left out some code. I saved and loaded your code above, and all I see is an audio player like I already had.

And, yes, I understood your code to launch a separate window to keep the music playing, although I’m not sure that would be entirely foolproof, because…

1.) Then you would have music playing in two tabs simultaneously.
2.) The new tab assumes that auto-play would work, well, automatically which it might not depending on the user’s browser preferences.

Not sure what you meant to show me above…

@coothead,

Just checked out your latest sample, and I really like that, but…

1.) Can I do that using HTML and CSS or does that require Javascript?

2.) How well supported is your modal solution? Does it work across OSs, browsers, and also is it mobile friendly?

3.) Will it work for video?

4.) How do I offer the ability to download a photo or video?

Here is what I currently have…

  • User lands on my website
  • User logs in on the home page
  • User is taken to a page showing different galleries
  • User clicks on a thumbnail
  • System loads the chosen gallery
  • System displays a grid of thumbnails which can be either a photo or a video
  • User clicks on a given thumbnail and a “details” page loads with either 1.) an enlarged version of the photo, or 2.) an enlarged frame which is a video
  • If the item is a photo, then the user can click on the enlarged photo and a pop-up appears allowing them to download an even large photo in a “raw” format.
  • If the item is a video, then clicking on it starts the video. And if they right click on the video then they can download the raw video.

While my website is only 4 pages, I have designed everything around a model of there being a thumbnail and a medium-sized photo (or video) and then the ability to get the original “raw” photo/video.

I love your modal idea and how it allows music to keep playing in the background, but is that going to make me have to trash everything else I did?

I’m open to new and better ways to do things, but I absolutely have to have this website finished this weekend because I go back to work next week and then I am out of time to share holiday photos and videos with people.

I want to make this site look sharp, but I have already spent too much time on it, and starting next week I have to get back to trying to wrap up my e-commerce site!! :unhappy:

P.S. Do I give you the “fever”?! :biggrin:

Did You test it by click on the images?

coothead

1 Like

“I see!” said the blind man! :lol:

Wasn’t sure what you were trying to show me - I thought we were last talking about how I format a “Keep listening…” hyperlink beneath the audio player.

Also, I thought you were hinting at launching a new tab with the music being in the new tab.

Went back a 4rd time, and now I see that you are keeping the original window with music playing and then launching another tab with the photo in it.

(Sorry, I am on a tiny notebook right now and I had a lot of tabs already open, so I wasn’t seeing what was happening until now!))

I think I like your modal solution better, although as mentioned, I’m nt usre it will work with my needs to offer a download and play a video.

At any rate, this is a very educational thread!! :+1:

Instead of codepen.com try a live version here…

https://www.coothead.co.uk/modal-window-test/index.html

It includes a download link…

 <a class="download" href="/audio/Fever-Peggy-Lee-recorded-in-1958.mp3" 
   download="/audio/Fever-Peggy-Lee-recorded-in-1958.mp3">Download audio
 </a>

… in the modal window. :winky:

Also note, though, that a right click on the audio or
video player gives one the option to download it. :sunglasses:

  1. I would say that it is well supported, as it does not
    use any obscure CSS.
  2. It works OK on Windows7 and Linux Mint but I can
    not comment about Mac OS.
  3. It is coded to be mobile friendly

I trust that all this helps. :biggrin:

coothead

2 Likes

@coothead, your solution looks great but with one catch…

Why is it that when I click on the image in the modal window I don’t get a pop-up window asking me to download the file?

(I’m guessing it has to do with the modal window.)

I see you can right-click and do either a “Save link as…” or a “Save image as…” but the problem is that I want to allow people to download the original raw file which is NOT the image being displayed in your modal window.

Not sure how others would do this, but this is the approach I took…

  • I took holiday photos with my camera and they average 5-6MB in size.

  • When I first made my gallery using these, it choked the connection.

  • So I used Lightroom to reduce the 5-6MB originals to a thumbnail that is maybe 100KB and a medium-sized photo that is maybe 400-500KB.

  • When someone is on my current “photo-details.php” page, they see the medium version

  • And I added this code…

<span>Click photo to download RAW image...</span>
<a href="path/to/original/raw/file"  download="raw-filename">
    <img src="path/to/medium/photo" title="" alt="" />
</a>
  • So currently, when people click on the _medium photo in the photo-details.php page they get a system popup windows asking them to save the _raw photo.

Is there a way to do this using your modal approach??

In my current set up, when you click on the video in the photo-details.php page, it of course doesn’t download the video but plays the video instead. But if you right click on any videos you can “Save as” the original video.

P.S. Dumb question, but does a modal window have to be contained within the size of the viewport or can it extend downward beyond the viewport?

In my current set up, I set all _medium photos to a height of 800px and - at least on my laptop - they tend to extended beyond the bottom of my screen, but that is okay to me, since I want the photos to be large enough so people can see all of the details. I’m thinking that might be a down side of a modal window is that you are constrained to the viewport size which would be a real issue on a small screen like a notebook or smartphone.

Not trying to shoot down your idea, but just trying not to lose features I worked hard to get working! :slight_smile: