Forums | MacLife

resedit · 2009-07-06 3:12 pm

I installed FireFox 3.5 and decided to play with the new <audio> tag:

Code:

<div class="pageMultimedia">
          <label>Mating Call</label>
          <br/>
          <audio controls="true" src="/media/ogg/bullfrog.ogg" style="margin-top: 10px;">
            <object type="audio/x-mpeg" data="/media/mp3/bullfrog.mp3">
              <param name="src" value="/media/mp3/bullfrog.mp3"/>
              <param name="autoplay" value="false"/>
              <param name="autoStart" value="0"/>
              <a href="/media/mp3/bullfrog.mp3">/media/mp3/bullfrog.mp3</a>
            </object>
          </audio>
</div>

While it worked beautifully in FireFox 3.5 and still used a media plugin (via object child w/ mp3) in earlier firefox and in opera, it of course did not validate xhtml 1.1 - and xhtml 5 is not official yet.

Messing with the DTD inline I finally got it to validate w/o needing to use an external DTD:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
<!ENTITY % Block.extra "|audio">
<!ELEMENT audio (source* , object?)>
<!ELEMENT source EMPTY>
<!ATTLIST audio autoplay (true) #IMPLIED>
<!ATTLIST audio autobuffer (true) #IMPLIED>
<!ATTLIST audio controls (true) #IMPLIED>
<!ATTLIST audio loop (true) #IMPLIED>
<!ATTLIST audio src CDATA #IMPLIED>
<!ATTLIST audio class CDATA #IMPLIED>
<!ATTLIST audio style CDATA #IMPLIED>
<!ATTLIST source src CDATA #REQUIRED>
<!ATTLIST source type CDATA #IMPLIED>
<!ATTLIST source media CDATA #IMPLIED>
<!ATTLIST source codecs CDATA #IMPLIED>
]>

I didn't really need to define all those attributes, but I did anyway in case I want to use them.
Now, that only works if you properly send the application/xhtml+xml mime type.

If you send a text/html mime type - your document will have an extra
]>

printed at the top of it.
But that's OK - while I could in theory write a custom external DTD for html, IE users are just going to the object - I don't know what versions of IE support the audio tag, I think latest IE 8 might, but I don't think it supports ogg with the built in audio tag.

I'm no DTD expert, it took me over 45 minutes to find the magic entity line that got rid of last sgml parsing error, but there it is - validating use of the cool new audio tag big_smile

The cool new video tag should be easy to add support for, I just don't have any theora files nor do I really have any interest in sending video files - and if I did, I'd just post 'em on youtube and embed that - flash works everywhere.

EDIT - fixed the DTD additions so now works with multiple source children

Last edited by resedit (2009-07-06 6:26 pm)

resedit · 2009-07-06 3:22 pm

And here's the php DOMDocument code that makes it - if you are curious

Code:

function audioTag($document,$usexml,$title,$ogg,$mp3) {
   $xmlDiv = $document->createElement('div');
   $xmlDiv->setAttribute('class','pageMultimedia');
   $xmlLabel = $document->createElement('label',$title);
   $xmlDiv->appendChild($xmlLabel);
   $xmlBr = $document->createElement('br');   
   $xmlDiv->appendChild($xmlBr);   
   $audio = $document->createElement('audio');
   $audio->setAttribute('controls','true');
   $audio->setAttribute('src',$ogg);
   $audio->setAttribute('style','margin-top: 10px;');
   $object = $document->createElement('object');
   $object->setAttribute('type','audio/x-mpeg');
   $object->setAttribute('data',$mp3);
   $param = $document->createElement('param');
   $param->setAttribute('name','src');
   $param->setAttribute('value',$mp3);
   $object->appendChild($param);
   $param = $document->createElement('param');
   $param->setAttribute('name','autoplay');
   $param->setAttribute('value','false');
   $object->appendChild($param);
   $param = $document->createElement('param');
   $param->setAttribute('name','autoStart');
   $param->setAttribute('value','0');
   $object->appendChild($param);
   $link = $document->createElement('a',$mp3);
   $link->setAttribute('href',$mp3);
   $object->appendChild($link);
   if ($usexml == 1) {
      $audio->appendChild($object);
      $xmlDiv->appendChild($audio);
      } else {
      $xmlDiv->appendChild($object);
      }
   return($xmlDiv);
   }

Last edited by resedit (2009-07-06 3:23 pm)

resedit · 2009-07-06 6:02 pm

My above addition to the DTD does not allow for multiple source children, and my CSP Output Filter class does not take into consideration audio/video tags that use source element children instead of a src attribute.

The source child is a nice feature because you can do

Code:

<audio>
  <source src="foo.ogg" type="audio/ogg" />
  <source src="foo.acc" type="audio/x-m4a" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>

and browsers that support the audio tag (I think only FireFox and Safari presently) will go through the list until they find what they can handle.

I might have the aac mime type there wrong.

Anyway, time to fix my output filter class and then look at the xml dtd docs to see how to allow 0 or more source children.

resedit · 2009-07-07 6:45 am

Here's a properly done html DTD that supports audio/video (page shows usage as well) -

http://www.clfsrpm.net/dtd/

I had to do it, the way I cache my web site, the content div get's cached but not the page - so either keep two *almost* identical caches for html vs xhtml, or make a html dtd. Latter is more efficient.

Forums | MacLife

#1 2009-07-06 3:12 pm

audio tag - I don't need no stinking (x)html 5 ...

Code:

Code:

#2 2009-07-06 3:22 pm

Re: audio tag - I don't need no stinking (x)html 5 ...

Code:

#3 2009-07-06 6:02 pm

Re: audio tag - I don't need no stinking (x)html 5 ...

Code:

#4 2009-07-07 6:45 am

Re: audio tag - I don't need no stinking (x)html 5 ...

Board footer