NiftyPlayer: reproductor mp3 en Flash controlado por JavaScript

Flash_File.JPGEn la actualidad existen multitud de sitios donde podemos alojar archivos de audio para después agregar un reproductor Flash a nuestra Web/Blog. En algún artículo en blogoff ya se ha hablado sobre servicios como: GoEar (Cómo poner música en tu blog, GoEar.com) o Dewplayer (Sencillo reproductor de audio para Blogger) este último algo más parecido al reproductor que vamos a ver hoy.

NiftyPlayer

Es un bonito reproductor Flash para nuestra Web, tiene una sencilla interfaz y es ligero de tamaño (4kb) lo cual lo hace perfecto para usarlo sin complicaciones. También al ser open-source podemos copiar y modificar a nuestro gusto los archivos y alojarlos en nuestro propio servidor.

  • Para empezar descargamos el archivo .zip desde niftyplayer.zip
  • Después de descomprimirlo encontraremos 5 archivos:
    • sample.html y main.css: contiene instrucciones sobre el reproductor.
    • niftyplayer.js: controles para el reproductor.
    • niftyplayer.fla: archivo de Flash para modificar: colores, forma y estilo del reproductor.
    • niftyplayer.swf: resultado final del reproductor que se mostrará al insertar el código en nuestra Web.

ftp.JPG

  • Una vez subido todo lo anterior a nuestro servidor FTP podemos agregar nuestras canciones en .mp3 (por el momento sólo admite archivos .mp3)
  • Ahora editamos la Web donde queramos que aparezca el reproductor y añadimos el código siguiente:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="165" height="38" id="niftyPlayer1" align="">
<param name=movie value="niftyplayer.swf?file=betty.mp3&as=1">
<param name=quality value=high>
<param name=bgcolor value=#FFFFFF>
<embed src="niftyplayer.swf?file=betty.mp3&as=1" quality=high bgcolor=#FFFFFF width="165" height="38" name="niftyPlayer1" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>

  • file=betty.mp3: sustituir por el nombre del archivo .mp3 que quieras que se escuche.
  • as=1: especifica si quieres que empiece la reproducción de forma automática o no (vacío).

Si hemos seguido todos los pasos anteriores tendremos esto en nuestra Web:

niftyPlayer.jpg
Para terminar, si quieres agregar controles adicionales JavaScript al reproductor, bastará con añadir la siguiente línea de código entre <head> y </head>
<script type="text/javascript" language="javascript" src="niftyplayer.js"></script>

Ahora cada vez que quieras agregar un controlador de: play, pause, stop o nueva canción deberás agregar un enlace tipo:

  • <a href=”javascript:niftyplayer(‘niftyPlayer1’).play()”>play</a>
    <a href=”javascript:niftyplayer(‘niftyPlayer1’).pause()”>pause</a>
    <a href=”javascript:niftyplayer(‘niftyPlayer1’).stop()”>stop</a>
    <a href=”javascript:niftyplayer(‘niftyPlayer1’).load(‘betty.mp3’)”>load file 1</a>
    <a href=”javascript:niftyplayer(‘niftyPlayer1’).load(‘creeeeak.mp3’)”>load file 2</a>

7 Respuestas a NiftyPlayer: reproductor mp3 en Flash controlado por JavaScript

  1. jeli1799 diciembre 3, 2008 en 11:47 pm #

    He hecho todo lo que dices al pie de la letra. Pero a la hora de insertar el código en la web no me sale nada. Lo he hecho con un monton de reproductores y en todos es lo mismo.
    Que estoy haciendo mal???

  2. GyoX diciembre 18, 2008 en 12:20 pm #

    Yo ahora le echare un ojo, pero vamos jeli por norma general lo que te pasa a ti (que no digo que sea el caso) es por copiar y pegar, quizas te den problemas sus comillas, aun asi, no esperes que venga un adivino y te diga pues haces mal esto, no crees que se necesita ver el codigo para saber que haces mal? El unico que ve tu monitor eres tu.

  3. GyoX diciembre 18, 2008 en 4:07 pm #

    Quisiera decir otra cosa mas. Desconozco las razones del porque, pero a la hora de añadir el reproductor no hay que usar un object y un embed, yo he usado el embed solo, sino lo insertamos dos veces, si lo hacemos dos veces, firefox me pinta el embed y ie el object y se apunta a estos objetos de manera diferente por lo que habria que llevar una doble programacion inecesaria, usen solo el embed que funciona perfectamente.

  4. Yakuza84 diciembre 23, 2008 en 2:02 am #

    Hola, ps checando este reproductor si me ha servido, talvez el problema que tiene jeli es que los archivos se esta linkeando a un archivo llamado ‘niftyplayer1’ y el nombre ‘por default’ es ‘niftyplayer’.
    Saludos y muy bueno el reproductor, estaba buscando uno desde hace bastantito. . .
    死神

  5. javi enero 9, 2009 en 7:48 am #

    hola! lo que necesito es un reproductor que pueda subirlo a mi diseño hecho en flash. Estoy buscando por todas partes pero no encuentro.
    saludos!

  6. antonio junio 10, 2009 en 9:06 am #

    Hola a todos,
    he instalado el reproductor y ma va de maravilla, pero me gustaria hacer una pregunta. Me gustaria que reproduciera los mp3 sin interrupcion, quiero decir que al acabar vuelva a reproducirse. Lo he puesto para que se ponga en marcha nada mas abrir la web pero al acabar el tema se detiene y me gustaria mucho que siguiera , osea que haciera blucle. Muchisimas gracias por vuestra atención.

Trackbacks/Pingbacks

  1. Tecnologia interesante de ipshop.com - Reproductor MP3 de Solange - diciembre 22, 2008

    […] con sitio para tu MP3    iAudio7 un reproductor mp3 de Cowon | Geekets    NiftyPlayer: reproductor mp3 en Flash controlado por JavaScript …    El hijo de Madonna solo en la piscina    Cumplen años hoy 16 de […]

nike air max 90