Hi,
First off, I'm not a proficient coder, the reason I got RSD in the first place. But, a problem persists which I never experienced before. When inserting an HTML markup of a basic HTML5 mp3 player on any page, all the formatting subsequent to where the code is goes out of whack. Nothing happens above the code, but everything bellow the code looses the formatting. The solution is probably simple but I'm stumped.
Here's the code itself:
<body>
<div id="player">
<audio controls>
<source src="any-song.mp3" type="audio/mpeg">
Unsupported Browser!
</audio>
Thanks,
George
HTML markup causing problems - Post...
George Argyropoulos
Registered User
5 posts
Scott Swedorski
VP of Software Development
0 posts
You got a few problems there George. Well pretty much all of it has an issue... 
1. Your first line says <body>. It should be <audio>.
2. You have <div id="player"> but no closing </div>
3. <audio controls> is not valid. That belongs inside of the audio tag itself.
In the end, it should look more like this:
<audio controls="controls">
<div id="player">
<source src="any-song.mp3" type="audio/mpeg">
Unsupported Browser!
</div>
</audio>
You can learn more on the correct usage of the <audio> tag here at http://www.htmlgoodies.com/primers/html … io-Tag.htm
Remember that not all browsers work well with the Audio tag. You should use an HTML based audio player instead. You can find all sorts of free ones here:
https://www.google.com/search?q=html+au … p;ie=UTF-8
1. Your first line says <body>. It should be <audio>.
2. You have <div id="player"> but no closing </div>
3. <audio controls> is not valid. That belongs inside of the audio tag itself.
In the end, it should look more like this:
<audio controls="controls">
<div id="player">
<source src="any-song.mp3" type="audio/mpeg">
Unsupported Browser!
</div>
</audio>
You can learn more on the correct usage of the <audio> tag here at http://www.htmlgoodies.com/primers/html … io-Tag.htm
Remember that not all browsers work well with the Audio tag. You should use an HTML based audio player instead. You can find all sorts of free ones here:
https://www.google.com/search?q=html+au … p;ie=UTF-8
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
George Argyropoulos
Registered User
5 posts
Thank you.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
