Субтитры для <audio> с <track>, как отображать субтитры

Я пытаюсь добавить текстовую транскрипцию устного аудиофайла с тегом дорожки. Поведение по умолчанию для тега видео состоит в том, чтобы отображать их (работает). По умолчанию звуковой тег, кажется, не имеет своего рода "холста" (черная область, где тег видео отображается даже без видео), чтобы автоматически отображать субтитры. Я мог бы использовать тег видео, но это было бы похоже на уродливое обходное решение. Однако я не хочу нарушать семантику моего кода.

Есть ли какой-нибудь CSS, чтобы заставить отображать такую область, где будут отображаться субтитры?

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

Спасибо за чтение.

Ответ 1

Попробуйте использовать атрибут kind = "attribute" в теге дорожки.

Ответ 2

У меня есть аналогичное требование, пытаясь создать отображение транскриптов титров для аудиозаписей для личного приложения. Я пытаюсь автоматически прокручивать и выделять текстовые фразы на основе аудиозаписей. Я не нашел элемент, отображающий титры файлов .vtt, установленные на элементе, так как нет холста, доступного аналогично элементу видео. И решил написать пользовательский компонент холста для отображения связанного с ним .vtt на контейнере и нашел это HTML5 Video Caption maker для демонстрации, вы можете дать ему выстрел.

Ответ 3

В html есть псевдоэлемент, который вы можете выбрать в css для создания субтитров или надписей. Элемент ::cue позволяет указать некоторое свойство css, например color, opacity, font и т.д. Вы видите, что все они - стили, используемые для текстов.
Я узнал об этом, когда узнал, как использовать теги video. Но имел поиск в google и нашел очень полезную статью о MDN. Вы можете увидеть все о стиле субтитров в здесь.
И нет причин использовать плагины;).

Ответ 4

Я не знаю, как это сделать с помощью только CSS, но я сделал что-то подобное (настраиваемые подсказки) с видеотекстом и JavaScript. Надеемся, вы сможете использовать те же самые события TextTrack, чтобы выполнить то, что вы хотите делать с аудиодорожками.

Вы можете привязать настраиваемую функцию к событию oncuechange пути, а затем использовать дорожку activeCues для создания собственных подписей. Затем этот пользовательский div можно позиционировать или стилизовать, но вы хотите.

Это должно захватывать текстовую дорожку и получать текст из текущей активной метки каждый раз, когда происходит изменение метки.

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

Затем возьмите текст из каждой метки и введите его в пользовательский div, который вы хотите отобразить.

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