Skip to main content
Audio y música

NiftyPlayer: reproductor mp3 en Flash controlado por JavaScript

By noviembre 17, 20087 Comments

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 Comments

  • jeli1799 dice:

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

  • GyoX dice:

    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.

  • GyoX dice:

    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.

  • Yakuza84 dice:

    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. . .
    死神

  • javi dice:

    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!

  • antonio dice:

    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.