How to create your own built-in audio player // Not a clean flash

Question

We are currently developing a community based on custom audio content. The basic audio playback technology will be Soundmanager 2 is HTML5. We created our own player interface based on the jQuery SM2 parameters .

To make downloaded mp3 files embeddable, I'm currently looking for suitable technology. I suppose the player should play on mobile devices (which excludes clean flash players). Traffic leakage should be avoided.

What is the best approach for creating an embedded fragment of the player in terms of cross-browser (and cross-device) compatibility and security?

IMHO, these are the options:

• Paste with an <iframe> (e.g. Facebook)
• Paste with the <script> (which "enters" the player code in the DOM).
• Just offer an abbreviated snippet of HTML markup with all the perfect links (CSS, JS, images)

EDIT . To avoid misunderstanding: I'm talking about an embed code that can be offered to our visitors so that they can use our player on their remote websites. Yes, like Youtube or Soundcloud.

Answer 1

I have not used SM2, so I can not talk about it.

However, if jQuery is an option, I got lucky with jquery.mb.miniAudioPlayer , which is based on jPlayer .

Here is an example of a minimal amount of markup / code:

 <script type="text/javascript" src="inc/jquery/1.3.2.min.js"></script> <script type="text/javascript" src="inc/mbScrollable.js"></script> <script type="text/javascript"> $(function(){ $(".audio").mb_miniAudioPlayer({ width:240, inLine:false }); }); </script> <div id="myScroll"> <a id="m1" class="audio {ogg:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.ogg', mp3:'http://www.miaowmusic.com/ogg/Miaow-07-Bubble.mp3'}" href="javascript:void(0)">miaowmusic - Bubble (mp3/ogg) </a> </div> 

(as seen on this page - click “like.”)

Or, in other words, use the breakdown: yes, there is a <script> tag that "enters" the player code in the DOM.