Вопрос или проблема
Из документов WebVTT API
Трек текста и подсказки могут быть определены в файле с использованием формата файла WebVTT, а затем связаны с конкретным элементом
<video>с помощью элемента<track>.Кроме того, вы можете добавить TextTrack к медиапредставлению в JavaScript, используя HTMLMediaElement.addTextTrack(), а затем добавить отдельные объекты VTTCue к треку с помощью TextTrack.addCue().
У меня есть файл vtt, и я использую new Audio(src); без элемента <audio> в html. Разве невозможно добавить текстовый трек с помощью файла vtt без фактического элемента <audio> или мне нужно самому разобрать файл vtt и вызвать addCue для каждой подсказки, определенной в файле?
Я не использую элементы <audio>, потому что мне нужно загрузить около 20 аудиофайлов (с файлами vtt) и воспроизвести их в определенном порядке. Может быть, я мог бы иметь один элемент <audio> и повторно использовать его?
Ответ или решение
Программная загрузка текстовых дорожек аудио
Разработка и интеграция аудиофайлов с текстовыми дорожками становятся все более актуальны в современных веб-приложениях. Использование формата WebVTT для добавления аннотаций и субтитров к аудиотрекам — это эффективный способ улучшить доступность контента. В этом контексте возникает вопрос: можно ли программно загрузить текстовые дорожки, используя класс Audio() без использования элемента
Основные аспекты работы с Audio и WebVTT
При создании экземпляра new Audio(src); вы инициализируете объект аудио, который не связан с элементом <audio> на странице. В этом случае у вас нет встроенной поддержки для ассоциации текстовых дорожек, таких как WebVTT. По спецификации WebVTT API текстовые дорожки и их соответствующие фрагменты (cues) могут быть связаны с элементом <video> или <audio> с помощью тега <track>. Это подразумевает, что метод addTextTrack() или addCue() просто недоступны без наличия сопоставленного элемента <audio>.
Что можно сделать?
-
Используйте элемент
<audio>для загрузки текстовых дорожек:
Если вас устраивает использовать один<audio>элемент для воспроизведения всех 20 файлов, это может быть лучшим решением. Вы можете динамически обновлять источник аудио и текстовые дорожки поочередно, что будет более простым и чистым подходом. Например:<audio id="audioPlayer" controls></audio>В JavaScript вы можете программно добавлять атрибуты
<track>к элементу:const audioPlayer = document.getElementById('audioPlayer'); const track = document.createElement('track'); track.kind = 'subtitles'; track.src = 'path/to/your.vtt'; audioPlayer.appendChild(track); -
Парсинг VTT файла:
Если вам действительно необходимо обойтись без<audio>, вы можете рассмотреть возможность ручного парсинга VTT файлов и добавления объектовVTTCueв виде массива. Хотя это потребует времени и усилий, этот подход даст вам полный контроль над отображением текстовых дорожек.Пример парсинга файла VTT:
function parseVTT(vttContent) { const cues = []; const lines = vttContent.split('\n'); // Логика для парсинга VTT и создания объектов VTTCue // добавление объектов в массив `cues` return cues; } -
Динамическая подгрузка:
Используйте динамическую подгрузку VTT файлов, вызывая AJAX запросы для получения контента VTT, а затем добавляйте его к аудиотреку с использованием методаaddCue().
Заключение
Возможности работы с аудио и текстовыми дорожками в веб-разработке предоставляют разработчикам множество инструментов для увеличения функциональности и доступности контента. Учитывая ваши требования, наиболее оптимальным будет использование одного элемента <audio>, который может проигрывать все 20 треков и загружать соответствующие текстовые дорожки по мере необходимости. Однако, если ваш проект требует более индивидуального подхода, парсинг VTT и работа с VTTCue может оказаться подходящим решением.
Надеюсь, эта информация окажется полезной и поможет вам эффективно реализовать нужные функции в вашем проекте.