Mon animal de compagnie est LinguaPlayer

Aujourd'hui, vendredi, j'aimerais parler de l'un de mes projets favoris, des choses intéressantes que j'ai dû faire en travaillant dessus et des problèmes que je ne pourrais pas résoudre pour son développement ultérieur.

Donc, j'avais pas mal de projets familiers à divers degrés de réalisation. Parmi eux: un réseau social pour les écrivains, un générateur de sprite CSS, un robot Telegram pour la datation par centres d'intérêt, et bien plus encore. Aujourd'hui, nous allons parler de mon dernier développement.

Comme beaucoup de gens ces jours-ci, j'apprends l'anglais. Je pense que beaucoup de gens savent aussi qu'une approche efficace dans ce domaine est l'immersion maximale dans l'environnement. Interface téléphonique en anglais, notes dans un cahier en anglais, regarder des films en anglais avec sous-titres anglais. En regardant un film dans l'original, tôt ou tard, il est nécessaire de traduire tel ou tel mot ou phrase qui scintille à l'écran toutes les quelques minutes. Sans eux, rien n'est clair du tout.

Idée de projet

J'ai donc eu l'idée d'un lecteur vidéo avec des sous-titres traduisibles. L'application vous permet de traduire des mots et des phrases entières tout en regardant un film. Avec lui, il n'est pas nécessaire de basculer entre les applications ou de prendre un smartphone. Rencontrez LinguaPlayer .

Le schéma de travail est simple. L'utilisateur ouvre le fichier vidéo et le fichier de sous-titres. Regarde le film comme d'habitude. Cependant, maintenant, en plus des raccourcis clavier standard, il a des touches pour traduire chaque mot séparément, traduire des phrases entières, revenir d'une ligne à l'autre. Il y a aussi une traduction en passant le curseur de la souris sur des mots ou en mettant en évidence le morceau de texte souhaité. L'application est disponible pour Windows et MacOS. Tous les détails peuvent être trouvés sur la page de l'application .

Pile technologique

Electron, . . Chromium, -. – . Visual Studio Code, Skype, Slack. Electron API, JavaScript, . . – , . JavaScript, Angular, jQuery, Vue – .

LinguaPlayer , : TypeScript, React, MobX, Webpack. , : , . . , , . . , DOM . , , , .

, . — srt- . – , .

 node-webvtt. « ». video- «timeupdate», . , «timeupdate» , . .

hash map. (, ), – , . :

{
	//    2 
	5: [1, 2]
	//    3  
	7: [3, 4, 5]
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

0 4 — . , , —  hash map. , . , , . 4 , . , :

//  :  ,    ( ),   , 
class Cue {
  public readonly index: number;
  public readonly startTime: number;
  public readonly endTime: number;
  public readonly text: string;

  constructor(index: number, startTime: number, endTime: number, text: string) {
    this.index = index;
    this.startTime = startTime;
    this.endTime = endTime;
    this.text = text;
  }
}

interface CueIndex {
  //      ( )     ,
  //        
  [key: number]: number[];
}

class SubtitlesTrack {
  private readonly cues: Cue[];
  private index: CueIndex = {};

  constructor(cues: Cue[]) {
    this.cues = cues;

    //       ,  
    this.indexCues();
  }

  private indexCues() {
    this.cues.forEach((cue: Cue) => {
      //               
      const startSecond = Math.floor(cue.startTime / 1000);
      const endSecond = Math.floor(cue.endTime / 1000);

      //   (  )  
      this.addToIndex(startSecond, cue);
      // ,      ,         
      //         
      if (endSecond !== startSecond) {
        this.addToIndex(endSecond, cue);
      }
    });
  }

  private addToIndex(secondNumber: number, cue: Cue): void {
    //       ,     
    if (!this.index[secondNumber]) {
      this.index[secondNumber] = [];
    }

    //         
    this.index[secondNumber].push(cue.index);
  }

  //   
  public findCueForTime(timeInSeconds: number): Cue|null {
    //   timeupdate     
    //     
    const flooredTime = Math.floor(timeInSeconds);
    //      
    const cues = this.index[flooredTime];
    let currentCue = null;

    //      
    if (cues) {
      //   
      for (let index of cues) {
        const cue = this.cues[index];

        //  ,             
        if (this.isCueInTime(timeInSeconds, cue)) {
          //  ,        
          currentCue = cue;
          break;
        }
      }
    }

    //     null,      
    return currentCue;
  }

  public isCueInTime(timeInSeconds: number, cue: Cue): boolean {
    const timeInMilliseconds: number = timeInSeconds * 1000;

    return timeInMilliseconds >= cue.startTime && timeInMilliseconds <= cue.endTime;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , 4 , , 1 4.

 node-sentence-tokenizer. div sentence word , . :

import Tokenizer from 'sentence-tokenizer';

function formatCue(text: string): string {
  const brMark: string = '[br]';
  const tokenizer = new Tokenizer();

  //            
  text = text
    .replace(/\r\n/g, ` ${brMark}`)
    .replace(/\r/g, ` ${brMark}`)
    .replace(/\n/g, ` ${brMark}`);

  //  text    
  tokenizer.setEntry(text);

  //    
  const sentenceTokens: string[] = tokenizer.getSentences();
  //   
  const sentencesHtml: string[] = sentenceTokens.map((sentenceToken: string, index: number) => {
    //    
    const wordTokens: string[] = tokenizer.getTokens(index);
    //    
    const wordsHtml: string[] = wordTokens.map((wordToken: string) => {
      let brTag: string = '';

      //      ,     html   
      if (wordToken.includes(brMark)) {
        wordToken = wordToken.replace(brMark, '');
        brTag = '<br/>';
      }

      //    span   word    br,  
      return `${brTag}<span class="word">${wordToken}</span>`;
    });

    //   ,  ,     span   sentence
    return `<span class="sentence">${wordsHtml.join(' ')}</span>`;
  });

  //     
  const html: string = sentencesHtml.join(' ');

  return html;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

 Microsoft Translator  , .

,

, MVP, proof of concept. . , -, Urban Dictionary , . ,  LinguaLeo  Skyeng. .  Anki. .

, , . , , . , – Chromium.   , , H.264 FLAC MP3. , . – . , , .

Ainsi, le principal facteur de blocage actuellement est le contenu. Il devrait jouer sans aucun problème dans l'application, il devrait pouvoir l'obtenir facilement et rapidement, et aussi, il ne devrait pas violer les licences et les droits d'auteur. Dès que le problème de contenu sera résolu, je continuerai volontiers à travailler sur le projet. En attendant, si quelqu'un est intéressé, vous pouvez  télécharger et essayer la  version conceptuelle de l'application.