4

Indagando en la web encontré dos opciones

  • ResponsiveVoiceJS
  • PHP y vozME

Un ejemplo sencillo de ResponsiveVoiceJS

$("a.say").on('click', function(e){
  e.preventDefault();
  var text = $("input[name=text]").val();
  responsiveVoice.speak(text,"Spanish Female");
  text=encodeURIComponent(text);
  var url="http://"
})
   <script src="http://code.jquery.com/jquery-1.12.1.js"></script>
   <script src="http://code.responsivevoice.org/responsivevoice.js"></script>

 <input type="text" name="text">
  <a href="#" class="say">Escuchar Texto!</a>
  <audio src="" hidden class=speech></audio>

La más relevante es ResponsiveVoiceJS se ve algo simple y sencillo.

El único problema es que lee todo el texto, lo ideal es deletrear el texto para una imagen captcha.

Esta es la session del captcha donde obtengo el valor de los caracteres.

$_SESSION['secure'] = '';

captcha.php

<?php
session_start();
$image = imagecreatetruecolor(120,46); 
$white = imagecolorallocatealpha($image, 0, 0, 0, 0);
$black = imagecolorallocate($image,rand(78,181),rand(163,35),rand(36,7));
imagefill($image,0,0,$white);

imagerectangle($image,1,1,99,39 ,$white);
$source = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
$first = $source[mt_rand(0,61)];
$second = $source[mt_rand(0,61)];
$third = $source[mt_rand(0,61)];
$fourth = $source[mt_rand(0,61)];
$_SESSION['secure'] = $first.$second.$third.$fourth;
imagettftext($image,25,mt_rand(-40,30),10,30,$black,"Quixley.ttf",$first);
imagettftext($image,25,mt_rand(-40,30),30,30,$black,"AntykwaBold.ttf",$second);
imagettftext($image,25,mt_rand(-40,30),50,30,$black,"Ding-DongDaddyO.ttf",$third);
imagettftext($image,25,mt_rand(-40,30),70,30,$black,"Duality.ttf",$fourth);
header("content-type:image/png");
imagepng($image);
?>

la validación del captcha

  <div id="captcha">
    <img src="captcha.php" name="secure" id="imgsecure"/>
    <input name="secure" type="text" placeholder="Por favor, ingrese el texto que figura la imagen.">
    <div class="update"><a href="javascript:reloadCaptcha();">Actualizar código captcha</a></div>
  </div>

Ahora mi pregunta?

Como reproduzco el texto que genera la imagen captcha a voz tomando en cuenta los detalles mencionados.

introducir la descripción de la imagen aquí

2
  • Mira este link... un captcha con voz en PHP/JS... a veces no hay que reinventar la rueda una y otra vez ;) el 3 ene. 2017 a las 21:04
  • No conozco estos plugins...pero supongo que tienes que formar el audio en el lado del servidor para luego descargarlo....pero quizás puedas aprender como lo hacen ellos... mirando su código ;) ... el 3 ene. 2017 a las 21:15

3 respuestas 3

1

No creo que esto es lo más ideal o seguro para el sistema del captcha, ya que tendrías que pasar el contenido del captcha, ósea la palabra de la imagen al ResponsiveVoiceJS y se conoce que una vez en el lado del cliente... la palabra estará opuesto a usuarios sospechosos...

Pero te dejo como se podría deletrear el texto:

$("a.say").on('click', function(e){
  
  e.preventDefault();
  
  var text = $("input[name=text]").prop('value');
  text = text.split('');
  
  $.each(text, function(i, item) {        
    responsiveVoice.speak(item, "Spanish Female");
  });  
})
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>

<!-- Ejemplo para pasar el valor del $_SESSION['secure'] -->

<!-- <input type="hidden" name="text" value="<?php echo $_SESSION['secure']; ?>"> -->


<input type="hidden" name="text" value="globo">
<img src="https://i.stack.imgur.com/0lFwO.png">
<a href="#" class="say">Escuchar Texto Imágen!</a>
<audio src="" hidden class=speech></audio>

3
  • Solo se escucha la última letra. el 5 ene. 2017 a las 17:27
  • @JoseHermosillaRodrigo - deberías explicar en cual entorno no te funciona... porque funciona en chrome, ff y safari el 5 ene. 2017 a las 17:34
  • Hola @aldanux Ya se que me habías dicho que por motivos de seguridad no es recomendable pero cómo adaptaría este código al código captcha para reproducir la imagen a voz?
    – Otto
    el 6 ene. 2017 a las 0:06
0

También puedes considerar usar la API SpeechSynthesisUtterance (Edge+),

Así por ejemplo:

  var text = document.getElementById('text');
  var voice = document.getElementById('voice');
  var speek = document.getElementById('speek');
  var spell = document.getElementById('spell');
  var msg = new SpeechSynthesisUtterance();

  var voices;
  speechSynthesis.onvoiceschanged = function() {
    voices = window.speechSynthesis.getVoices();
    voices.forEach(function (v, idx) {
      var opt = document.createElement('option');
      opt.innerText = v.name;
      opt.value = idx;
      voice.appendChild(opt);
    });
  };

  speek.addEventListener('click', function(){
    msg.text = text.value;
    msg.voice = voices[voice.value];
    window.speechSynthesis.speak(msg);
  });

  // Deletrear
  spell.addEventListener('click', function(){
    msg.text = text.value.split('').join('-');
    msg.voice = voices[voice.value];
    msg.rate = .2; // Velocidad de voz
    window.speechSynthesis.speak(msg);
  });
<input type="text" id="text" value="Hola" /><select id="voice"></select><button id="speek">Hablar</button><button id="spell">Deletrar</button>

2
  • Interesante la API a pesar de estar aprueba funciona perfectamente. Me habían recomendado que por medidas de seguridad nos era recomendable utilizarla para reproducir la imagen del captcha a voz. Pero cómo adaptaría este código al código captcha para reproducir la imagen a voz?
    – Otto
    el 6 ene. 2017 a las 0:09
  • @J.Doe, no lo tomes a mal, pero básicamente nos estas pidiendo que lo hagamos por vos. Intenta hacer algunas pruebas primero, y pública tu código hasta donde llegues planteando los problemas que te surjan.
    – Marcos
    el 6 ene. 2017 a las 12:18
0

Separa las letras con espacios, así deletreará:

$("a.say").on('click', function(e){
  e.preventDefault();
  var text = $("input[name=text]").val();
      text = text.split('').join('  ')
  responsiveVoice.speak(text,"Spanish Female");
  text=encodeURIComponent(text);
  var url="http://"
})
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
   <script src="http://code.responsivevoice.org/responsivevoice.js"></script>

 <input type="text" name="text">
  <a href="#" class="say">Escuchar Texto!</a>
  <audio src="" hidden class=speech></audio>

Para controlar el tiempo en que se dicen las letras, puedes usar promises:

$("a.say").on('click', function(e){
  e.preventDefault();
  var text = $("input[name=text]").val();
  deletrea(text)
})

function deletrea(palabra){
  palabra.split('').reduce(function(promise, letra){
    console.log(letra);
    return promise.then(function(){
      responsiveVoice.speak(letra,"Spanish Female");
      return esperar(1500);
    })
  }, Promise.resolve())
}

function esperar(ms){
  return new Promise(function(resolve, reject){
    setTimeout(resolve, ms)
  })
}
<script src="http://code.jquery.com/jquery-1.12.1.js"></script>
   <script src="http://code.responsivevoice.org/responsivevoice.js"></script>

 <input type="text" name="text">
  <a href="#" class="say">Escuchar Texto!</a>
  <audio src="" hidden class=speech></audio>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.