2012-09-20 15 views
9

Pude reproducir música continuamente en todas las páginas sin volver a cargar, utilizando marcos (sé que la música que se reproduce continuamente no es una buena idea pero el cliente realmente la solicitó, así que no tuve elección). Aquí es lo que he usado para el marco con la reproducción de música:Reproducción de música continuamente con el nombre

<body> 
    <div id="player"> 
    <audio id="audio" controls="controls" autoplay="autoplay" loop="loop" style="width:150px;"> 
     <source src="martnalia05namoracomigo.ogg" type="audio/ogg" /> 
     <source src="martnalia05namoracomigo.mp3" type="audio/mp3" /> 
     <embed src="martnalia05namoracomigo.mp3" hidden="true" loop="TRUE" autostart="TRUE"></embed> 
    </audio> 
    </div> 
</body> 

Inserté esta música sólo para probar, y me gustaría saber si es posible hacer una lista de reproducción y si es posible informar la música que se está reproduciendo actualmente con un enlace y un botón para omitir una música, por ejemplo:

[player] 
| button previous | button to play/pause | button next 
| name of the music (link to the page of the Album) | 
[end of player] 

¿Alguna sugerencia?

+0

No es necesario utilizar marcos - usted puede tener su contenedor de contenido obtener los datos de forma asíncrona con AJAX y poblar esa manera. BackboneJS y Spine son excelentes soluciones para ese tipo de aplicación web. – AlienWebguy

+0

No estoy seguro de que pueda usarlo, porque en realidad estoy usando una base prefabricada para mi sitio, estoy usando esto: jumpseller.com y mi sitio web es este: http: //biscoitofino.jumpseller.com/ No sé si realmente puedo editar la navegación en este sistema ya que tengo un acceso limitado para los códigos. Mi idea era usar el reproductor de música en un Marco de arriba y el contenido verdadero de la web en el Marco a continuación. –

+0

¿Qué sitio es esto? Quiero asegurarme de nunca ir a eso. – Joe

Respuesta

0

Probablemente va a tener que usar un complemento de reproductor de medios. Trate Leanback jugador:

http://leanbackplayer.com/ + http://leanbackplayer.com/player_extensions.html (Audio Lista de reproducción XSPF extensión)

Es HTML5/CSS/JS con una opción de resguardo de Flash por lo que debe ser capaz de estilo que se adapte a sus necesidades con bastante facilidad.

+0

Hola y gracias por tu respuesta, Jim, entonces dime, ¿crees que hay una opción mejor que usar marcos en mi caso (considerando que no puedo usar AJAX con el sistema que tengo) para que la música se reproduzca continuamente? –

+0

Dado que no puede personalizar la página lo suficiente como para agregar algo de JavaScript, diría que su única opción es seguir con los marcos. – gfyans

+0

Si no estuviera tan restringido, podría ir por la ruta de la aplicación de una sola página, http://en.wikipedia.org/wiki/Single-page_application, para que la página nunca se actualice, solo solicite el nuevo contenido cuando un usuario hace clic en un enlace en su navegación. Tu reproductor multimedia permanece encendido todo el tiempo. Haga una excavación alrededor de Hypem.la fuente de com, no estoy seguro de cómo han cambiado sus URL sin usar un # (las aplicaciones de una sola página no son lo mío), pero funciona muy bien. Fuera de interés, ¿por qué no puedes usar AJAX? Si no puede agregar JS a su sitio, no podrá usar LeanBack. – gfyans

1

Quizás desee hacer un pequeño reproductor multimedia, si es así, hay muchos guiones listos para ayudarle a lograrlo. (Google es tu amigo).

Si decide hacerlo por su cuenta aquí están mis pensamientos, pueden ayudarle en la dirección correcta.

var data = [{audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}, 
      {audiourl: "filename1.mp3", artisturl:"http://example.com",name:"Song name"}]; 

Algún tipo de estructura de datos para almacenar los detalles de sus pistas.

var audio = document.getElementById("audio"); 
audio.addEventListener('ended', playNext); 

Finalmente algún tipo de función para manejar el cambio de pistas

var currentTrack = 0; 
function playNext(options){ 
    currentTrack++; 
    if (currentTrack > data.length){ 
     currentTrack = 0; 
    } 
    var audiosrc = document.getElementById('embed_element_id') // or some other selector method 
    audiosrc.src = data[currentTrack].audiourl; 
    audiosrc.play(); 
} 

Im no totalmente seguro en la especificación de audio HTML5 pero yo asumiría su largo de estas líneas.

espero que esto ayude

Cuestiones relacionadas