Simple audio player for web page

HTML & CSS
1

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?

Thanks!

2

Hi there UpstateLeafPeeper,

here is a very simple example…

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

coothead

2 Likes
3

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

2 Likes
4

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

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

5

@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?!

6

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…

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

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

coothead

7

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
8

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

9

Why not justify-content: end?

10

@coothead,

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?

11

Hi there UpstateLeafPeeper,

here is an example…

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

coothead

12

I suspect that uses Javascript, right?

13

Hi there UpstateLeafPeeper,

as I said in post #6…

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

coothead

14

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:

15

post_#6
post_#6794×298 14.9 KB

That what the script does. :winky:

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

coothead

16

@coothead,

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.

17

I give all the results of my little musings away. :biggrin:

playlist.zip (7.7 KB)

coothead

1 Like
18

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.

Flexbox Align Right
Flexbox Align Right845×216 2.19 KB

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Menu - Align Last Item to Right</title>
<style>
.menu {
  margin:0;
  padding:10px;
  list-style:none;
  display:flex;
  justify-content:center;
  background:#f9f9f9;
}
.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 {
  display:flex;
  justify-content:flex-end;
  margin-top:100px;
  border:1px solid;
}
.flexrow div {
  width:100px;
  background:red;
}
</style>
</head>

<body>
<nav>
  <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>
  </ul>
</nav>

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

</body>
</html>
1 Like
19

Oops!

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!

20

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?