Ui improvements and add txt2audio lib to generate animals names

package.json

@@ -66,6 +66,7 @@
     "yurnalist": "^2.0.0"
   },
   "dependencies": {
-    "serviceworker-webpack-plugin": "^1.0.1"
+    "serviceworker-webpack-plugin": "^1.0.1",
+    "txt2audio": "^1.2.0"
   }
 }

src/index.html

@@ -64,6 +64,12 @@ <h2 class="name">Welcome</h2>
           </div>
         </section>
       </div>
+
+      <section class="credits-button">
+        <h3 class="cta">Credits</h3>
+      </section>
+
+      <section class="credits"></section>
     </section>
   </body>
 </html>

src/js/tasks/generate-names-audio-files.js

@@ -1,56 +1,18 @@
-const textToSpeech = require('@google-cloud/text-to-speech')
-const fs = require('fs')
-const util = require('util')
-const animals = require('../animals.json')
-const report = require('yurnalist')
+const Txt2Audio = require('txt2audio')
 const path = require('path')
-const ffmpeg = require('fluent-ffmpeg')
-
-const client = new textToSpeech.TextToSpeechClient()
-
-const convertAudioToOgg = async (animal, folder) => {
-  return new Promise(async (resolve, reject) => {
-    return ffmpeg()
-      .input(`${folder}/${animal}.mp3`)
-      .toFormat('ogg')
-      .output(`${folder}/${animal}.ogg`)
-      .on('end', resolve)
-      .on('error', reject)
-      .run()
-  })
-}
-
-const generateAudioFile = async animal => {
-  const text = animal
-  const folder = path.resolve(__dirname, '..', '..', 'audio', 'names')
-  const request = {
-    input: { text },
-    voice: { languageCode: 'en-US-Standard-C', ssmlGender: 'FEMALE' },
-    audioConfig: { audioEncoding: 'MP3' }
-  }
-
-  const spinner = report.activity()
-  spinner.tick(`Fetching audio for ${animal}`)
 
-  try {
-    const [response] = await client.synthesizeSpeech(request)
-    const writeFile = util.promisify(fs.writeFile)
-    const fileNameMp3 = `${animal}.mp3`
-
-    await writeFile(`${folder}/${fileNameMp3}`, response.audioContent, 'binary')
-    await convertAudioToOgg(animal, folder)
-    report.success(`mp3 and ogg files for ${animal}`)
-  } catch (err) {
-    report.error(err)
-  }
-
-  spinner.end()
-}
-
-report.info('Fetching audio files...')
-console.log('')
+const animals = require('../animals.json')
 
 animals.forEach(async animal => {
   const animalName = animal.name.toLowerCase()
-  await generateAudioFile(animalName)
+  const txt2audio = Txt2Audio({
+    text: animalName,
+    filename: animalName,
+    path: path.resolve(__dirname, '..', '..', 'audio', 'names'),
+    gender: 'female',
+    ogg: true,
+    debug: true
+  })
+
+  await txt2audio.generateAudio()
 })

src/sass/_credits.scss

@@ -0,0 +1,7 @@
+.credits {
+  position: absolute;
+  bottom: 0;
+  display: inline-block;
+  color: #fafafa;
+  background: #222;
+}

src/sass/app.scss

@@ -12,6 +12,7 @@
 
 @import './intro';
 @import './animals';
+@import './credits';
 
 *,
 *:before,
@@ -34,7 +35,7 @@ html {
 body {
   height: 100%;
   font: normal normal normal 16px/1.4 $font-family-base;
-  background-image: $body-default-background-color;
+  background-color: $body-default-background-color;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;