10

I have a site for a musician that includes music in mp3 format, but these are played through a Flash file (xspfplayer). Of course, without Flash this is useless.

Is there a better future-proof, and reasonably backwards-compatible way to include mp3 audio snippets on a page without forcing users to use Flash, and also not forcing them to download the mp3 first, or to leave the page entirely?

Improve this question

3 Answers 3

Reset to default
8

Your best bet is to continue to use the Flash player and use the HTML5 audio tag, for any browsers that supports it. Eventually, all browsers will support HTML5 and you will be able to kill off the flash audio player.

There is a great document on the HTML5 audio tag and how to use it here, http://html5doctor.com/native-audio-in-the-browser/. It seems to be extremely easy to use.

It looks like Safari 4, and Chrome 3 both support the tag AND the mp3 format. Opera and FF 3.5 support WAV format.

Improve this answer
4
  • 2
    Also, Opera and FF support ogg vorbis, which is probably a better bet than MP3.
    – luiscubal
    Jul 26, 2010 at 21:27
  • @luiscubal - That is true. If forgot to mention that. Thanks!
    – Ben Hoffman
    Jul 26, 2010 at 21:32
  • 1
    If jQuery is your thing, you may want to have a look at jPlayer; it uses HTML5 but falls back to Flash when needed: happyworm.com/jquery/jplayer
    – deizel.
    Jul 27, 2010 at 1:06
  • I actually meant "better bet than WAV", but I guess it also could apply to MP3.
    – luiscubal
    Jul 27, 2010 at 21:32
6

Another solution is to use a JavaScript library called Sound Manager. By default, it embeds an invisible Flash object in the page and uses it to play audio files (including MP3s). The newest version includes the ability to use HTML5's audio tag when available.

You can then write your player in HTML/CSS/JS, and have Sound Manager figure out whether to use Flash or audio tag to play the audio file. This way your player will work in IE6 and also on the iPhone/iPad.

Improve this answer
1
  • SoundManager looks pretty good! And actually incorporates the already accepted answer of using <audio>. Great stuff and welcome to Pro Webmasters!
    – artlung
    Jul 27, 2010 at 23:30
1

I believe this solution matches your requirements more exactly:

Create an M3U playlist file which points to the MP3's URL, upload the M3U to your server, and then create a link to the M3U file on your page.

When the visitor clicks the link to the M3U file the (tiny) M3U file will be downloaded and he or she will have the option to open it in the media player of his or her choice (i.e. whatever's already installed on the machine - no need for Flash whatsoever).

Once opened, the MP3 will begin streaming.

Improve this answer
2
  • It's a standard filetype, but won't think force opening in an external player? My hope was to keep the user on my page and using existing browser resources as the player. This sounds like the same problem with just linking to an mp3, it sometimes (often?) takes the user out of the browser.
    – artlung
    Jul 27, 2010 at 16:32
  • It's true, the action will open the M3U file with the preferred application on the system once it has downloaded - I'm sorry if I misinterpreted your requirement RE: leaving the page. The accepted answer for your question remains the best bet (and, unless the site's user stats indicate otherwise, I would bet that it will be sufficient to the site's needs).
    – danlefree
    Aug 3, 2010 at 17:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.