How to build my own embeddable audio player // not pure flash

We are currently developing a community based on user-generated audio content. The base technology for playing audio ~~will be Soundmanager 2~~ is HTML5. We created our own player interface based on ~~the SM2 options~~ jQuery.

In order to make the uploaded mp3 files embeddable I am currently looking for the right technology. The player must be playable on mobile devices (which excludes pure flash players, I assume). Traffic leaks should be avoidable.

What is the best approach to create an embeddable player snippet regarding cross-browser (and cross-device) compatibility and security?

IMHO, those are the options:

Embed with an <iframe> tag (like Facebook offers)
Embed with a <script> tag (that "injects" the player code into the DOM).
Just offer a shortened HTML markup snippet, with all links made absolute (CSS, JS, images)

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

Solution

I haven't used SM2, so I can't speak to that.

However, if jQuery is an option, I've had good luck with jquery.mb.miniAudioPlayer, which is based on jPlayer.

Here's an example of the minimal amount of markup/code required:

<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 'how to'.)

Or in other words, to use your breakdown: yes, there's a <script> tag that "injects" the player code into the DOM.