how to remove black background of audio player in html

Question

I embedded an audio on my web page with <embed> but there is a black background behind the player. Why does this happen and how should I remove it? Or is there any other better way to embed the audio?

[<embed src="../audio/introduction.mp3" autostart="true" loop="true" bgcolor="" >]

This is how the audio player looks like: https://i.stack.imgur.com/Ktr1P.png

A [mcve] (in the form of a Stack Snippet) would be most appreciated. — domsson, Dec 16 '17 at 06:42
@SinclairWong Share a snippet of the audio player working code, if possible, expected output image! — Naren Murali, Dec 16 '17 at 06:42

score 1 · Answer 1 · answered Dec 16 '17 at 07:38

1

If you are using HTML5 then <audio> tag is the best choice for you:

https://www.w3schools.com/tags/tag_audio.asp

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

answered Dec 16 '17 at 07:38

Shamy

25
5

It helps! Thanks a lot! I have been bothered by this for a long time. But do you know why the black background appeared? – SinclairWong Dec 16 '17 at 08:00
The HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in. Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon is generally not wise if you want your site to be operable on the average user's browser. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed – Shamy Dec 16 '17 at 08:29

score 1 · Answer 2 · answered Dec 16 '17 at 07:38

1

We can use HTML5 Audio tag for this purpose instead of embed

 <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

answered Dec 16 '17 at 07:38

V5NEXT

1,907
4
19
38

It helps! Thanks a lot! I have been bothered by this for a long time. But do you know why the black background appeared? – SinclairWong Dec 16 '17 at 08:00
https://stackoverflow.com/questions/12261216/html-embed-object-has-a-grey-background-can-it-be-transparent. Check this i think its similer to your problem – V5NEXT Dec 16 '17 at 08:09
I don't really understand the explanation. Does it mean the black background is just set in their code? – SinclairWong Dec 16 '17 at 08:40
Try giving an important to bgcolor – V5NEXT Dec 16 '17 at 08:58
The black background remains. – SinclairWong Dec 16 '17 at 20:10

score 1 · Answer 3 · answered Jun 22 '23 at 22:12

1

Mine was on dynamic coloured background, I did this:

audio::-webkit-media-controls-panel { 
    background-color: rgba(241, 241, 241, 0.16);
}
audio::-webkit-media-controls-enclosure {
    background-color: transparent;
}

answered Jun 22 '23 at 22:12

Jenna

11
2

how to remove black background of audio player in html

3 Answers3