Solución de audio de Crossbrowser con HTML5

Descargar 

Descargar descomprimido .JS

 Viene de la caja en dos variantes y con increíbles opciones de personalización: dimensiones flexibles, colores ilimitados y dos conjuntos de botones diferentes para temas claros y oscuros. Fácil de configurar. Sólo unas pocas líneas de Javascript y un CSS cuántico. Con la tecnología de Projekktor, viene con compatibilidad entre navegadores, Flash-fall back y enlaces opcionales de información social y de artistas.

Ultra Compact Docu 

Para reconstruir la demostración anterior en su propio sitio, siga primero nuestra pequeña Guía de instalación rápida . A continuación, encontrará el marcado y el Javascript necesarios para configurar y activar su instancia de jugador:

< audio class = "speakker dark" >


    < source src = './sound/' type = "application / jsonp" />


</ audio >





< tipo de script = "texto / javascript" >


$ ( documento ). listo ( función ()  {


    $ projekktor ( '.speakker dark' ,  {


        plugin_share :  {


            enlaces :  {


            'descargar' : {


                buttonText :  'descargar' ,  


                código :      './sound/?dl=true'        


            } ,


            'lastfm' : {


                buttonText :  'lastfm' ,    


                Código :  'http://www.lastfm.de/music/paniq'        


            } ,


            'wikipedia' : {


                buttonText :  'wikipedia' ,        


                código :  'http://de.wikipedia.org/wiki/Elektronische_Musik'        


            } ,


            'admin' : {


                buttonText :     'admin' ,


                código :  falso


            }                   


        }


    } );


} );


</ script >

mota

Guía de instalación rápida

Montar Speakker en cualquier sitio web es rápido y muy sencillo:

1. Asegúrate de que tu página cargue jQuery V1.4.2 o superior
2. Suba la carpeta "speakker" del archivo de descarga a su sitio. Asegúrese de que esto incluye todos los directorios y archivos dentro. Speakker cargará automáticamente sus archivos de componentes flash fallback desde allí.
3. Incluya el "projekktor.min.js".
4. Incluya el "speakker.min.js".
5. Incluya "speakker.css" y "mspeakker.css"
6. Crea un contenedor DOM vacío donde quieras que el jugador se siente.
7. Instálate como se describe a continuación.
8. Hecho.

Algo similar a esto debería estar en el encabezado de tu página ahora:

texto emergente

< script type = "text / javascript" src = "speakker / jquery .min.js " > </ script >

<! - INCLUYE ALTAVOZ ->
< Enlace rel = "stylesheet" href = "speakker / css / speakker .css " tipo = "text / medios CSS" = "pantalla" >
< Enlace rel = "stylesheet" href = "speakker / css / mspeakker .css " tipo = "text / medios CSS" = "pantalla" >
< script type = "text / javascript" src = "speakker / projekktor .min.js " > </ script > 
< script type = "text / javascript" src = "speakker / speakker .min.js " > </ script > 
<! - Eso es ->

Creando al pequeño jugador

Supongamos que tienes algo como esto en algún lugar de tu marca:

texto emergente

< div class = "speakkerSmall" > </ div >

Puedes abrir la versión pequeña del reproductor con esto:

texto emergente

< tipo de script = "texto / javascript" >
$ ( documento ) .ready ( función ()  {    
    $ (' .speakkerSmall ') .speakker ({
        archivo: ' http: //url/toyour/music.mp3',
        título: ' un  solo  MP3 ',
        tema: ' luz ',
        cartel: ' cover.jpg '
    } );
</ script >

Creando la imagen del Big Boy

El pequeño Speakker es agradable, pero el grande es genial. Está diseñado para listas de reproducción. Es por eso que queremos centrarnos en configurar una instancia basada en listas de reproducción aquí. Las listas de reproducción también funcionarán para la pequeña variante, pero a quién le importa.

Para abrir el Speakker grande y pegajoso solo use $ (). Speakker (sin selector) como se muestra a continuación. El script generará los elementos DOM necesarios y pegará el reproductor al final de la página.

texto emergente

< tipo de script = "texto / javascript" >
$ ( documento ) .ready ( función ()  {
    $ () .speakker ({
        archivo: ' http: //www.speakker.com/opentape/code/projekktor.php',
        Lista de reproducción:  verdad ,
        tema: ' luz ',
        admin: ' http: //www.speakker.com/opentape/code/login.php',
        lastfm: ' http: //www.lastfm.de/music/paniq'
    } );
} );
</ script >

Como puede ver, el archivo no apunta a un OGV o MP3, sino a un archivo PHP . Aquí es donde se genera la lista de reproducción JSON. Para obtener más información sobre las listas de reproducción, consulte el Docu de lista de reproducción de Projekktor . Para obtener una primera visión, simplemente abra el PHP mencionado para ver qué se bombea: http://www.speakker.com/opentape/code/projekktor.php

No puede aplicar http://www.speakker.com/opentape/code/projekktor.php a su instalación de prueba local o dentro de una página en otro dominio debido a las restricciones de seguridad de Javascript.

Para evitar la frustración y los resultados extraños, hágale saber a Speakker que lo alimenta con una lista de reproducción configurando la lista de reproducción en VERDADERO .

Et voila ... y sí, es así de fácil.

Opcionalmente, la variante de jugador grande cuenta con tres enlaces personalizados: "lastfm", "wikipedia" y "admin". Establecer valores para ellos habilitará los elementos GUIcorrespondientes .

Parámetros de configuración

archivo (cadena): URL a un solo archivo de audio o una lista de reproducción de proyectores que contiene una o más 
listas de reproducción (booleano): Cargue el "archivo" como lista de reproducción JSON en VERDADERO. Supongamos un solo archivo de audio de lo contrario. 
póster (cadena): el póster / portada predeterminado para el archivo dado. 
título (cadena): el título del jugador utilizado en la reproducción de un solo archivo. 
tema (cadena): use el esquema de color “oscuro” o “claro”. 
fat (booleano): hace que el reproductor de listas de reproducción sea aún más grande si se establece en TRUE. 
wikipedia (cadena): URL a la página de Wikipedia del artista, si la hay. 
lastfm (cadena): URL a la página de last.fm del artista si la hay.
admin (cadena): URL al administrador backend, si existe.