Home → General →

Recommendations for HTML 5 Audio tag not working in Firefox

• Edit

sjenoch

04 Dec, 2012 09:15 PM

Hi,

I've searched all throughout the web for a fix to this bug and have not had much luck. The HTML 5 audio tag does not work in Firefox. I was wondering if you have any suggestions/work around for this bug?

Thanks!

1. 1 Posted by Ryan Griffith on 05 Dec, 2012 01:10 PM

   

   Hi,

   Just a few questions to see if we can narrow things down a bit:

   • What file format is the audio file?
   • What version of Firefox are you experiencing this issue in?

   Each browser supports different file formats, please see the *Formats and Audio Support * table on this W3Schools page 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.

   Please let me know if you have any questions.

   Thanks

   • Edit

2. 2 Posted by Ryan Griffith on 13 Dec, 2012 08:09 PM

   

   Hi,

   Just wanted to follow up to see if you had a chance to view my recent comment.

   Please let us know if you have any questions.

   Thanks.

   • Edit

3. Ryan Griffith closed this discussion on 26 Dec, 2012 07:16 PM.

4. sjenoch re-opened this discussion on 17 Jan, 2013 02:20 PM

5. 3 Posted by sjenoch on 17 Jan, 2013 02:32 PM

   

   Hi,

   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.

   Here is the page XML data (I apologize for the format):

   
   <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>
   

   and here is the XSLT:

   
   <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>
   

   Thanks!

   • Edit

6. 4 Posted by sjenoch on 17 Jan, 2013 02:35 PM

   

   And here is the URL to the page:

   http://webdev.smcm.edu/_slackwater-new/journals/vol6instantcity/kni...

   • Edit

7. 5 Posted by Ryan Griffith on 17 Jan, 2013 02:44 PM

   

   Hi,

   It looks like you need to adjust your <xsl:if> statement used to output the OGG file to use the correct XPath that matches your XML structure.

   Try the following:

   <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>
   

   Please let me know if you have any questions.

   Thanks

   • Edit

8. 6 Posted by sjenoch on 17 Jan, 2013 03:24 PM

   

   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

   
   <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>
   

   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.

   • Screen_Shot_2013-01-17_at_10.17.25_AM.png 145 KB
   • Screen_Shot_2013-01-17_at_10.23.11_AM.png 207 KB
   • Edit

9. 7 Posted by Ryan Griffith on 17 Jan, 2013 03:51 PM

   

   Thank you for supplying the additional screenshots.

   I found the following Mozilla Support Forum post that may explain what is occurring. I confirmed that the src attributes within your <source> 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?

   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 <xsl:if> statement. Let's try the following:

   <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>
   

   Please let me know if you have any questions.

   Thanks

   • Edit

10. 8 Posted by sjenoch on 17 Jan, 2013 04:18 PM

    

    Ahhhhh! That was the issue. The file was not published to the server. Thank you so much for your help!! I really appreciate it.

    • Edit

11. sjenoch closed this discussion on 17 Jan, 2013 04:18 PM.

12. sjenoch re-opened this discussion on 01 Feb, 2013 09:30 PM

13. 9 Posted by sjenoch on 01 Feb, 2013 09:30 PM

    

    Hi again,

    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)

    Here is the test page link :
    http://www.smcm.edu/_slackwater-new/journals/vol6instantcity/knight...

    It is reading the .ogg file in:
    - 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)

    maybe I have my xslt wrong?

    
    <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>
    

    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.

    Thanks so much for your help!

    • Screen_Shot_2013-02-01_at_4.22.28_PM.png 129 KB
    • Edit

14. 10 Posted by Ryan Griffith on 04 Feb, 2013 02:04 PM

    

    Hi,

    I suspect the issue here is that your Format is only generating one <source> element, which is causing the OGG file type to override the MP3 file type (if one exists).

    What you'll want to do is tweak your Format that to create a new <source> element for each file type so your browsers have different sources to fall back on. For additional information, see http://www.w3schools.com/html/html5_audio.asp.

    <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>
    

    Let me know if you have any questions.

    Thanks

    • Edit

15. 11 Posted by sjenoch on 04 Feb, 2013 03:10 PM

    

    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!

    • Edit

16. sjenoch closed this discussion on 04 Feb, 2013 03:10 PM.

17. Ryan Griffith re-opened this discussion on 04 Feb, 2013 04:24 PM

18. 12 Posted by Ryan Griffith on 04 Feb, 2013 04:24 PM

    

    Glad to hear that did the trick. Something else you could do to reduce the redundant <source> tags is to use a <xsl:for-each> loop to generate the elements. Something like the following:

    <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>
    

    Note: this assumes the group identifier corresponds to a valid source type attribute value. For example, the mp3 group identifier generates a type="audio/mp3" attribute.

    • Edit

19. Ryan Griffith closed this discussion on 04 Feb, 2013 04:24 PM.