add move audioTitleBar -> audioVisualizer

src/assets/alphabet.js

@@ -0,0 +1,215 @@
+
+export const alphabet = {
+
+ 'A':
+  "=-=-=as=-\n"
++ "==-   =--\n"
++ "===   ==-\n"
++ "=-==-=-=-\n"
++ "=-=   ==-\n"
++ "=--   =-=\n",
+
+'B':
+  "-=-====- \n"
++ "=-=   =-=\n"
++ "=-===-== \n"
++ "===   =--\n"
++ "-==   -=-\n"
++ "==-=-==  \n",
+
+'C':
+  "  ==-==  \n"
++ " =-=  =-=\n"
++ "=--      \n"
++ "=--      \n"
++ " =-=  =-=\n"
++ "  =-=-=  \n",
+
+'D':
+  "===-=-   \n"
++ "=--=-=-= \n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ "==-=-=-= \n"
++ "==--=-   \n",
+
+'E':
+  "=-=-=--=-\n"
++ "=-****** \n"
++ "-=_______\n"
++ "=-******^\n"
++ "=-______ \n"
++ "=-=-=-=-=\n",
+
+'F':
+  "=-=-=--=-\n"
++ "=--*^****\n"
++ "-=-=-=--=\n"
++ "-=-*^****\n"
++ "=--      \n"
++ "=-=      \n",
+
+'G':
+  "  =-=-=  \n"
++ " =-****-=\n"
++ "=-=      \n"
++ "-=-  =-==\n"
++ " =-___-= \n"
++ "  =-=-=  \n",
+
+'H':
+  "=-=   -=-\n"
++ "=-=   =-=\n"
++ "=-==-=-=-\n"
++ "=-==-=-=-\n"
++ "=-=   -=-\n"
++ "=-=   =--\n",
+
+'I':
+  "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n",
+
+'J':
+  "=-=-==-==\n"
++ "=-=-=-=-=\n"
++ "      =-=\n"
++ "=-    =-=\n"
++ "=-=- -=-=\n"
++ " ==-===- \n",
+
+'K':
+  "=-=   =-=\n"
++ "=-=  =-= \n"
++ "=-==-==  \n"
++ "=-==-==  \n"
++ "=--  =-= \n"
++ "=-=   =-=\n",
+
+'L':
+  "=-=      \n"
++ "=-=      \n"
++ "=-=      \n"
++ "=-=      \n"
++ "=-=-=--=-\n"
++ "=--=-==-=\n",
+
+'M':
+  "-=-   -=-\n"
++ "=-=- -=-=\n"
++ "=-- ^ -==\n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ "=-=   =-=\n",
+
+'N':
+  "=-=   =-=\n"
++ "=-==  =-=\n"
++ "==--- -==\n"
++ "=-==--=-=\n"
++ "=-= --=-=\n"
++ "===  ==-=\n",
+
+'O':
+  "  =-=-=  \n"
++ " =-=-=-= \n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ " =-=-=== \n"
++ "  =-=--  \n",
+
+'P':
+  "=-=-=-== \n"
++ "=-=***===\n"
++ "=-=-=-=- \n"
++ "=-=*^**  \n"
++ "=-=      \n"
++ "-==      \n",
+
+'R':
+  "=-==-=-= \n"
++ "=-=***==-\n"
++ "-=-==-=- \n"
++ "-=- -=-  \n"
++ "=-=  -== \n"
++ "=-=   -==\n",
+
+'S':
+  "  =-=-=- \n"
++ "===    -=\n"
++ "  =-=-   \n"
++ "   ====- \n"
++ "=-    =-=\n"
++ " =-=-=-= \n",
+
+'T':
+  "=-=-=-=-=\n"
++ "=-=-=-=-=\n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n",
+
+'U':
+  "=-=   =-=\n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ "-=-==-==-\n"
++ " -==-=-- \n",
+
+'W':
+  "=-=   =-=\n"
++ "=-=   =-=\n"
++ "=--   -==\n"
++ "=-= _ =-=\n"
++ "=-== ==-=\n"
++ "-=-   -=-\n",
+
+'Q':
+  "  =-=-=  \n"
++ " =-=-=-= \n"
++ "=-=   =-=\n"
++ "=-=   =-=\n"
++ " =-=-\\- \n"
++ "  =-=-\\ \n",
+
+'V':
+  "=-=   =-=\n"
++ "=-=   =-=\n"
++ "--=   =--\n"
++ "--=   =--\n"
++ " --= =-- \n"
++ "   -=-   \n",
+
+'X':
+  "=-=   =-=\n"
++ " =-= =-= \n"
++ "  =-==   \n"
++ "  ==-=   \n"
++ " =-= =-= \n"
++ "=-=   =-=\n",
+
+'Y':
+  "=-=   =-=\n"
++ "--=   =--\n"
++ " --= =-- \n"
++ "   =-=   \n"
++ "   =-=   \n"
++ "   =-=   \n",
+
+'Z': 
+  "=-=-=-=-=\n"
++ "=-=-===- \n"
++ "    ==-  \n"
++ "  =-=    \n"
++ " -=-=-=-=\n"
++ "=-=-=--=-\n",
+
+' ':
+ "\n\n\n",
+
+};

src/assets/alphabetASCII

@@ -0,0 +1,181 @@
+=-=-=as=-
+==-   =-'
+===   ==-
+=-==-=-=-
+=-=   ==-
+=--   =-=
+
+-=-====-
+=-=   =-=
+=-===-==
+===   =--
+-==   -=-
+==-=-==
+
+  ==-==
+ =-=  =-=
+=--   
+=--   
+ =-=  =-=
+  =-=-=
+
+===-=-
+=--=-=-=
+=-=   =-=
+=-=   =-=
+==-=-=-=
+==--=-
+
+=-=-=--=-
+=-"'""''
+-=_______
+=-'"""'*^
+=-______
+=-=-=-=-=
+
+=-=-=--=-
+=--*^''"'
+-=-=-=--=
+-=-*^'"''
+=--
+=-=
+
+  =-=-=
+ =-'""'-=
+=-=
+-=-  =-==
+ =-___-=
+  =-=-=
+
+=-=   -=-
+=-=   =-=
+=-==-=-=-
+=-==-=-=-
+=-=   -=-
+=-=   =--
+
+   =-=
+   =-=
+   =-=
+   =-=
+   =-=
+   =-=
+
+=-=-==-==
+=-=-=-=-=
+      =-=
+=-    =-=
+=-=- -=-=
+ ==-===-
+
+=-=   =-=
+=-=  =-=
+=-==-==
+=-==-==
+=--  =-=
+=-=   =-=
+
+=-=
+=-=
+=-=
+=-=
+=-=-=--=-
+=--=-==-=
+
+-=-   -=-
+=-=- -=-=
+=-- ^ -==
+=-=   =-=
+=-=   =-=
+=-=   =-=
+
+=-=   =-=
+=-==  =-=
+==--- -==
+=-==--=-=
+=-= --=-=
+===  ==-=
+
+  =-=-=  
+ =-=-=-= 
+=-=   =-=
+=-=   =-=
+ =-=-=== 
+  =-=--  
+
+=-=-=-==
+=-='"'===
+=-=-=-=-
+=-=*^'"
+=-=
+-==
+
+=-==-=-=
+=-='"'==-
+-=-==-=-
+-=- -=-
+=-=  -==
+=-=   -==
+
+  =-=-=-  
+===    -=
+  =-=- 
+   ====-
+=-    =-=
+ =-=-=-=
+
+=-=-=-=-=
+=-=-=-=-=
+   =-=   
+   =-=
+   =-=
+   =-=
+
+=-=   =-=
+=-=   =-=
+=-=   =-=
+=-=   =-=
+-=-==-==-
+ -==-=--
+
+=-=   =-=
+=-=   =-=
+=--   -==
+=-= _ =-=
+=-== ==-=
+-=-   -=-
+
+  =-=-=  
+ =-=-=-= 
+=-=   =-=
+=-=   =-=
+ =-=-\\- 
+  =-=-\\  
+
+=-=   =-=
+=-=   =-=
+--=   =--
+--=   =-- 
+ --= =--
+   -=-
+
+=-=   =-=
+ =-= =-=
+  =-==
+  ==-=
+ =-= =-=
+=-=   =-=
+
+=-=   =-=
+--=   =--
+ --= =--
+   =-=
+   =-=
+   =-=
+
+=-=-=-=-=
+=-=-===-
+    ==-
+  =-=
+ -=-=-=-=
+=-=-=--=-

src/pages/indexInterface.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react'
 
 import '../styles/audioVisualizer.scss'
+import { alphabet } from '../assets/alphabet'
 import audioTest from '../images/audioTest.mp3'
 
+
 const IndexInterface = () => {
 
     const [play, setPlay] = useState(false)
@@ -154,11 +156,12 @@ const IndexInterface = () => {
                     lastProgressValue = progress
                 }
             }
-        }
+        }    
 
-        audio.play();
+        audio.play()
-        renderFrame();
+        renderFrame()
-        console.log('height ' + window.innerHeight + ', width ' + window.innerWidth)
+        await viewTitleAudio()
+        moveTitleAudio()
         await progressBarAudio()
     }
 
@@ -187,6 +190,36 @@ const IndexInterface = () => {
 
     }
 
+    const viewTitleAudio = async() => {
+        let title = 'test audio x test audio'
+        title = title.toUpperCase()
+        let titleASCII = [];
+        let i
+        for (i = 0; i < title.length; i++) {
+            titleASCII[i] = alphabet[title[i]]
+            titleASCII[i] += '\n'
+            titleASCII[i].replace(',', '')
+        }
+        let titleASCIIFull = titleASCII.toString()
+        while (i > 0) {
+            titleASCIIFull = titleASCIIFull.replace(',','')
+            i--
+        }
+        document.getElementById('audioTitle').innerText = titleASCIIFull
+    }
+
+    const moveTitleAudio = async() => {
+        let title = document.getElementById('audioTitle')
+        let different = window.innerHeight - title.clientHeight
+        await sleep(2000)
+        while (true) {
+            title.style = 'margin-top: ' + different + 'px;'
+            await sleep(12000)
+            title.style = 'margin-top: 10px;'
+            await sleep(12000)
+        }
+    }
+
     return (
         <div id='audioVisualizerDiv'>
             <div id='audioMenu'>
@@ -226,6 +259,8 @@ const IndexInterface = () => {
             </div>
             <canvas id='canvas'>
             </canvas>
+            <pre id='audioTitle'>
+            </pre>
             <audio id='audio'>
             </audio>
         </div>

src/styles/audioVisualizer.scss

@@ -1,6 +1,7 @@
 #audioVisualizerDiv {
     height: 100%;
     width: 100%;
+    overflow: hidden;
 
     #audioMenu {
         height: 500px;
@@ -24,6 +25,25 @@
         z-index: 0;
     }
 
+    #audioTitle {
+        width: 50px;
+        position: fixed;
+        left: 310px;
+
+        display: inline-block;
+        font-family: monospace;
+        vertical-align: baseline;
+        text-rendering: optimizeLegibility;
+        white-space: pre;
+        word-wrap: break-word;
+        text-align: center;
+
+        letter-spacing: -0.2em;
+        line-height: 0.8em;
+
+        transition-duration: 10s;
+    }
+
     #audio {
         top: 90%;
         left: 300px;