HTML: Audio Tag Shows Video On Internet Explorer

Question

I have this code to embed an audio file on Internet Explorer 11.

    <audio controls>
        <source src="Nature.mp3" type="audio/mpeg"/>
        <embed src="Nature.mp3" type="audio/mpeg">
    </audio>

The audio works fine, but Internet Explorer 11 includes a black box above the audio. I assume it to represent the video that was loaded from the audio file, but I didn't put a video in. All I want is the audio without the video box. How do I do that?

When I run this using IE 11 I see the black box but it is behind the audio controllers, I was unable to see the black box above the audio. This is the example in w3 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio is this what you see? — DHLopez, Sep 13 '17 at 17:17
It's hard to say, a few options that come to my mind are press F12 and verify the Console tab is not displaying any error, go to Network, click play and refresh the page (just to confirm that IE is not having issues to load the file) and finally verify is not some CSS or arrange problem that is making it look weird only on IE, the tag looks ok to me (other than having the closing forward slash for only one of the sources) — DHLopez, Sep 13 '17 at 17:35

Bradley William Elko · Answer 1 · 2017-09-15T15:55:36.447

0

This is the fix:

<meta http-equiv="X-UA-Compatible" content="IE=edge">.

I don't know why it works but it does. It, also, wasn't in the W3Schools example.

edited Sep 15 '17 at 15:55

answered Sep 14 '17 at 16:22

Bradley William Elko

364
2
24

Add the solution to this answer, so that people in the future might see it, nice catch! – DHLopez Sep 14 '17 at 16:45
1

@DHLopez I added the answer. The way I formatted it didn't register. – Bradley William Elko Sep 14 '17 at 17:38
The `` tag does not need or use a closing slash. – Rob Sep 14 '17 at 17:42

score 0 · Accepted Answer · answered Sep 15 '17 at 16:53

0

<meta http-equiv="X-UA-Compatible" content="IE=edge">.

Use this code in the head tag. Basically this meta tag tells the browser to render the most recent version of the media in Internet Explorer. This question is helpful.

answered Sep 15 '17 at 16:53

Aravind Suresh Thakidayil

1,173
2
17
30

HTML: Audio Tag Shows Video On Internet Explorer

2 Answers2