Joe Workman HTML5 Audio autoplay problem

Classic Stacks
1

I have the following code in my html Body section for a one page site:
<audio autoplay="autoplay"> <source src="resources/click.mp3">

and this worked fine (just a little soft short sound on load!:slight_smile:
But then I purchased Joe Workman’s HTML5 Audio because I needed some normal audio players in the page.
The problem now is the autoplay audio has manifested its own player visible at the bottom of the page and for the life of me I’ve tried every version of hidden =“hidden” or controls= “” or none or etc and cannot get the player to be invisible for the autoplay sound.

Help appreciated

2

Anyone? Thanks…

3

Can you provide a link to the page?

4

Yes…its here
http://www.anypink.co.uk
Thanks

5

53
532346Ă—1344 165 KB

6

He typo-ed his own website! Try:

3 Likes
7

Think you meant: http://www.andypink.co.uk
Presumably its the rows of audio player controls that are appearing at the bottom of the page?

8

Try adding this CSS to the page inspector:

.audioplayer {
   display: none;
}
1 Like
9

ha I did mean

http://www.andypink.co.uk

So won’t that make all the players disappear? In which case my in page audio players will disappear?
…Actually I just tried it and that didn’t make any of the players disappear!
Thanks

Thanks

10

Thats odd.

You did not answer the question. If it’s the stack of audioplayers which are appearing at the bottom of the page then using Chrome inspector they can be hidden with the CSS I provided.

The JW html5 audio stacks appear to have a different class name so I would not expect them to be impacted by the CSS. In Chrome inspector they are still visible after the CSS I provided has been activated.

Try adding !important to the CSS like this:

.audioplayer {
    display: none !important;
}

If that fails a screenshot of where you are putting that CSS snippet might be useful.

1 Like
11

Thanks again klaatu.
To answer the question: yes it is the rows of audio players at the bottom of the page. These are the autoplay sounds that should be hidden and have been implemented with the code I quoted at the top placed in the Body of the page.
I have not looked at your CSS code with Chrome, will do so now…and I’ll add !important.
I am adding the CSS in RW7’s CSS inspector but I am checking it by looking at the actual page’s html.

12

Hi klaatu
Yes! Got it…
I had clashing CSS…I had put this code in before:

a:link { /* Applies to all unvisited links */ text-decoration: none; font-weight: bold; background-color: #ddd; color: blue; } a:visited { /* Applies to all visited links */ text-decoration: none; font-weight: bold; background-color: #ddd; color: #f0f; } a:hover { /* Applies to links under the pointer */ text-decoration: none; font-weight: bold; background-color: #fff; color: black; } a:active { /* Applies to activated links */ text-decoration: underline; font-weight: bold; background-color: black; color: white; } h1, h2, h3, h4, h5, h6 { text-align: center; .audioplayer { display: none; }

If I remove this to leave just your code, the autoplay audio player disappears but the normal JW players stay visible.
Then I tried putting your code before the above code and it still all works fine…so it was a matter of the order?

Your help is much appreciated. Thanks

13

Ok.
If I unpack the CSS you said you put in before (unclear where or how though), I get:

a:link { /* Applies to all unvisited links */ 
	text-decoration: none; 
	font-weight: bold; 
	background-color: #ddd; 
	color: blue; 
} 

a:visited { /* Applies to all visited links */ 
	text-decoration: none; 
	font-weight: bold; 
	background-color: #ddd; 
	color: #f0f; 
} 

a:hover { /* Applies to links under the pointer */ 
	text-decoration: none; 
	font-weight: bold; 
	background-color: #fff; 
	color: black; 
} 

a:active { /* Applies to activated links */ 
	text-decoration: underline; 
	font-weight: bold; 
	background-color: black; 
	color: white; 
} 

h1, h2, h3, h4, h5, h6 { 
	text-align: center; .audioplayer { display: none; }

Look at that last block for h1,h2,h3,h4,h5,h6 - thats proper messed up isn’t it? The class selector for audioplayer ( .audioplayer) is jacked into the styling directive block for the h(x) selectors and thats not going to come out well.

Should look like ( I think )

h1, h2, h3, h4, h5, h6 { 
	text-align: center; 
}

.audioplayer { 
    display: none; 
}

But the main thing is you got to where you needed to be, I think.

1 Like
14

Ah you are correct…it wasn’t the order of the CSS it was my typing.

TBH I’m not really capable of writing code because my head melts…as you can see it’s not what I do for a living, but I want to make my own website and constructing one is a bit like composition and I enjoy it a lot.

Anyhow…thanks.

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.