tag:help-archives.hannonhill.com,2010-02-09:/discussions/general/11194-recommendations-for-html-5-audio-tag-not-working-in-firefoxCascade CMS: Discussion 2013-08-20T02:05:45Ztag:help-archives.hannonhill.com,2010-02-09:Comment/220758612012-12-05T13:10:57Z2012-12-05T13:10:57ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi,</p>
<p>Just a few questions to see if we can narrow things down a
bit:</p>
<ul>
<li>What file format is the audio file?</li>
<li>What version of Firefox are you experiencing this issue
in?</li>
</ul>
<p>Each browser supports different file formats, please see the
*Formats and Audio Support * table on <a href=
"http://www.w3schools.com/html/html5_audio.asp">this W3Schools
page</a> to see if your format is supported by Firefox. If not, you
would want to supply an additional audio source for Firefox to
fallback on.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612012-12-13T20:09:21Z2012-12-13T20:09:21ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi,</p>
<p>Just wanted to follow up to see if you had a chance to view my
<a href=
"http://help.hannonhill.com/discussions/general/11194-recommendations-for-html-5-audio-tag-not-working-in-firefox#comment_22117892">
recent comment</a>.</p>
<p>Please let us know if you have any questions.</p>
<p>Thanks.</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T14:32:34Z2013-01-17T14:32:34ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi,</p>
<p>I've looked into the w3schools page and have included both mp3
files and ogg files for cross browser compatibility, and updated my
xslt code to adjust to both mp3 and ogg files. But, it is still not
working correctly in firefox.</p>
<p>Here is the page XML data (I apologize for the format):</p>
<pre>
<code>
<xml><metadata><title>
Knights of the Round Table | Slackwater
</title</metadata>
<main-content>
<system-index-block current-time="1358431940927" name="calling-page" type="folder">
<calling-page>
<system-page current="true" id="30e453388a4e3191018c27bd5d1f8d25"><name>knights-of-the-round-table</name>
<title>Knights of the Round Table | Slackwater</title>
<display-name>Knights of the Round Table</display-name>
<path>/SMCM/_slackwater-new/journals/vol6instantcity/knights-of-the-round-table</path>
<system-data-structure definition-path="SMCM/Slackwater/Article-NEW">
<title>Knights of the Round Table</title>
<author>Alexandra Lynn Todak and Julia A. King</author>
<text></text>
<media>Yes</media>
<multimedia></multimedia>
<multimedia>
<type>Audio</type>
<file>
<path>/</path>
</file>
<largefile>
<path>/</path>
</largefile>
<audio>
<content/>
<path>/SMCM/_slackwater-new/journals/vol6instantcity/vol6audio/KnightsRoundTableJack-Daugherty-Stubbs-TV-MP3-File.mp3</path><name>KnightsRoundTableJack-Daugherty-Stubbs-TV-MP3-File.mp3</name></audio>
<ogg><content/>
<path>/SMCM/_slackwater-new/journals/vol6instantcity/OGG Audio/KnightsRoundTableJack-Daugherty-Stubbs-TV-MP3-File.ogg</path><name>KnightsRoundTableJack-Daugherty-Stubbs-TV-MP3-File.ogg</name></ogg><url/>
<caption>Jack Daugherty remembers property acquisition during the boomtown years in Lexington Park.</caption></multimedia>
<multimedia></multimedia><multimedia></multimedia><multimedia></multimedia></system-data-structure></system-page></calling-page></system-index-block></main-content></xml></code>
</pre>
<p>and here is the XSLT:</p>
<pre>
<code>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml"/>
<xsl:template match="/system-data-structure">
<div id="content-main">
<h2><xsl:value-of select="title"/></h2>
<p><strong><xsl:copy-of select="author"/></strong></p>
<xsl:copy-of select="text"/>
<!--<script>
var idcomments_acct = '86534ef2176f03bcb53cde602b33cd12';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script src="http://www.intensedebate.com/js/genericCommentWrapperV2.js" type="text/javascript"></script>-->
</div>
<xsl:if test="media = 'Yes'">
<div id="right-column">
<h3 class="widget-title">Multimedia</h3>
<xsl:for-each select="multimedia">
<xsl:if test="type = 'Photo'">
<ul class="photogallery">
<xsl:element name="li">
<!--Link to full-sized photo-->
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="largefile/path = ''">
<xsl:value-of select="largefile/path"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="file/path"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!--Rel of lightbox-groupX allows previous/next navigation-->
<xsl:attribute name="rel">
<xsl:text>lightbox-group</xsl:text>
<xsl:number count="photoset" level="single"/>
</xsl:attribute>
<!--Title used for photo caption-->
<xsl:attribute name="title">
<xsl:value-of select="caption"/>
</xsl:attribute>
<!--Thumbnail image-->
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="file/path"/>
</xsl:attribute>
<!--Img size-->
<xsl:attribute name="width">80%</xsl:attribute>
<!--Alt text-->
<xsl:attribute name="alt">
<xsl:value-of select="caption"/>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:element>
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</ul>
</xsl:if>
<xsl:if test="type = 'Audio'">
<audio controls="">
<xsl:attribute name="width">200</xsl:attribute>
<xsl:element name="source">
<xsl:if test="audio/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="audio/path"/></xsl:attribute>
<xsl:attribute name="type">audio/mpeg</xsl:attribute>
</xsl:if>
<xsl:if test="audio/ogg !='/'">
<xsl:attribute name="src"><xsl:value-of select="ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:if>
</xsl:element>
</audio>
<p><xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="audio/path"/>
</xsl:attribute>
Click to Play</xsl:element></p>
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if>
<xsl:if test="type = 'Video'">
<!--<xsl:element name="object">
<xsl:attribute name="data"><xsl:value-of select="url"/></xsl:attribute>
<xsl:attribute name="height">200</xsl:attribute>
<xsl:attribute name="type">application/x-shockwave-flash</xsl:attribute>
<xsl:attribute name="width">200</xsl:attribute>
<xsl:element name="param">
<xsl:attribute name="name">data</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="url"/></xsl:attribute>
</xsl:element>
<xsl:element name="param">
<xsl:attribute name="name">src</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="url"/></xsl:attribute>
</xsl:element>
</xsl:element>-->
<iframe allowfullscreen="true" frameborder="0" height="{200}" src="{url}" width="{200}"></iframe>
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</xsl:template>
</xsl:stylesheet></code>
</pre>
<p>Thanks!</p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T14:35:30Z2013-01-17T14:35:30ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>And here is the URL to the page:</p>
<p><a href=
"http://webdev.smcm.edu/_slackwater-new/journals/vol6instantcity/knights-of-the-round-table.html">
http://webdev.smcm.edu/_slackwater-new/journals/vol6instantcity/kni...</a></p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T14:44:12Z2013-01-17T14:44:12ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi,</p>
<p>It looks like you need to adjust your
<code><xsl:if></code> statement used to output the OGG file
to use the correct XPath that matches your XML structure.</p>
<p>Try the following:</p>
<pre>
<code><xsl:if test="audio/ogg/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="audio/ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:if></code>
</pre>
<p>Please let me know if you have any questions.</p>
<p>Thanks</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T15:24:50Z2013-01-17T15:24:50ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Sorry I think my poorly provided formatted XML tree structure
caused an issue. Take a look at the first screenshot. The OGG node
is not nested within the audio node, so your provided path did not
work. So I changed it back to</p>
<pre>
<code>
<audio controls="">
<xsl:attribute name="width">200</xsl:attribute>
<xsl:element name="source">
<xsl:if test="audio/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="audio/path"/></xsl:attribute>
<xsl:attribute name="type">audio/mpeg</xsl:attribute>
</xsl:if>
<xsl:if test="audio/ogg !='/'">
<xsl:attribute name="src"><xsl:value-of select="ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:if>
</xsl:element>
</audio></code>
</pre>
<p>I took a screenshot of source code in firefox, and it is reading
the .ogg file, but the audio player appears and then
disappears...and im still confused as to why.</p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T15:51:38Z2013-01-17T15:51:38ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Thank you for supplying the additional screenshots.</p>
<p>I found the following <a href=
"http://support.mozilla.org/en-US/questions/926665">Mozilla Support
Forum post</a> that may explain what is occurring. I confirmed that
the <strong>src</strong> attributes within your
<code><source></code> element do not resolve to an audio
file, but a 404 page. Can you confirm the path is correct and/or
the file has been published to the web server?</p>
<p>Also, it looks like that portion of the Format is still a bit
off. Notice that you are not checking the OGG element's path in
your <code><xsl:if></code> statement. Let's try the
following:</p>
<pre>
<code><xsl:if test="ogg/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:if></code>
</pre>
<p>Please let me know if you have any questions.</p>
<p>Thanks</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-01-17T16:18:52Z2013-01-17T16:18:52ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Ahhhhh! That was the issue. The file was not published to the
server. Thank you so much for your help!! I really appreciate
it.</p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-02-01T21:30:25Z2013-02-01T21:30:25ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi again,</p>
<p>I've run into yet another issue with this audio player. The
audio tag is only picking up the .ogg file in all browsers even
though the xml is reading both the .mp3 and the .ogg. (see
screenshot of xml tree)</p>
<p>Here is the test page link :<br>
<a href=
"http://www.smcm.edu/_slackwater-new/journals/vol6instantcity/knights-of-the-round-table.html">
http://www.smcm.edu/_slackwater-new/journals/vol6instantcity/knight...</a></p>
<p>It is reading the .ogg file in:<br>
- Firefox (which is what it is supposed to do) -Chrome (supports
both .ogg and .mp3 so I am not too worried there) -IE9 (this is an
issue, .ogg files are not supported, .mp3's are ok) -Safari (this
is an issue, .ogg files are not supported, .mp3's are ok)</p>
<p>maybe I have my xslt wrong?</p>
<pre>
<code>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<!--Import Hannon Hill's passthrough templates-->
<xsl:import href="/common/stylesheets/display/passthrough"/>
<!--Used to remove top border from first photoset-->
<xsl:variable name="first_photoset" select="//photoset[1]"/>
<xsl:output method="xml"/>
<xsl:template match="/system-data-structure">
<div id="content-main">
<h2><xsl:value-of select="title"/></h2>
<p><strong><xsl:copy-of select="author"/></strong></p>
<xsl:copy-of select="text"/>
<!--<script>
var idcomments_acct = '86534ef2176f03bcb53cde602b33cd12';
var idcomments_post_id;
var idcomments_post_url;
</script>
<span id="IDCommentsPostTitle" style="display:none"></span>
<script src="http://www.intensedebate.com/js/genericCommentWrapperV2.js" type="text/javascript"></script>-->
<xsl:apply-templates select="photoset[photos != '']"/>
</div>
<xsl:if test="media = 'Yes'">
<div id="right-column">
<h3 class="widget-title">Multimedia</h3>
<xsl:for-each select="multimedia">
<xsl:if test="type = 'Photo'">
<ul class="photogallery">
<xsl:element name="li">
<!--Link to full-sized photo-->
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="largefile/path = ''">
<xsl:value-of select="largefile/path"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="file/path"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<!--Rel of lightbox-groupX allows previous/next navigation-->
<xsl:attribute name="rel">
<xsl:text>lightbox-group</xsl:text>
<xsl:number count="photoset" level="single"/>
</xsl:attribute>
<!--Title used for photo caption-->
<xsl:attribute name="title">
<xsl:value-of select="caption"/>
</xsl:attribute>
<!--Thumbnail image-->
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="file/path"/>
</xsl:attribute>
<!--Img size-->
<xsl:attribute name="width">80%</xsl:attribute>
<!--Alt text-->
<xsl:attribute name="alt">
<xsl:value-of select="caption"/>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:element>
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</ul>
</xsl:if>
<xsl:if test="type = 'Audio'">
<audio controls="">
<xsl:attribute name="width">200</xsl:attribute>
<xsl:element name="source">
<xsl:if test="audio/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="audio/path"/></xsl:attribute>
<xsl:attribute name="type">audio/mp3</xsl:attribute>
</xsl:if>
<xsl:if test="ogg/path !='/'">
<xsl:attribute name="src"><xsl:value-of select="ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:if>
</xsl:element>
</audio>
<!--<p><xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="audio/path"/>
</xsl:attribute>
Click to Play</xsl:element></p>-->
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if>
<xsl:if test="type = 'Video'">
<!--<xsl:element name="object">
<xsl:attribute name="data"><xsl:value-of select="url"/></xsl:attribute>
<xsl:attribute name="height">200</xsl:attribute>
<xsl:attribute name="type">application/x-shockwave-flash</xsl:attribute>
<xsl:attribute name="width">200</xsl:attribute>
<xsl:element name="param">
<xsl:attribute name="name">data</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="url"/></xsl:attribute>
</xsl:element>
<xsl:element name="param">
<xsl:attribute name="name">src</xsl:attribute>
<xsl:attribute name="value"><xsl:value-of select="url"/></xsl:attribute>
</xsl:element>
</xsl:element>-->
<iframe allowfullscreen="true" frameborder="0" height="{200}" src="{url}" width="{200}"></iframe>
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if>
</xsl:for-each>
</div>
</xsl:if>
</xsl:template>
<xsl:template match="photoset">
<!--Print each photoset in a div-->
<xsl:element name="div">
<xsl:attribute name="class">photoset</xsl:attribute>
<xsl:if test=". = $first_photoset">
<xsl:attribute name="id">first</xsl:attribute>
</xsl:if>
<!--Individual gallery title-->
<xsl:if test="name != ''">
<h4><xsl:value-of select="name"/></h4>
</xsl:if>
<!--Description-->
<xsl:if test="description != ''">
<xsl:apply-templates select="description"/>
</xsl:if>
<!--Unordered list of photos-->
<!--Use only photos with both full image and thumbnail-->
<ul class="photogallery">
<xsl:apply-templates select="photos[photo/path != '/' and thumbnail/path != '/']"/>
</ul>
</xsl:element>
</xsl:template>
<xsl:template match="photos">
<xsl:element name="li">
<!--Link to full-sized photo-->
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="photo/path"/>
</xsl:attribute>
<!--Rel of lightbox-groupX allows previous/next navigation-->
<xsl:attribute name="rel">
<xsl:text>lightbox-group</xsl:text>
<xsl:number count="photoset" level="single"/>
</xsl:attribute>
<!--Title used for photo caption-->
<xsl:attribute name="title">
<xsl:value-of select="caption"/>
</xsl:attribute>
<!--Thumbnail image-->
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="thumbnail/path"/>
</xsl:attribute>
<!--Img size-->
<xsl:attribute name="style">
width: 80px; height: 80px;
</xsl:attribute>
<!--Alt text-->
<xsl:attribute name="alt">
<xsl:choose>
<xsl:when test="alttext != ''">
<xsl:value-of select="alttext"/>
</xsl:when>
<!--If no alt text, use name of gallery plus
'Thumbnail'-->
<xsl:otherwise>
<xsl:value-of select="../name"/>
<xsl:text> Thumbnail</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:element>
</xsl:template>
<xsl:template match="description">
<xsl:element name="div">
<xsl:attribute name="class">gallery_descrip</xsl:attribute>
<!--Wrap in paragraph tags if needed-->
<xsl:choose>
<xsl:when test="normalize-space(text()[1]) != ''">
<xsl:element name="p">
<xsl:value-of select="normalize-space(text()[1])"/>
</xsl:element>
<xsl:apply-templates select="child::*[position() &gt; 0]"/>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates/>
</xsl:otherwise>
</xsl:choose>
</xsl:element>
</xsl:template>
</xsl:stylesheet></code>
</pre>
<p>Or is there another browser detection method that will chose the
correct file? I've tried looking for some javascript browser
detection for html 5 but I could only find stuff for detecting
mobile devices.</p>
<p>Thanks so much for your help!</p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-02-04T14:04:27Z2013-02-04T14:04:27ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Hi,</p>
<p>I suspect the issue here is that your Format is only generating
one <code><source></code> element, which is causing the OGG
file type to override the MP3 file type (if one exists).</p>
<p>What you'll want to do is tweak your Format that to create a new
<code><source></code> element for each file type so your
browsers have different sources to fall back on. For additional
information, see <a href=
"http://www.w3schools.com/html/html5_audio.asp">http://www.w3schools.com/html/html5_audio.asp</a>.</p>
<pre>
<code><xsl:if test="type = 'Audio' and (audio/path !='/' or ogg/path !='/')">
<audio controls="">
<xsl:attribute name="width">200</xsl:attribute>
<xsl:if test="audio/path !='/'">
<xsl:element name="source">
<xsl:attribute name="src"><xsl:value-of select="audio/path"/></xsl:attribute>
<xsl:attribute name="type">audio/mp3</xsl:attribute>
</xsl:element>
</xsl:if>
<xsl:if test="ogg/path !='/'">
<xsl:element name="source">
<xsl:attribute name="src"><xsl:value-of select="ogg/path"/></xsl:attribute>
<xsl:attribute name="type">audio/ogg</xsl:attribute>
</xsl:element>
</xsl:if>
</audio>
<!--<p><xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="audio/path"/>
</xsl:attribute>
Click to Play</xsl:element></p>-->
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if></code>
</pre>
<p>Let me know if you have any questions.</p>
<p>Thanks</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-02-04T15:10:29Z2013-02-04T15:10:29ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Thank you! This worked! I had to change audio/path to mp3/path
in order for it to catch the mp3 file according to the xml tree.
But it now works in all browsers. Thanks so much again for all of
your help!</p></div>sjenochtag:help-archives.hannonhill.com,2010-02-09:Comment/220758612013-02-04T16:24:15Z2013-02-04T16:24:15ZRecommendations for HTML 5 Audio tag not working in Firefox <div><p>Glad to hear that did the trick. Something else you could do to
reduce the redundant <code><source></code> tags is to use a
<code><xsl:for-each></code> loop to generate the elements.
Something like the following:</p>
<pre>
<code><xsl:if test="type = 'Audio'">
<audio controls="">
<xsl:attribute name="width">200</xsl:attribute>
<xsl:for-each select="mp3[path !='/']|ogg[path !='/']">
<xsl:element name="source">
<xsl:attribute name="src"><xsl:value-of select="path"/></xsl:attribute>
<xsl:attribute name="type">audio/<xsl:value-of select="name()" /></xsl:attribute>
</xsl:element>
</xsl:for-each>
</audio>
<!--<p><xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="audio/path"/>
</xsl:attribute>
Click to Play</xsl:element></p>-->
<p class="wp-caption-text"><xsl:copy-of select="caption"/></p>
</xsl:if></code>
</pre>
<p>Note: this assumes the group identifier corresponds to a valid
<strong>source type</strong> attribute value. For example, the
<strong>mp3</strong> group identifier generates a
<code>type="audio/mp3"</code> attribute.</p></div>Ryan Griffith