11. Playing audio

ApayRus · Jun 27, 2022 · c9521ff · c9521ff
1 parent f468ce3
commit c9521ff
Show file tree

Hide file tree

Showing 47 changed files with 28 additions and 0 deletions.
diff --git a/components/Keyboard.js b/components/Keyboard.js
@@ -1,5 +1,21 @@
 import Key from './Key.js'
 
+const getAudioFileName = (keyContent, shiftKey) => {
+	const { main, mainName, shifted, shiftedName, code } = keyContent
+
+	let fileName
+
+	if (shiftKey) {
+		// will be returned 1 of 3 values (if it exist). priority to the first one
+		fileName = shiftedName || shifted || code
+	} else {
+		fileName = mainName || main || code
+	}
+
+	// to have a guarantee, that everything is written in the same (lower) case
+	return fileName.toLowerCase()
+}
+
 const Keyboard = {
 	template: `
 	<div>activeKey: {{activeKey}}</div>
@@ -71,6 +87,13 @@ const Keyboard = {
 			this.keyboardData = keyboardData
 		},
 		setActiveKey(keyContent) {
+			/* add: */
+			const fileName = getAudioFileName(keyContent, this.shiftKey)
+			const audio = new Audio(
+				`./keyboardData/${this.currentLang}/${fileName}.mp3`
+			)
+			audio.play()
+			//
 			this.activeKey = keyContent
 			clearTimeout(this.timeout)
 			this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)

diff --git a/keyboardData/ar.js b/keyboardData/ar.js
@@ -17,26 +17,31 @@ const keyboard = [
 		{
 			code: 'Digit1',
 			main: '١',
+			mainName: '1',
 			shifted: '!'
 		},
 		{
 			code: 'Digit2',
 			main: '٢',
+			mainName: '2',
 			shifted: '@'
 		},
 		{
 			code: 'Digit3',
 			main: '٣',
+			mainName: '3',
 			shifted: '#'
 		},
 		{
 			code: 'Digit4',
 			main: '٤',
+			mainName: '4',
 			shifted: '$'
 		},
 		{
 			code: 'Digit5',
 			main: '٥',
+			mainName: '5',
 			shifted: '٪'
 		}
 	],

diff --git a/keyboardData/ar/1.mp3 b/keyboardData/ar/1.mp3
diff --git a/keyboardData/ar/2.mp3 b/keyboardData/ar/2.mp3
diff --git a/keyboardData/ar/3.mp3 b/keyboardData/ar/3.mp3
diff --git a/keyboardData/ar/4.mp3 b/keyboardData/ar/4.mp3
diff --git a/keyboardData/ar/5.mp3 b/keyboardData/ar/5.mp3
diff --git a/keyboardData/ar/ث.mp3 b/keyboardData/ar/ث.mp3
diff --git a/keyboardData/ar/ص.mp3 b/keyboardData/ar/ص.mp3
diff --git a/keyboardData/ar/ض.mp3 b/keyboardData/ar/ض.mp3
diff --git a/keyboardData/ar/ق.mp3 b/keyboardData/ar/ق.mp3
diff --git a/keyboardData/en/1.mp3 b/keyboardData/en/1.mp3
diff --git a/keyboardData/en/2.mp3 b/keyboardData/en/2.mp3
diff --git a/keyboardData/en/3.mp3 b/keyboardData/en/3.mp3
diff --git a/keyboardData/en/4.mp3 b/keyboardData/en/4.mp3
diff --git a/keyboardData/en/5.mp3 b/keyboardData/en/5.mp3
diff --git a/keyboardData/en/at sign.mp3 b/keyboardData/en/at sign.mp3
diff --git a/keyboardData/en/backslash.mp3 b/keyboardData/en/backslash.mp3
diff --git a/keyboardData/en/dollar sign.mp3 b/keyboardData/en/dollar sign.mp3
diff --git a/keyboardData/en/e.mp3 b/keyboardData/en/e.mp3
diff --git a/keyboardData/en/escape.mp3 b/keyboardData/en/escape.mp3
diff --git a/keyboardData/en/exclamation mark.mp3 b/keyboardData/en/exclamation mark.mp3
diff --git a/keyboardData/en/f1.mp3 b/keyboardData/en/f1.mp3
diff --git a/keyboardData/en/f2.mp3 b/keyboardData/en/f2.mp3
diff --git a/keyboardData/en/f3.mp3 b/keyboardData/en/f3.mp3
diff --git a/keyboardData/en/f4.mp3 b/keyboardData/en/f4.mp3
diff --git a/keyboardData/en/f5.mp3 b/keyboardData/en/f5.mp3
diff --git a/keyboardData/en/f6.mp3 b/keyboardData/en/f6.mp3
diff --git a/keyboardData/en/hash.mp3 b/keyboardData/en/hash.mp3
diff --git a/keyboardData/en/left shift.mp3 b/keyboardData/en/left shift.mp3
diff --git a/keyboardData/en/percent sign.mp3 b/keyboardData/en/percent sign.mp3
diff --git a/keyboardData/en/q.mp3 b/keyboardData/en/q.mp3
diff --git a/keyboardData/en/r.mp3 b/keyboardData/en/r.mp3
diff --git a/keyboardData/en/right shift.mp3 b/keyboardData/en/right shift.mp3
diff --git a/keyboardData/en/tab.mp3 b/keyboardData/en/tab.mp3
diff --git a/keyboardData/en/tilde.mp3 b/keyboardData/en/tilde.mp3
diff --git a/keyboardData/en/w.mp3 b/keyboardData/en/w.mp3
diff --git a/keyboardData/ru/1.mp3 b/keyboardData/ru/1.mp3
diff --git a/keyboardData/ru/2.mp3 b/keyboardData/ru/2.mp3
diff --git a/keyboardData/ru/3.mp3 b/keyboardData/ru/3.mp3
diff --git a/keyboardData/ru/4.mp3 b/keyboardData/ru/4.mp3
diff --git a/keyboardData/ru/5.mp3 b/keyboardData/ru/5.mp3
diff --git a/keyboardData/ru/й.mp3 b/keyboardData/ru/й.mp3
diff --git a/keyboardData/ru/к.mp3 b/keyboardData/ru/к.mp3
diff --git a/keyboardData/ru/у.mp3 b/keyboardData/ru/у.mp3
diff --git a/keyboardData/ru/ц.mp3 b/keyboardData/ru/ц.mp3
diff --git a/keyboardData/ru/ё.mp3 b/keyboardData/ru/ё.mp3