Cómo construir mi propio reproductor de audio incrustable // no flash puro

Question

Actualmente estamos desarrollando una comunidad basada en contenido de audio generado por el usuario. La tecnología base para reproducir audio será Soundmanager 2 es HTML5. Creamos nuestra propia interfaz de jugador basada en las opciones de SM2 jQuery.

Para hacer incrustable los archivos mp3 cargados actualmente estoy buscando la tecnología adecuada. El jugador debe poder reproducirse en dispositivos móviles (lo cual excluye a los reproductores flash puros, supongo). Las fugas de tráfico deben ser evitables.

¿Cuál es el mejor enfoque para crear un fragmento de jugador incrustable con respecto a la compatibilidad y seguridad entre navegadores (y entre dispositivos)?

en mi humilde opinión, esas son las opciones:

• Integrar con una etiqueta (como Facebook) ofrece
• empotrar con una etiqueta <script> (que "inyecta" el código de jugador en el DOM).
• sólo ofrece un fragmento marcado HTML acortada, con todos los enlaces hechos absoluta (CSS, JS, imágenes)

EDITAR: Para evitar la mala interpretación: Estoy hablando de un código de incrustación que se puede ofrecer a nuestros visitantes, para que puedan usar nuestro jugador en sus sitios web remotos. Sí, como Youtube o Soundcloud.

Answer 1

No he usado SM2, así que no puedo hablar de eso.

Sin embargo, si jQuery es una opción, he tenido buena suerte con jquery.mb.miniAudioPlayer, que se basa en jPlayer.

Aquí hay un ejemplo de la cantidad mínima de marcado/código necesario:

<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> 

(. Como se ve en this page -clic 'cómo')

O en otras palabras, para utilizar su ruptura : sí, hay una etiqueta <script> que "inyecta" el código del jugador en el DOM.