diff --git a/src/assets/alphabet.js b/src/assets/alphabet.js new file mode 100644 index 0000000..bca7e24 --- /dev/null +++ b/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", + +}; \ No newline at end of file diff --git a/src/assets/alphabetASCII b/src/assets/alphabetASCII new file mode 100644 index 0000000..d2fb949 --- /dev/null +++ b/src/assets/alphabetASCII @@ -0,0 +1,181 @@ +=-=-=as=- +==- =-' +=== ==- +=-==-=-=- +=-= ==- +=-- =-= + +-=-====- +=-= =-= +=-===-== +=== =-- +-== -=- +==-=-== + + ==-== + =-= =-= +=-- +=-- + =-= =-= + =-=-= + +===-=- +=--=-=-= +=-= =-= +=-= =-= +==-=-=-= +==--=- + +=-=-=--=- +=-"'""'' +-=_______ +=-'"""'*^ +=-______ +=-=-=-=-= + +=-=-=--=- +=--*^''"' +-=-=-=--= +-=-*^'"'' +=-- +=-= + + =-=-= + =-'""'-= +=-= +-=- =-== + =-___-= + =-=-= + +=-= -=- +=-= =-= +=-==-=-=- +=-==-=-=- +=-= -=- +=-= =-- + + =-= + =-= + =-= + =-= + =-= + =-= + +=-=-==-== +=-=-=-=-= + =-= +=- =-= +=-=- -=-= + ==-===- + +=-= =-= +=-= =-= +=-==-== +=-==-== +=-- =-= +=-= =-= + +=-= +=-= +=-= +=-= +=-=-=--=- +=--=-==-= + +-=- -=- +=-=- -=-= +=-- ^ -== +=-= =-= +=-= =-= +=-= =-= + +=-= =-= +=-== =-= +==--- -== +=-==--=-= +=-= --=-= +=== ==-= + + =-=-= + =-=-=-= +=-= =-= +=-= =-= + =-=-=== + =-=-- + +=-=-=-== +=-='"'=== +=-=-=-=- +=-=*^'" +=-= +-== + +=-==-=-= +=-='"'==- +-=-==-=- +-=- -=- +=-= -== +=-= -== + + =-=-=- +=== -= + =-=- + ====- +=- =-= + =-=-=-= + +=-=-=-=-= +=-=-=-=-= + =-= + =-= + =-= + =-= + +=-= =-= +=-= =-= +=-= =-= +=-= =-= +-=-==-==- + -==-=-- + +=-= =-= +=-= =-= +=-- -== +=-= _ =-= +=-== ==-= +-=- -=- + + =-=-= + =-=-=-= +=-= =-= +=-= =-= + =-=-\\- + =-=-\\ + +=-= =-= +=-= =-= +--= =-- +--= =-- + --= =-- + -=- + +=-= =-= + =-= =-= + =-== + ==-= + =-= =-= +=-= =-= + +=-= =-= +--= =-- + --= =-- + =-= + =-= + =-= + +=-=-=-=-= +=-=-===- + ==- + =-= + -=-=-=-= +=-=-=--=- \ No newline at end of file diff --git a/src/pages/indexInterface.js b/src/pages/indexInterface.js index 012c8fd..1cb8d60 100644 --- a/src/pages/indexInterface.js +++ b/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(); - renderFrame(); - console.log('height ' + window.innerHeight + ', width ' + window.innerWidth) + audio.play() + renderFrame() + 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 (
@@ -226,6 +259,8 @@ const IndexInterface = () => {
+
+            
diff --git a/src/styles/audioVisualizer.scss b/src/styles/audioVisualizer.scss index c66470e..dd50534 100644 --- a/src/styles/audioVisualizer.scss +++ b/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;