css - que - Subtítulos para<audio> con<track>, cómo mostrar los subtítulos

que es tags h1 y cursiva

Question

Estoy tratando de agregar una transcripción de texto de un archivo de audio hablado con la etiqueta de pista. El comportamiento predeterminado para la etiqueta de video es mostrarlos (funciona). Por defecto, la etiqueta de audio parece carecer de algún tipo de "lienzo" (el área negra que muestra una etiqueta de video incluso sin video) para mostrar los subtítulos automáticamente. Podría usar la etiqueta de video, pero se sentiría como una solución fea. Sin embargo, no quiero romper la semántica de mi código.

¿Hay algún tipo de CSS para forzar la visualización de tal área donde se mostrarán los subtiles?

<audio controls>
  <source src="test.ogg" type="audio/ogg">
  <source src="test.mp3" type="audio/mpeg">
  <track kind="subtitles" label="English subtitles" src="/test.vtt" srclang="en" default></track>
  Your browser does not support the audio tag.
</audio>

Gracias por leer

Answer 1

Hay un pseudo-elemento en html que puede seleccionarlo en css para darle estilo a su subtítulo o título. Es el elemento ::cue que puede otorgar alguna propiedad css como color , opacity , font , etc. Usted ve que todos ellos son los estilos que se utilizan para los textos.
Aprendí esto cuando aprendí a usar etiquetas de video . Pero hice una búsqueda en google y encontré un artículo muy útil sobre MDN. Puedes ver todo sobre el estilo de los subtítulos here .
Y no hay razón para usar complementos;).

Answer 2

Intente usar el tipo = "atributo" en la etiqueta de pista.

Answer 3

No sé cómo hacer esto solo con CSS, pero he hecho algo similar (señales personalizadas) con pistas de texto de video y JavaScript. Esperemos que pueda aprovechar los mismos eventos de TextTrack para lograr lo que desea hacer con las pistas de audio.

Puede vincular una función personalizada al evento oncuechange de la pista, y luego usar los ActiveCues de la pista para generar sus propios subtítulos. Este div personalizado puede ser colocado o estilizado como quieras.

Esto debería capturar la pista de texto y obtener el texto de la entrada activa en ese momento cada vez que se produce un cambio de referencia.

$(''audio'')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text;
    $(''#yourCustomCaptions'').html(currentCue);
}

Luego tome el texto de cada cue e introdúzcalo en el div personalizado que desea mostrar.

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

Answer 4

Tengo un requisito similar al tratar de crear una pantalla de transcripción de subtítulos para los registros de audio de una aplicación personal. Estoy tratando de desplazarme automáticamente y resaltar las frases de texto basadas en el registro de audio. No encontré el elemento que muestra las leyendas del archivo .vtt establecidas en el elemento ya que no hay un lienzo disponible similar al elemento de video. Y decidió escribir un componente de lienzo personalizado para mostrar .vtt asociado en el contenedor y encontró esta demostración del creador de HTML5 Video Caption a mano, puede darle una oportunidad.