HTML5 Audio

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

Hi,

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" />
</audio>

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" />
</audio>

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.

Hi,

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:

http://en.wikipedia.org/wiki/HTML5_Audio

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?

Thanks

Greg

Greg Thomas







PHP Programmer - interactivetools.com

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.

Thanks,

Gary.

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: http://www.thecmsbcookbook.com/trial.php

By Jason - September 6, 2013

Hi Gary,

What browser versions are you using.  The HTML5 Audio is only supported by IE 9 and later.

What the wysiwyg editor does is take the source file and put it into the <audio> tag.  If you have the ogg file as the first source tag, it won't work in IE as ogg is not supported.  As mp3 is widely supported, if you only use mp3 does it work across all your browsers then?

Give that a try and let me know if you run into any issues.

Thanks

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

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 support@interactivetools.com

Hope this helps.

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

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

http://www.concealcarrynow.com

The test page using the built in:

http://www.concealcarrynow.com/index.php?-39

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.

Thanks

---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/