add sound to the typewrite letters

Author: gavimena

.DS_Store

@@ -30,6 +30,7 @@
 			<!--cabecera-->
 			<div id="header-fondo">
       	<h1 class="text-crea"></h1>
+        <audio id="sound-efx" src="styles/typewriter.wav"></audio>
 			</div>
       <button id="button-down" type="button" name="button-down"><a href="index.html#empty-container"><img src="images/expand-button-medium.png" alt="rellena-los-campos"></a></button>
       <div id="empty-container"></div>

index.html

@@ -90,31 +90,36 @@ function viewprev(){
 	}
 
 // //Add typed text.
-// var idx = 0;
-// var txt = 'Crea tu CV con estilo...'.split('');
-// var speed = 150;
-// var waitOnFinish = 3000;
-// var textCreaEl = document.querySelector('.text-crea');
-//
-// document.addEventListener('DOMContentLoaded', typeWriter);
-//
-// function typeWriter() {
-//   if (idx < txt.length) {
-//     var tempTxt = textCreaEl.innerHTML;
-//     textCreaEl.innerHTML += '|';
-//     setTimeout(function() {
-//       textCreaEl.innerHTML = tempTxt + txt[idx];
-//       idx++;
-//       setTimeout(typeWriter, speed);
-//     }, speed/2);
-//   } else {
-//     idx = 0;
-//     setTimeout(function(){
-//       textCreaEl.innerHTML = '';
-//       typeWriter();
-//     }, waitOnFinish);
-//   }
-// }
+var idx = 0;
+var txt = 'Crea tu CV con estilo...'.split('');
+var speed = 150;
+var waitOnFinish = 3000;
+var soundEfx = document.getElementById('sound-efx');
+var textCreaEl = document.querySelector('.text-crea');
+
+document.addEventListener('DOMContentLoaded', typeWriter);
+
+function typeWriter() {
+  if (idx < txt.length) {
+    var tempTxt = textCreaEl.innerHTML;
+    textCreaEl.innerHTML += '|';
+    setTimeout(function() {
+      textCreaEl.innerHTML = tempTxt + txt[idx];
+      idx++;
+      soundEfx.play();
+      setTimeout(typeWriter, speed);
+    }, speed/2);
+  } else {
+    idx = 0;
+    setTimeout(function(){
+      textCreaEl.innerHTML = '';
+      typeWriter();
+    }, waitOnFinish);
+  }
+}
+
+//function sound
+
 
 /*--------------------------- ABOUT FUNCTION---------------------------------------*/
 function saveAbout(){

js/main.js

@@ -25,6 +25,7 @@ font-style: normal;
 font-weight: normal;
 src: local('American Typewriter Bold'), url('ufonts.com_american-typewriter-bold.woff') format('woff');
 }
+
 /*Estilos generales de la sección de desplegables*/
 .title-container {
 	padding-left: 20px;
@@ -97,7 +98,7 @@ src: local('American Typewriter Bold'), url('ufonts.com_american-typewriter-bold
 	border-color:#7DBEA5;
 }
 /*Ocultar secciones*/
-.net-social-hidden, .invisible, #languages-form, #hobbies-form, #read, #travel, #game, #sports, #cinema, #music, #files, #ventana2 {
+.net-social-hidden, .invisible, #languages-form, #hobbies-form, #read, #travel, #game, #sports, #cinema, #music, #files, #ventana2, #sound-efx {
 	display: none;
 }
 .visible {