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

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

Expand Messages
  • Mike Breiding - Morgantown WV
    Thanks, Marcelo. This looks a bit bleeding edge considering the audience this is directed to. -Mike =================
    Message 1 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 2 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.