Giter VIP home page Giter VIP logo

t2s's Introduction

Google TextToSpeech 2 mp3

2021-08-06_17h12_54

Download mp3 from Google Text to Speech API

This app provides a simple way to convert Google Text to Speech audio to a mp3 file you can download.

Features

  • SSML editor (prosody, emphasis, break, spell-out)
  • Syntaxic highlight
  • Code editor/visual editor
  • Dark mode
  • RSS feed of cloud.google.com Text to Speech releases

Installation

  1. Copy files from this repository into your project

  2. Run composer install

  3. Follow these steps to configure and activate your api and credentials

  4. Copy the content of your credentials file into PROJECT_NAME.credentials.json (replace PROJECT_NAME with your actual project complicated and secret name)

  5. Copy .env.example to .env and set GOOGLE_APPLICATION_CREDENTIALS to the PROJECT_NAME.credentials.json actual filename

Warning

Please be aware that with this code your credentials may be exposed. If you plan to make this public, you should protect them by renaming, moving the json file and block public access (for example with htaccess methods) to .env file and credentials json file.

Contributors

Contribution

Feel free to open issues or PRs!

t2s's People

Contributors

charlieetienne avatar pabloguyez avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

t2s's Issues

a reset button ?

Hello,

Thanks to the developers for this great tool!! Very convenient for me.

Unless I am mistaken, there is no reset button.
Let me explain: to erase the text and start another one, I have to select and erase, or else use the Delete key.
Maybe a ''reset'' button would be useful.

Erreur dans la console

Avec la fonction setSelection (#6), ça provoque parfois des erreurs dans la console qui font buguer l'éditeur :
2021-07-13_10h12_27

Le mode multifile ne fonctionne plus

On doit avoir un pb de détection de sauts de lignes, car ça télécharge un fichier unique au lieu d'un zip...
Peut-être qu'il faut détecter les <p></p> plutôt que les /r/n ?

à priori ça se passe dans ces lignes là :

t2s/process.php

Lines 78 to 84 in 0cf6222

$text = str_replace('"', '', $text);
$text = rtrim($text, '&#13;&#10;');
$text = rtrim($text, '"');
$text = ltrim($text, '"');
$text = stripslashes (str_replace('<p>', "\r\n", $text));
$text = rtrim($text, "\r\n");
$array = preg_split('/\r\n|[\r\n]/', $text);

First file is empty in multifile mode

Un pb lié à #26 : comme on remplace le premier <p> par un saut de ligne on se retrouve avec un saut de ligne au tout début avant le contenu (j'imagine). Cela donne un mp3 vide. J'imagine qu'on peut fix ça avec un array_map après la ligne 84 où on testerait si le texte est vide

Refaire fonctionner le focus et la navigation au clavier pour l'éditeur

A l'origine (avant l'éditeur Quill.js quand on utilisait une simple textarea), on pouvait naviguer au clavier avec tab : Lorsqu'on arrive sur la page, le champ nom de fichier a le focus et on peut écrire dedans. C'est permis par l'attribut tabindex="1".

La textarea avait tabindex="2", ce qui permettait en appuyant une fois sur tab d'aller écrire directement dans la textarea.

La div #text, qui sert de conteneur à Quill.js possède aussi ce tabindex="2", mais ça ne donne pas le focus à l'éditeur.

=> Trouver le moyen de donner le focus à l'éditeur avec tab.

To Do list

  • Rendre Open Source notre éditeur SSML une fois terminé ?
  • Rendre "actif" le bouton de la toolbar si le format de la sélection ou au curseur correspond (classe ?)
  • Déplacer style_to_code dans richVoiceEditor.js ou bien dans un nouveau fichier richVoiceEditorHelpers.js pour bien séparer les responsabilités ; ça a tout à voir avec l'éditeur, et le main.js ne devrait s'occuper que des choses générales.
  • Ajouter des raccourcis clavier pour chaque fonctionnalités de la toolbar
  • Effacer le format courant lors de l'appui sur la flèche de droite quand on est dans un format
  • Ajouter un bouton qui permet d'afficher le code dans une popup (la coloration syntaxique avec highlight.js ou prism.js serait un must) - Voir #6
  • Pour le fun : Créer un dark mode qui switche automatiquement en fonction des paramètres de la machine (ea8acbd)
  • Pour aller plus loin : Trouver le moyen de rajouter notre propre "attributor" à Quill pour ne plus être limité par les formats disponibles. Voir #7
  • Passer rate (ou pitch, au choix) en background-color pour pouvoir utiliser rate et pitch en même temps
  • Ajouter un bouton "Effacer les formats" avec une icone gomme
  • Trouver un moyen de différencier visuellement si on est sur du rate="slow" ou du rate="fast" par exemple. (mon idée serait avec des selecteurs :before et des icones lièvre ou tortue)

Réfléchir à un moyen d'incrémenter un numéro dans le nom de fichier

Souvent, lorsque je travaille sur des projets, je nomme mes fichiers audio (champ nom du fichier) de cette façon : {numéro de la scène}.{numéro de la diapositive}.{numéro du fichier audio}.mp3

Par exemple 4.14.3.mp3

Je change souvent le dernier numéro (presque à chaque phrase) pour avoir un nouveau fichier (car plus facile pour les corrections si on a des audios de 10 secondes que des audios de 1:30min)

Pour gagner en productivité, j'aimerais pouvoir incrémenter le dernier numéro, voire les autres (?), de façon simple, par ex. en appuyant sur flèche du haut/flèche du bas.

On peut imaginer aussi de pouvoir le faire au scroll comme dans la suite Adobe... à voir.

Je n'ai pas trop envie d'avoir des petites flèches pour ne pas surcharger l'UI.

ERROR : MP3 header parse error

Hello,
When trying to work with the MP3 files produced in the TAGMP3.DE tool, I realize that most of the files (in fact all but one of the 70 I have already created) do not include duration information. of the track (in Headers or metadata).
Indeed, the files are tagged with "ERROR: MP3 header parse error".
Would it be possible to correct this error and provide, in each MP3 file, the duration information (in my case, the ideal would be to have the duration with tenths of a second - because my files are quite short - but if it's rounded up to the upper integer (the upper second), it's OK).
On the forum thread (https://community.mp3tag.de/t/display-length-in-column/59930), a tool http://mp3diags.sourceforge.net/ is mentioned).
What do you think ?

Les balises SSML ne sont pas systématiquement sauvegardées dans le cookie

Si le texte ne change pas notamment, mais j'ai l'impression que c'est variable, quand on clique sur écouter par exemple, ça ne sauve pas les tags SSML dans le cookie, seul le texte est sauvegardé.

Il faut peut-être trigger un changement de contenu ?

Pour reproduire :

  1. Avoir du texte sauvegardé dans le cookie
  2. Rafraichir la page
  3. Sélectionner un mot et lui appliquer un format, mais sans modifier le texte
  4. Cliquer sur Ecouter
  5. Rafraichir la page

Supprimer le format si null ou false

Parfois rate ou pitch peuvent prendre la valeur false ou null, et se retrouver dans les attributs. Ce n'est pas gênant pour le SSML, mais pour le CSS c'est un peu compliqué à gérer. Il faut supprimer ces formats pour qu'ils ne se retrouvent pas dans les attributs.

Trouver le moyen d'ajouter notre propre attributor à Quill.js

Se calquer sur l'attributor "color" de sorte qu'on puisse faire un truc comme :

let EmphasisClass = Quill.import('attributors/class/emphasis');
Quill.register(EmphasisClass , true);

et utiliser ensuite

quill.format('emphasis', true);

Voir doc officielle, stackoverflow, etc.

NB : je ne sais pas si c'est possible, peut-être pas !

Le CSS ajouté par le JS est ajouté à chaque evt

t2s/assets/js/main.js

Lines 63 to 106 in 7dc619b

function multifile() {
const style = document.createElement('style');
if ($('#multiple').prop('checked')){
document.getElementsByTagName('body')[0].classList.add('multiple_files');
}
else {
document.getElementsByTagName('body')[0].classList.remove('multiple_files');
}
let filename_value = filename.val();
if (filename.val() === ''){
filename_value = uniqid;
}
style.innerHTML = `
.multiple_files .ql-editor{
counter-reset: filenumber;
}
.multiple_files .ql-editor p {
border: 1px solid hsl(250, 100%, 42%);
border-radius: 5px;
margin-bottom: 34px;
clear: both;
position: relative;
padding: 5px;
margin-top: 24px;
}
.multiple_files .ql-editor p:before {
color: hsl(250, 100%, 20%);
content: "` + filename_value + `." counter(filenumber) '.mp3';
width: auto;
height: 24px;
margin: -29px 5px 5px 0;
position: absolute;
display: inline-block;
clear: both;
border: 1px solid hsl(250, 71%, 50%);
background: hsl(250, 75%, 97%);
padding: 3px;
font-size: 11px;
border-radius: 3px 3px 0 0;
counter-increment: filenumber;
}
`;
document.head.appendChild(style);
}

Ajouter des raccourcis clavier pour chaque fonctionnalité de la toolbar

  • Ctrl + B => <emphasis level="strong">text</emphasis>
  • Ctrl + Shift + F => <prosody rate="fast"><prosody pitch="high">text</prosody></prosody>
  • Ctrl + Shift + S => <prosody rate="slow"><prosody pitch="low">text</prosody></prosody>
  • Ctrl + P => <say-as interpret-as="spell-out">text</say-as>
  • Ctrl + Shift + 1 => <break level="x-weak"/>
  • Ctrl + Shift + 2 => <break level="weak"/>
  • Ctrl + Shift + 3 => <break level="strong"/>
  • Ctrl + Shift + 4 => <break level="x-strong"/>

Problème lors de certaines manip dans l'éditeur de code

Quand on veut "wrapper" un texte qui comporte déjà des balises ça ne marche pas et ça met des balises un peu partout (#6)

Si je sélectionne <emphasis level="strong">Une ligne de texte</emphasis> dans l'éditeur de code et que je veut lui appliquer le format spellout par ex. ça détecte mal les offset start et length et ça me met des balises spellout un peu partout
2021-07-13_10h23_03
2021-07-13_10h23_26
2021-07-13_10h23_42
2021-07-13_10h24_22

Mode plein écran

Quand on a beaucoup de texte, c'est pas super ergonomique :
Idée : Ajouter un bouton plein écran qui serait tout à droite de la toolbar ; au clic, on ajouterait/supprimerait simplement une classe fullscreen au body.

De là, avec un peu de CSS, on pourrait aisément modifier la taille et la position des éléments.

Ping to google

Hello,
I have the feeling that :

  • If I click on "Listen" first, the tool asks Google
  • If then I click on Download, I have the impression that it queries Google again, then it downloads.

Am I wrong ?
If so, it's a shame, because it doubles the consumption of the Google API.

Also, I noticed something that isn't quite a bug. Breeding:

  • I have 3 texts/recordings to produce.
  • For the first, I first click on "Listen", then on "Download"
  • For the second, I only click on "Download"
  • For the third, if this time I want to listen using the playback bar (the one above the "listen" button), the tool plays me recording n° 1.
    In other words, in the playback bar, the tool remembers the last recording that was produced by the "listen" button, but not really the last one that was requested from Google.

Supprimer les fichiers vides en mode multifile

Quand on fait plusieurs fois Entrée, ça va créer des <p></p> vides et en mode multifile, ça nous indique des fichiers supplémentaires pour chaque <p>.

Trouver un moyen pour qu'ils ne s'affichent pas...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.