Cacher is the code snippet organizer for pro developers

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

header {
  margin: 0;
  padding: 1em;
  display: block;
  background: #fff;
  color: #333;
}

section {
  display: block;
  margin: 0;
  padding: 1em;
  width: 100%;
  background: #eee;
  color: black;
}

footer {
  display: block;
  margin: 0;
  padding: 0.2em;
  text-align: center;
  background: #fff;
  color: #333;
}

pre {
  display: block;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 12px;
  line-height: 1.5;
  padding: 0.5em;
  font-family: "consolas", monospace;
  background: #fff;
  color: #777;
}

[data-voice] {
  position: relative;
  transition: all 500ms ease;
}

[data-voice]:hover {
  border-bottom: 1px solid #f55;
  transition: all 500ms ease;
  cursor: pointer;
}

[data-voice]:before {
  content: "Click to listen";
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 300;
  font-family: monospace;
  line-height: 1;
  background-color: #F55;
  border: 1px solid #CA4444;
  color: #FFF;
  transition: all 500ms ease;
}

function speak(textToSpeak) {
  var s = new SpeechSynthesisUtterance();
    s.volume = 0.8;
    s.rate = 1;
    s.pitch = 1; 
    s.lang = 'es-ES';
  s.text = textToSpeak;
  window.speechSynthesis.speak(s);
}
function test(element){
  element.addEventListener('click', function() {
    speak(this.getAttribute('data-voice'));
  });
}
var voice = document.querySelectorAll('[data-voice]');
Array.prototype.forEach.call(voice, function(obj, index) {
  test(obj);
});

<header>
  <h1>Experimental audio test</h1>
</header>
<section>
  <p data-voice="Hola, Este es un experimento  de audio. Hi, this is a audio experiment">Click me to listen.</p>
  
  <pre data-voice="Primero creamos la funcion para hablar,First, create function to speak">
function speak(textToSpeak) {
  var s = new SpeechSynthesisUtterance();
    s.volume = 0.8;
    s.rate = 1;
    s.pitch = 1; 
    s.lang = 'es-ES';
  s.text = textToSpeak;
  window.speechSynthesis.speak(s);
}
  </pre>
  
  <pre data-voice="Ahora creamos una funcion para escuchar al hacer click. Now, create function for listen on click">
function test(element){
  element.addEventListener('click', function() {
    speak(this.getAttribute('data-voice'));
  });
}
  </pre>
  
<pre data-voice="Ahora, selecionamos todos los elementos con el atributo data voice y añadimos la funcion. Now, select all elements with attribute data voice , and add function">
var voice = document.querySelectorAll('[data-voice]');
Array.prototype.forEach.call(voice, function(obj, index) {
  test(obj);
});
</pre>  
  
  
  
</section>
<footer>
  <p>Made with ♥ @nakome</p>
</footer>