Skip navigation
cate1941
cate1941 Calculating status...
Currently Being Moderated

Embedding html5 audio

May 4, 2012 11:17 AM

Categories: How to - HTML/CSS/JavaScript Tags: #html5 #audio_embed #audio_not_rendering_in_firefox

I have embedded an audio into a blog post (still in draft) using the following code:

<audio controls="controls">

  <source src="Song1.ogg" type="audio/ogg" />

  <source src="Song1.mp3" type="audio/mp3" />

  Your browser does not support the audio tag.

</audio>

 

It works fine in chrome but not in firefox. In firefox there is just a blank space. Can anyone help me with this?

Thank you.

Catherine

766 Views   7 Replies   Latest reply: fortunegreen, Jul 22, 2012 5:03 PM
 
Replies
  • Liam Dilley
    3,991 posts
    Feb 28, 2012
    Currently Being Moderated
    1. Liam Dilley,
    May 4, 2012 2:28 PM   in reply to cate1941
    Report

    Hey Catherine,

    Video is the one that manages the multiple files, Audio you have one source which just use mp3.

    Remove the first ogg source. Does that now work?

     
    |
    Mark as:
  • cate1941
    Currently Being Moderated
    2. cate1941,
    May 4, 2012 5:32 PM   in reply to Liam Dilley
    Report

    Hi Liam,

    Thanks for your response.

    I removed the ogg file. It now renders but does not function. Any thoughts?

    Here us my new code:

    <audio controls="controls">

    <source src="Song1.mp3" type="audio/mpeg"></source>

    </audio>

     

    Message was edited by: cate1941

     
    |
    Mark as:
  • Liam Dilley
    3,991 posts
    Feb 28, 2012
    Currently Being Moderated
    3. Liam Dilley,
    May 4, 2012 5:44 PM   in reply to cate1941
    Report

    Where is the file, is it in the root? You should always start with a / for files and sources on a Business Catalyst Website.

     

    I guess you have already looked here? https://developer.mozilla.org/en/Using_HTML5_audio_and_video

     

    Could you provide a link to see and trial? If you not want to post it on the forums send me a PM.

     
    |
    Mark as:
  • cate1941
    Currently Being Moderated
    4. cate1941,
    May 4, 2012 5:59 PM   in reply to Liam Dilley
    Report

    When I changed the path to /Song1.mp3, it disappeared in Firefox

    Then I changed the path to:

    <audio controls="controls">

    <source src="/audio/Song1.mp3" type="audio/mpeg"></source>

    </audio>

    still not rendering.

     

    I can't show you it live, as it is still unposted (blog).

    If I give you my login, do you want to take a look?

    If so, please post your email address.

     

    Message was edited by: cate1941

     
    |
    Mark as:
  • Liam Dilley
    3,991 posts
    Feb 28, 2012
    Currently Being Moderated
    5. Liam Dilley,
    May 4, 2012 6:20 PM   in reply to cate1941
    Report

    Just send a private message to me on here

     
    |
    Mark as:
  • Jim&Stella
    Currently Being Moderated
    6. Jim&Stella,
    Jul 22, 2012 4:52 PM   in reply to Liam Dilley
    Report

    I just tested the <audio> tag in IE, Chrome, Safari & Firefox.  it works in all browsers except Firefox, so Firefox is your problem.  We currently have a discussion going in linkedin on this subject and the consensus is to use jPlayer.

     
    |
    Mark as:
  • fortunegreen
    Currently Being Moderated
    7. fortunegreen,
    Jul 22, 2012 5:03 PM   in reply to Jim&Stella
    Report

    Firefox only supports .ogg format. You need to use both .mp3 and .ogg.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points