Loading ...
Sorry, an error occurred while loading the content.

Re: [NH] Embedding/playing mp3 in a web page

Expand Messages
  • Marcelo Bastos
    Interviewed by CNN on 08/09/2011 11:10, Mike Breiding - Morgantown WV ... Well, you *could* use HTML5 , in theory. But at present, it has some issues.
    Message 1 of 4 , Sep 8, 2011
    • 0 Attachment
      Interviewed by CNN on 08/09/2011 11:10, Mike Breiding - Morgantown WV
      told the world:
      > Greetings,
      >
      > Anyone know of a "better" way to do this?
      >
      > http://epicroadtrips.com/jnc/
      >
      > I have come across two methods, Flash used in the above and QuickTime.
      >

      Well, you *could* use HTML5 <audio>, in theory. But at present, it has
      some issues.

      The first and more obvious is that you lose support for older browsers,
      although there are some smart people who figured out Javascript tricks
      to get around it.

      The second problem is audio format. IE9, Safari and Chrome will support
      MP3, but Firefox and Opera won't. To make FF and Opera users happy, you
      have to offer the sound also in Ogg Vorbis format.

      The way to offer both formats without creating conflicts (like in
      Chrome, which supports both) is described in various places around the
      Web, for instance, here:

      http://html5doctor.com/native-audio-in-the-browser/

      --
      MCBastos

      This message has been protected with the 2ROT13 algorithm. Unauthorized
      use will be prosecuted under the DMCA.

      -=-=-
      ... Sent from my Apple Lisa.
      *Added by TagZilla 0.066.2 running on Seamonkey 2.3.3 *
      Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
    • Mike Breiding - Morgantown WV
      Thanks, Marcelo. This looks a bit bleeding edge considering the audience this is directed to. -Mike =================
      Message 2 of 4 , Sep 8, 2011
      • 0 Attachment
        Thanks, Marcelo.
        This looks a bit "bleeding edge" considering the audience this is
        directed to.
        -Mike
        =================

        On 9/8/2011 7:41 AM, Marcelo Bastos wrote:
        > Interviewed by CNN on 08/09/2011 11:10, Mike Breiding - Morgantown WV
        > told the world:
        >> Greetings,
        >>
        >> Anyone know of a "better" way to do this?
        >>
        >> http://epicroadtrips.com/jnc/
        >>
        >> I have come across two methods, Flash used in the above and QuickTime.
        >>
        >
        > Well, you *could* use HTML5<audio>, in theory. But at present, it has
        > some issues.
        >
        > The first and more obvious is that you lose support for older browsers,
        > although there are some smart people who figured out Javascript tricks
        > to get around it.
        >
        > The second problem is audio format. IE9, Safari and Chrome will support
        > MP3, but Firefox and Opera won't. To make FF and Opera users happy, you
        > have to offer the sound also in Ogg Vorbis format.
        >
        > The way to offer both formats without creating conflicts (like in
        > Chrome, which supports both) is described in various places around the
        > Web, for instance, here:
        >
        > http://html5doctor.com/native-audio-in-the-browser/
        >
      • Axel Berger
        ... I agree, but it does offer graceful fallback. You will have to offer the file as Ogg vorbis too, though.
        Message 3 of 4 , Sep 8, 2011
        • 0 Attachment
          Mike Breiding - Morgantown WV wrote:
          > This looks a bit "bleeding edge" considering the audience this is
          > directed to.

          I agree, but it does offer graceful fallback. You will have to offer the
          file as Ogg vorbis too, though.

          <audio controls="controls">
          <source src="Nature_Camp_Song.mp3" type="audio/mp3" />
          <!--
          <source src="Nature_Camp_Song.ogg" type="audio/ogg" />
          -->
          <embed type="application/x-shockwave-flash" wmode="transparent"
          src="3523697345-audio-player.swf?audioUrl=Nature_Camp_Song.mp3"
          height="27" width="320">
          </embed>
          </audio>
          <BR>
          <A HREF="Nature_Camp_Song.mp3">The Camp Song <IMG
          SRC="/pics/mp3.gif" CLASS="txt" BORDER="0" ALT="" TITLE="MP3
          Audiodatei">
          </A>
          </audio>

          This works, but it is not valid. The proprietary non-valid embed should
          be superceded since HTML 4, but the Microsoft based (!) valid Object tag
          won't work in IE 5.5

          A fully valid version is this

          <audio controls="controls">
          <source src="Nature_Camp_Song.mp3" type="audio/mp3" />
          <!--
          <source src="Nature_Camp_Song.ogg" type="audio/ogg" />
          -->
          <OBJECT TYPE="application/x-shockwave-flash" WIDTH="320" HEIGHT="27"
          DATA="3523697345-audio-player.swf?audioUrl=Nature_Camp_Song.mp3">
          <PARAM NAME="wmode" VALUE="transparent">
          <PARAM NAME="movie"
          VALUE="3523697345-audio-player.swf?audioUrl=Nature_Camp_Song.mp3">
          <A HREF="Nature_Camp_Song.mp3">The Camp Song <IMG
          SRC="/pics/mp3.gif" CLASS="txt" BORDER="0" ALT="" TITLE="MP3
          Audiodatei">
          </A>
          </OBJECT>
          </audio>

          This works in everything except IE 5.5. New browsers use Audio the
          others fall back to Object. Of course your doctype needs to be HTML5 for
          Audio to be valid. I believe this invalidates serveral attributes I
          still offer for those without CSS support.

          The fallback to <A> only works when there is no Flash, though. When
          Flash is disabled it is overlain by the no-flash box. So you ought to
          offer a link separately for those who won't allow Flash.

          Axel
        Your message has been successfully submitted and would be delivered to recipients shortly.