Simple audio player for web page

Hello. I am new to this forum, and do not know Javascript.

But I have something simple that I’m trying to do, and am hoping you all can help me out.

I am building a simple website to display photos from our holiday party, and as an extra, I thought it might be cool to have background music playing in the background.

I know how to edit music and create MP3 files, but I’m not sure how to make music play on a web page.

And I want to respect people and not just have the music start playing automatically.

As mentioned, I do not know Javascript, and to be honest, I was hoping there were just a few lines of code that I could copy & paste into my website to do what I want.

Specifically, I was hoping to have a simple player where a user could click a “Play” button to turn on the background music or a “Stop” button to turn it off. That way those thatw ant music can have it, but by default i won’t be pestering people.

How would I do this?


Hi there UpstateLeafPeeper,

here is a very simple example…



Fortunately JavaScript is not needed at all. You can just use the audio tag to let someone play the audio.


I can usually get what I want when @coothead is around!! :biggrin:

Cooking supper, but will check it out in greater detail shortly…

@coothead and @Paul_Wilkins,

What design do you think would make the most sense for what I’m trying to do?

So I have a couple of photo galleries by topic (e.g. X-Mas, Diwali, etc)

When someone goes to a given photo gallery, I thought it might be neat to have the ability to play music as they view photos. I guess I was thinking of having the player at the top of the page so it is easily seen and can be turned on.

If you were a visitor to my site, what would your preferences be? Or do you have any design ideas to make this add-on fun and useful and not annoying?!

Hi there UpstateLeafPeeper,

if you don’t want to see the HTML controls,
here is an example that uses javascript,
but allows for those who happen to have
it disabled…

The play/stop button is displayed over an
image in this example but that, of course,
is optional. :winky:


How would I right align the audio control?

I put it inside div#containerBody and above my photo gallery which is a div.flexBox

First I tried float: right but that messed up my flexbox Gallery.

Then I tried to make < audio > a flexbox and justify-content: end with no luck.

Mods: Can you move this to the HTML/CSS forum?

1 Like

To push a flex item to the right you would use margin-left: auto;

Why not justify-content: end?


Is there any way to link the above audio control up to a series of mp3 so that you can choose the song/soundtrack you want?

Hi there UpstateLeafPeeper,

here is an example…


I suspect that uses Javascript, right?

Hi there UpstateLeafPeeper,

as I said in post #6

The example in post #11 is just an amendment
of that script. :winky:


Which one was that? (Would be nice if SitePoint would add post #'s to their website!!)

Is there a way to offer my users several songs using one HTML audio player?

And if I used Javascript, how would I do that? I went to your earlier link but don’t see any code nor do I know how to implement Javascript.

Of course that is why I prefer HTML/CSS. :wink:

That what the script does. :winky:

A CSS solution would require a rethink of your requirements. :wonky:



So how would I use your Javascript script? Can I just paste it into my website - assuming you’d be willing to share?

As far as HTML/CSS go, I guess I am limited to one song per player?

While people are viewing the photo gallery, I thought it might be nice to offer 3-4 different songs that people could choose from. of course I could just edit them all together into one track.

I give all the results of my little musings away. :biggrin: (7.7 KB)


1 Like

Because there is no such value for the justify-content property.
There is however a flex-end value.

If you were only dealing with a single flex item and you wanted it to the right then flex-end would work in that case. Providing you are in the default mode of row, if you were in row-reverse then the left side would be the flex-end. :slightly_smiling_face:

If there are more flex items then they all would justify to the right (flex-end). In a situation where there are multiple flex items and you want one of them pushed to the right you need to target that item and push it right with margin-left:auto;

See Using auto margins for main axis alignment for more info.

We don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

Here is a test case using both methods I mentioned.

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Menu - Align Last Item to Right</title>
.menu {
.menu li {margin:0 10px;}
.menu li:first-child {margin-left:auto}
.menu li:last-child {margin-left:auto}

/*testing with single flex item*/
.flexrow {
  border:1px solid;
.flexrow div {

  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Shopping Cart</a></li>

<div class="flexrow">
  <div>single flex item</div>

1 Like


That probably explains why my code wasn’t working!

Thanks @Ray.H Code samples always help!

When I start learning HTML5 and CSS3 in 2020, I hope to study up more on Flexbox and using it more, although your margin-left: auto is something simple that I never considered!

Is there a way to make it so if you hover over the player you get pop-up info like the Title tag with images?