Adding additional play buttons

I got up to this.
https://jsfiddle.net/tf8r7cdx/21/

At the bottom of the code, do you see those red tags?

The source element doesn’t have a separate closing tag. Remove the closing tag.

<source ...><!-- remove the </source> -->
Edit:

The source element is not a self-closing tag, and doesn’t have any closing tag involved.

https://jsfiddle.net/tf8r7cdx/23/

And just so you know, as far as I understand it.

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'><source>
</audio>

Doesn’t have to be placed within the div, it can be placed anywhere on the page.

It can be anywhere on the page, but now you have two separate sources.

Get rid of that second one, and make the remaining source element a self-closing tag, as explained above.

Like this?



<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'><source/>
</audio>

I’ve just checked the spec because it’s the first time that I’ve delved in to this much detail about audio sources, and it’s a non-closing tag. It has no closing tag at all.

Get rid of that second bloody source tag! Let me spell it out for you.

<audio ...>
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
</audio>
1 Like

yep.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

The thing is, blogger adds automatically the other source.

After I remove it and hit save, it adds it back in.

Those are two separate sources, for which the browser will ignore the other one if it’s capable of playing the first one.

Blogger might believe that you need to close the source tag, which is explained in detail at How to add a music player in Blogspot

In which case, you can use the following syntax. Notice the closing /> tag at the end of the source element.

<audio ...>
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg' />
</audio>
1 Like

It didn’t do anything, still does it.

One problem at a time. Bad HTML tag structure impacts everything from CSS to JavaScript, and even the display of content on the page.

1 Like

How do I add inner borders?

How do I separate 1 block into 3?

You don’t want the red border area to be clickable, so you need to place another div element between the outer div and the inner div.

The outer one will have the black background.
The middle one can be centered and can have its own borders.
The inner one will be the button itself.

It’s not as easy with what you seem to want, but it can be done.

but then the border will be clickable.

No it won’t, because in the stack of three divs (background, border wrapper, button), only the button will be clickable.

Start with:

<div class="player">
  <div class="buttonBorder">
    <div class="button">
      ...
    </div>
  </div>
</div>

Then I’m doing it entirely wrong.

Time for me to work on a tutorial then,

Creating a button with non-activating borders

<div class="player">
  <div class="buttonBorder">
    <div class="button">
      ...
    </div>
  </div>
</div>

Starting from the above structure with your SVG images inside the button, clear out all of the styles on your existing button code. They will only get in your way and make progress harder.

The background

Set the player to have the black background, and give it the desired width.

.player {
  background: black;
  width: 260px;
}

The red border

Give the buttonBorder a red border.

.buttonBorder {
  border: 3px solid red;
}

Set its width:

.buttonBorder {
  ...
  width: 88px;
}

And center it:

.buttonBorder {
  ...
  margin: 0 auto;
}

Refine the spacing

The button is slightly too long.

While it’s possible to set the height, we can use developer tools to investigate and find out why the button is too long. The red bordered buttonBorder element is longer than the orange svg element.

This problem is caused by whitespace after the svg element. For further details, the gap is caused by the browser leaving extra descender space that text uses for lowercase j, g, and other characters that descend below the line.

It is possible to fix this by deleting all whitespace in the HTML after the closing tags, including newlines, but that makes it more difficult for us developers to read and understand the code.

Instead, a better solution when text isn’t shown, is to set the font size to zero. Inside of the border and the nested button we can have no whitespace shown on the screen, and the whitespace won’t badly affect what’s shown on the screen.

.buttonBorder {
  font-size: 0;
}

And it’s all done. You can change the size of the background area, and the button remains fixed in the center of it with neither the background nor the red border activating the button click event, as is intended for this example.

Making the button clickable

Speaking of clickable, one last thing to do is to set the mouse pointer when mousing on to the button.

.button {
  cursor: pointer;
}

You already have scripting code that handles mouse clicks on the button, and the mouse pointer now helps to inform people that they can interact with the button.

2 Likes

I’m working on this now.

Does this look good so far?