Untertitel für <audio> mit <track>, wie die Untertitel angezeigt werden

Question

Ich versuche, eine Texttranskription einer gesprochenen Audiodatei mit dem Track-Tag hinzuzufügen. Das Standardverhalten für das Video-Tag besteht darin, sie anzuzeigen (funktioniert). Standardmäßig scheint das Audio-Tag eine Art "Leinwand" zu haben (der schwarze Bereich, in dem ein Video-Tag auch ohne Video angezeigt wird), um die Untertitel automatisch anzuzeigen. Ich könnte das Video-Tag verwenden, aber es würde sich wie ein hässlicher Workaround anfühlen. Ich möchte die Semantik meines Codes jedoch nicht durchbrechen.

Gibt es irgendeine Art von CSS, um die Anzeige eines solchen Bereichs zu erzwingen, in dem die Subtile angezeigt werden?

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

Vielen Dank für das Lesen.

Answer 1

Versuchen Sie, das art = "Attribut" im Track-Tag zu verwenden.

Answer 2

Ich habe eine ähnliche Anforderung zu versuchen, eine Untertitel-Anzeige für Audioprotokolle für eine persönliche App zu erstellen. Ich versuche, automatisch zu scrollen und die Textphrasen basierend auf dem Audioprotokoll hervorzuheben. Ich habe das Element nicht gefunden, das die .vtt-Dateibeschriftungen für das Element anzeigt, da kein Canvas verfügbar ist, ähnlich dem Videoelement. Und entschieden, eine benutzerdefinierte Leinwand-Komponente zu schreiben, um assoziierte .vtt auf dem Container anzuzeigen und diese HTML5 Video Caption maker Demo praktisch zu finden, können Sie es eine Chance geben.

Answer 3

Es gibt ein Pseudo-Element in HTML, das Sie in CSS auswählen können, um Ihren Untertitel oder Untertitel zu formatieren. Es ist ::cue Element, das Sie einige CSS-Eigenschaft wie color, opacity, font und etc geben können. Sie sehen, dass alle die Stile sind, die für Texte verwendet werden.
Ich lernte diese, als ich lernte, wie man video Tags verwendet. Aber hatte eine Suche in Google und fand einen sehr hilfreichen Artikel über MDN. Sie können alles über Untertitel-Styling in here sehen.
Und es gibt keinen Grund, Plugins zu verwenden;).

Answer 4

Ich weiß nicht, wie das mit nur CSS zu tun, aber ich habe etwas ähnliches (benutzerdefinierte Hinweise) mit Video-Text-Tracks und JavaScript. Hoffentlich sollten Sie in der Lage sein, dieselben TextTrack-Ereignisse zu nutzen, um das zu erreichen, was Sie mit Audiotracks machen wollen.

Sie können eine benutzerdefinierte Funktion an das oncuechange-Ereignis der Spur binden und dann die activeCues der Spur verwenden, um eigene Beschriftungen zu generieren. Dieser benutzerdefinierte div kann dann wie gewünscht positioniert oder gestylt werden.

Dies sollte die Textspur erfassen und den Text von der aktuell aktiven Stimmung jedes Mal abrufen, wenn eine Cue-Änderung auftritt.

Dann nehmen Sie den Text von jedem Stichwort und injizieren Sie es in die benutzerdefinierte div, die Sie anzeigen möchten.

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