Ответ 1
Попробуйте использовать атрибут kind = "attribute" в теге дорожки.
Субтитры для <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>
Спасибо за чтение.
Ответы
Ответ 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, который вы хотите отобразить.