Marquesina de inicio en reproducción de audio

Question

Estoy tratando de encontrar una manera de establecer una etiqueta de tiempo para la etiqueta de marquesina en html. La idea general es mostrar los subtítulos de una canción en formato de marquesina y comenzar la marquesina solo cuando el usuario hace clic para iniciar el audio.

estoy usando el siguiente código para reproducir el archivo de audio, (en html-5)

<audio controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

Lo que estoy haciendo es establecer este archivo de audio en la reproducción automática, y dejar que el inicio de marquesina en el momento de la carga de página (que es la configuración predeterminada) pero funciona bien en redes de alta velocidad, para redes de baja velocidad el problema que surge es que la carga del contenido de audio se retrasa y el texto de la marquesina comienza a ejecutarse antes que el audio. que no es genial

Por favor avísenme cómo puedo lograr una solución a este problema a través de javascript?

Answer 1

No estoy seguro de cómo inicia su etiqueta de marquesina, pero debe esperar al play - Evento de su elemento de audio para hacerlo. La reproducción automática dispara este evento cuando el elemento comienza a reproducirse.

Tenga en cuenta que el marquee -tag está en desuso, yo usaría css-transitions en su lugar, que pueden activarse fácilmente para comenzar añadiendo un className específico.

Dale a tu media-Element un id, por lo que puede fácilmente acceder a él con javascript:

<audio id="audio" controls="controls" loop="loop"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element.Please use chrome. 
</audio> 

Y el JavaScript - Código:

var audioEl = document.getElementById("audio"); 

audioEl.addEventListener('play',function(){ 
    //start your marquee in here 
}); 

Usted puede encontrar todos los eventos que son compatibles por elementos de medios en el W3C-Page con una descripción de cuándo son despedidos. Esto le brinda una visión general sobre cómo puede interactuar con elementos multimedia en JavaScript.

Answer 2

http://jsfiddle.net/kykMs/1/

Ponga su título de la canción en un principio span:

<span id="song">Artist - Song Title</span> 

A continuación, al cargar la página reemplazarlo con marquee:

window.onload = function() { 
    var elem = document.getElementById("song"); 

    var marq = document.createElement('marquee'); 
    marq.innerHTML = elem.innerHTML; 

    document.getElementById("player").removeChild(elem); 
    document.getElementById("player").appendChild(marq); 
}