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

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

Expand Messages
  • Axel Berger
    ... I agree, but it does offer graceful fallback. You will have to offer the file as Ogg vorbis too, though.
    Message 1 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.