Using the default HTML5

Asked Jan 22 '22 at 10:10

Active Jan 22 '22 at 10:10

Viewed 713 times

So I've messed with most of the webkit stuff and can't figure what causing it. 0px border 0px padding, on and on. Anyone else run into this and figure out how to get rid of the artifact?

I posted an example of the problem I am having here:

https://mercenaryheart.com/audio%20artifact.html

Thought for a second that it might be my monitor, but I have three and it's on all of them.

Any one else run into this? Any suggestions would be great. Thanks in advance.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>audio artifact</title>
    
</head>
    
    <style>
    
    body {background-color: #494949;}
        
        audio::-webkit-media-controls-panel{
    background-color: #494949;
}   

        audio {
    margin: 0px 512px 0px 0px;
            
}
        
    </style>

<body>
                
    <br><br><br><br><br><br><br><br>
    
        <div align="right"><audio controls><source src="
            
            decent girl snip.mp3" type="audio/mpeg"></audio></div>

</body>
</html>

asked Jan 22 '22 at 10:10

Michael Reyes

You need to change it's style https://stackoverflow.com/questions/3794682/custom-css-for-audio-tag – najmieh sadat safarabadi Jan 22 '22 at 10:25
@ Najmieh Sadat Safarabadi Yes, I looked at that page. All the options I see relate to the controls. It has to do with the border or the container somehow. Creating new controls wont make the semi-circle go away. Tried that, didn't work – Michael Reyes Jan 22 '22 at 12:07
Note that the `align` attribute has been obsolete for many years. – Rob Jan 22 '22 at 15:10
@ Rob removed the align, didn't help. – Michael Reyes Jan 23 '22 at 11:17

Using the default HTML5 player with a dark background leaves a semi-circle artifact, trying to figure out how to get rid of it

0 Answers0

Using the default HTML5