HTML5 Audio

12 posts by 4 authors in: Forums > CMS Builder
Last Post: September 16, 2013   (RSS)


I'm trying to use the HTML5 Audio option in the WYSIWYG editor.  The problem is the final result doesn't work.

The final source looks like this:

<audio width="300" height="32" src="/uploads/gunshow.mp3" preload="none" controls="controls">
  <source src="/uploads/gunshow.ogg" />

This works in Chrome, but not in IE or (sometimes) FF.

In IE it just has a blank area where the audio player should go.

On another site that didn't even have a new enough version to offer HTML5 Audio, I just put a textarea in the CMS and appended it to the content.  On that site, I have a format such as this:

<audio controls="controls">
  <source src="/media/GMS-0613-1-Radio_60.ogg" />
  <source src="/media/GMS-0613-1-Radio_60.mp3" />

And that works fine.  However, on the site I'm trying to do now, I can't put this at the bottom of the page but need to insert it into the middle of the page.  If I try to edit the HTML source that's created to do what I want, the editor is overriding it anyway and changing it back.

Any thoughts on how I can make this work?  It needs to be cross browser, obviously.


I think the issue is that you're using ogg vorbis file format, and Internet Explorer doesn't support this codec, you can learn more about which browser support which codecs here:

You could try including the audio file in several different formats, for example mp3 and wav as well, and this should resolve the issue. 

I'm not sure I fully understand what you mean by HTML editor is changing it back, do you mean that HTML is being removed when you save the page?



Greg Thomas

PHP Programmer -

What I'm saying is that I'm trying to use both formats, but the wysiwyg is not formatting the audio control correctly.

In the case of where I did the coding myself (outside of the wysiwyg) it works fine having both formats.  When using the built-in audio function in the editor, it's formatting the end result <audio tag incorrectly to work this way (at least for IE).

If I manually type the audio tag into the HTML editor in the format that I know to work, it's changing it to the way that the built-in audio control formats it which also doesn't work.



By gkornbluth - September 6, 2013 - edited: September 6, 2013

Hi Gary,

Do you mean that you've gone into the HTML of the WYSIWYG editor and checked the formatting against what you're ultimately looking for and it still renders wrong on your page?

What (correct) code do you enter into the editor.

And what (wrong) code appears on your viewer

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!

Take advantage of a free 3 month trial subscription, only for CMSB users, at:

By garyhoffmann - September 16, 2013 - edited: September 16, 2013

This is in reply to Jerry's message: Exactly as I have it in the first message - I don't want the source listed at all in the original audio tag but only included within the start tag and end tag - then it works, otherwise it does not.

This is in reply to Jason's message - I have tried just the MP3, but that doesn't work correctly in (I believe) FF.

I'm only using IE9, FF (current) and chrome (current) to test. 

I'll play with it some more to see what I come up with, but do know I tried it both with the OGG and the MP3 first and neither worked across the board unless I formatted it exactly as I mentioned in the second code block in my first post.

By Jason - September 16, 2013

Hi Gary,

Is there a URL you can provide that demonstrates the issue so I can take a closer look?  If you don't want to post it in the forum, you can email it to

Hope this helps.

Jason Sauchuk - Project Manager

Hire me! Save time by getting our experts to help with your project.

Sure - the link for the one that works (the one I had to hard code into it) is:

The test page using the built in:

If you view source on these two pages, you'll see the difference in the end resultant audio tag:

Page 39 has the code formatted the way the editor formats the code at approximately line 128 using the view source from FireFox, Chrome or IE

Page 4 (the home page) has the audio tag the way it needs to be formatted to work - this lists it around line 172

By Jason - September 16, 2013

Hi Gary,

I've taken a look at the test page.  The first thing I noticed that the "controls = 'controls' " attribute was missing.  You can set this in the wysiwyg editor from the Advanced tab when editing/inserting media.  Give this a try and let me know if you have any more success.  If not, can you set up a test page that only has that content in it without the header/footer, and the rest of the content.  This will help with debugging.


Jason Sauchuk - Project Manager

Hire me! Save time by getting our experts to help with your project.