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

Embedding/playing mp3 in a web page

Expand Messages
  • Mike Breiding - Morgantown WV
    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.
    Message 1 of 4 , Sep 8, 2011
    • 0 Attachment
      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.

      Thanks,
      -Mike
    • 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 2 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 3 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 4 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.