TextTrack - об'єкт для обробки і контролю WebVTT (текстові доріжки для медіа).
var textTrack= HTMLMediaElement.addTextTrack( kind, label, language );
textTrack - змінна які присвоюється об'єкт TextTrack.
HTMLMediaElement - об'єкт HTMLMediaElement.
kind - рядок який містить тип текстової записі.
label - рядок який містить заголовок текстової доріжки.
language - рядок який вказує мову тексту у форматі BCP47. Наприклад: 'en', 'fr' 'uk'.
TextTrack об'єкт для обробки і контролю WebVTT (текстові доріжки для медіа).
Текстова доріжка складається з "сигналів" - текстового рядка який відображається і приховується у вкзаний час відтворення. Тобто об'єкт TextTrack містить об'єкти VTTCue.
Відображаємо текст пісні з елемента audio:
<audio id="player" controls>
<source src="/dani/lviv.mp3"></source>
<track id="track" src="/dani/lviv.vtt" kind="subtitles" label="Текст пісні" srclang="ua" default></track>
</audio>
<div id="result"></div>
var player=document.getElementById('player');
var track=player.textTracks[0];
track.oncuechange=function(){
var s='';
for(var i=0,len=this.activeCues.length;i<len;i++)
s+='<p>'+this.activeCues[i].text+'</p>';
document.getElementById('result').innerHTML=s;
}
player.play();
Приклад додавання тексту пісні до субтитрів за допомогою самого JavaScript без використання файлу VTT:
<div id="text_audio"></div>
var audio = new Audio(), text_audio=document.getElementById("text_audio");
var startTime, endTime, message;
audio.src="/dani/lviv.mp3";
var textTrack = audio.addTextTrack("captions", "текст пісні"); //додаємо нову текстову доріжку
textTrack.mode = 'showing'; //включаємо режим показу
//додаємо нові текстові рядки до текстової доріжки
textTrack.addCue(new VTTCue(0, 10, 'гурт "Чорно-Білі", пісня "Мій дім Львів'));
textTrack.addCue(new VTTCue(39, 42, 'Ти запитаєшь де мій дім, я покажу на захід'));
textTrack.addCue(new VTTCue(42, 45, 'Там де сонячне проміння відбивається від мокрих дахів'));
textTrack.addCue(new VTTCue(45, 49, 'Там де посміхаються прохожі при любих обставинах, при любій погоді'));
textTrack.addCue(new VTTCue(49, 52, 'Неважливо чи дождь чи сонце, чи сухо чи мокро'));
textTrack.addCue(new VTTCue(52, 54, 'Я - львівянин - це заявляю гордо.'));
textTrack.addCue(new VTTCue(54, 56, 'Львів мій дім, дім мій Львів.'));
textTrack.addCue(new VTTCue(56, 58, 'Пісня ллється зі всіх сторін.'));
textTrack.addCue(new VTTCue(58, 60, 'Львів один - нас багато.'));
textTrack.addCue(new VTTCue(60, 63, 'Тому давайте поважати ту хату в якій лягаєм спати'));
textTrack.addCue(new VTTCue(63, 65, 'Потрібно вміти цінувати все, що дано'));
textTrack.addCue(new VTTCue(65, 68, 'тобі тут зустрічати ще не один ранок.'));
textTrack.addCue(new VTTCue(68, 70, 'Пари цілуються на лавочках, в парках'));
textTrack.addCue(new VTTCue(70, 78, 'хтось оглядає Львів з високого замку, хтось слухає мене, хтось ігнорує, але це не важливо бо цю пісню ми місту даруєм.'));
textTrack.addCue(new VTTCue(78, 83, 'ти запитаєш мене де мій дім, я відповім, мій дім Львів'));
textTrack.addCue(new VTTCue(83, 87, 'у відповідь я нічого не почую, цю пісню свому місту даруєм'));
textTrack.addCue(new VTTCue(87, 91, 'запитаєш мене, де мій дім, я відповім, мій дім Львів'));
textTrack.addCue(new VTTCue(91, 100, 'у відповідь я нічого не почую, цю пісню місту даруєм.'));
textTrack.addCue(new VTTCue(97, 102, 'Я сів на лавочці, дивлюсь, спостерігаю як люди біля мене мимо пробігають...'));
textTrack.addCue(new VTTCue(102, 107, 'поспішають, біжать, хто куди...одні просто гуляють, другі в магазини..'));
textTrack.addCue(new VTTCue(107, 110, 'помічаючи краси яка навколо них...'));
textTrack.addCue(new VTTCue(110, 116, 'будинки німих, вуличок старих вузьких стелених бруківкою, просочених вічністью...'));
textTrack.addCue(new VTTCue(115, 118, 'немає кращого, немає красивішого...'));
textTrack.addCue(new VTTCue(117, 121, 'Площа Ринок - серце Львова, Майже всі дороги ведуть сюди,'));
textTrack.addCue(new VTTCue(121, 127, 'Тут є все, для, душевної гармонії: пам\'ятники, фонтани і трамвайні колії...'));
textTrack.addCue(new VTTCue(127, 132, 'якщо попадеш сюди тобі буде куди піти музеї, галереї, театри і церкви...'));
textTrack.addCue(new VTTCue(132, 136, 'хіба кращий дім у світі існує цю пісню свому місту дарую.'));
textTrack.addCue(new VTTCue(136, 141, 'ти запитаєш мене де мій дім, я відповім, мій дім Львів.'));
textTrack.addCue(new VTTCue(141, 146, 'у відповідь я нічого не почую, цю пісню свому місту даруєм.'));
textTrack.addCue(new VTTCue(146, 152, 'запитаєш мене, де мій дім, я відповім, мій дім Львів'));
textTrack.addCue(new VTTCue(152, 160, 'у відповідь я нічого не почую, цю пісню місту даруєм.'));
textTrack.addCue(new VTTCue(160, 169, 'моє місто Львів, нехай знают всі де мій дім...'));
textTrack.addCue(new VTTCue(169, 178, 'моє місто Львів нехай знают всі де мій дім...'));
textTrack.addCue(new VTTCue(178, 180, 'моє місто Львів нехай знают всі де мій дім...'));
textTrack.addCue(new VTTCue(180, 188, 'моє місто Львів нехай знают всі де мій дім...'));
textTrack.addCue(new VTTCue(188, 198, 'моє місто Львів нехай знают всі де наш дім...'));
textTrack.oncuechange=function(){
var s='';
for(var i=0,len=this.activeCues.length;i<len;i++)
s+='<p>'+this.activeCues[i].text+'</p>';
text_audio.innerHTML=s;
}
audio.play();