YouTube умеет показывать субтитры, а ещё он умеет переводить субтитры на любой язык. Меня интересовало получение полноценного связного текста перевода для видеоролика.
Задача
Нужно получить полноценный «очищенный» текст силами JavaScript и инструментами разработчика в браузере. Никаких редакторов кода.
1. Получение файла субтитров
Для начала откроем нужный нам видеоролик и включим у него субтитры. Пусть это будет ролик с YouTube-канала «Google Chrome Developers» — https://youtu.be/9Qtvjd0UbAs
После включения субтитров под белой иконкой появится красная полоса, которая информирует о «включенном» состоянии субтитров. В верхнем левом углу указывается язык воспроизведения субтитров.
Включаем инструменты разработчика в браузере. Переключаем язык с английского на русский.
Выбираем «Перевести». Находим русский язык.
В момент клика по нужному нам языку на сервер отправляется запрос.
Запрос был отправлен при помощи XMLHttpRequest. В ответе пришёл объект JSON.
В ответе сервера мы уже видим русские буквы, слова и предложения. Но в таком виде нам не удобно работать с текстом т. к. он разделён временными метками.
2. Работа с объектом JSON в браузере
Нажимаем правую кнопку мыши над содержимым поля «Response» в инструментах разработчика.
Документ открывается в новой вкладке. Документу присваивается базовая HTML-разметка.
С этого момента мы можем начать писать сценарий, при котором будет получен «чистый» текст из русских букв.
3. Программирование на JavaScript
Для начала поместим содержимое объекта JSON в переменную и будем с ним работать.
В переменную «a» заносим коллекцию HTML-элементов pre. В нашем случае всё просто т. к. на странице всего один элемент pre.
var a = document.getElementsByTagName("pre")
Преобразовываем HTML-коллекцию в массив и заносим в переменную «b«.
var b = Array.from(a)
Теперь мы можем получить внутреннее содержимое между закрывающим и отрывающим тегом pre. Получаем первый элемент массива «b» и сразу выводим его innerHTML.
var c = b[0].innerHTML
Сейчас в переменной «c» лежит строковый тип данных. А нам нужно получить объект. Мы хорошо видим что строка легко преобразуется в объект. Преобразуем.
var obj = JSON.parse(c)
По структуре объекта нам нужно дотянуться до ключа «events«, значением которого является нужный нам массив с текстовыми кусками. Вытягиваем массив.
var arr1 = obj.events
В переменную «arr1» попал массив из объектов. Нам это тоже не подходит и мы будем понемногу извлекать содержимое из объектов и генерировать «облегчённые» массивы.
Первым нас будет встречать индекс массива.
Вторым — ключ «segs«
Третьим — снова индекс массива
Четвёртым — ключ «utf8«
Структура повторяется из по каждому индексу массива, поэтому сразу применим преобразования по полным (глубинным) путям. Воспользуемся методом map(), который работает с прототипами объектов Array.
var arr2 = arr1.map(t => {return t.segs[0].utf8})
Мы уже очень близко к итоговому результату. Нас разделяет только этап «склейки» элементов массива. Удобство YouTube заключается в том, что нам не нужно будет использовать разделители между текстовыми кусками. Используем метод join(separator)
var str = arr2.join("")
Мы получили «чистый» текст, который можем использовать для последующего прочтения или написания публикации в сети интернет.
