6

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.

Jeff
  • 373
  • 1
  • 6
  • 16
Mateng
  • 3,742
  • 5
  • 37
  • 64

1 Answers1

4

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.

Dori
  • 915
  • 1
  • 12
  • 20
  • 2
    jQuery is always an option! (if not the answer) – Trufa Jun 26 '11 at 07:32
  • 1
    @Trufa - Yeah, I figure I can never go wrong recommending jQuery on SO… – Dori Jun 26 '11 at 07:39
  • 1
    No you can't :) BTW this is good stuff! – Trufa Jun 26 '11 at 07:43
  • Yes, jQuery is an option. In your example, the < script > tag has to be placed in the document header. If I wrap the whole bunch into one < div > for the document body, will it still work? Remember it has to work on remote websites (blogs etc.), not only on ours. – Mateng Jun 26 '11 at 11:47
  • @Mateng - I haven't tried that, so I can't say for sure—but I suspect it would work just fine. – Dori Jun 26 '11 at 23:15
  • @Dori, you are right. I used another player to test that, changed the paths to absolute (incl. domains) and it worked. As simple as that. – Mateng Jul 03 '11 at 07:09
  • @Mateng - Glad to hear it, and thanks for the update! – Dori Jul 03 '11 at 07:12