Как обращать текст image в голос с jQuery/JavaScript?

Расследуя в Вебе я нашел два выбора

  • ResponsiveVoiceJS
  • PHP и vozME

Простой пример 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>

Самым значимым является ResponsiveVoiceJS оказывается немного простым и простым.

Единственная проблема состоит в том, что он читает весь текст, идеальное состоит в том, чтобы читать по складам текст для изображения captcha.

Это session captcha, где я получаю стоимость символов.

$_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);
?>

утверждение 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>

Сейчас мой вопрос?

Поскольку я воспроизвожу текст, который производит изображение captcha в голос принимая во внимание упомянутые детали.

introducir la descripción de la imagen aquí

4
задан 04.01.2017, 04:08
0 ответов

Я не думаю, что это больше идеал или страховка для системы captcha, так как ты был бы должен перемещать контент captcha, костлявая слово изображения в ResponsiveVoiceJS и известно, что однажды в стороне клиента... слово будет противоположным подозрительным пользователям...

Но я оставляю тебя, как было бы возможно читать по складам текст:

$("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>
1
ответ дан 03.12.2019, 17:53
  • 1
    Только слушается ú ltima буква. –  05.01.2017, 19:27
  • 2
    @JoseHermosillaRodrigo - deberí туз объяснять в которой среде ты не функционирует..., потому что оно функционирует в chrome, ff и safari –  05.01.2017, 19:34
  • 3
    Привет @aldanux Уже, который я habí вышеупомянутый эксперт, который по причине безопасности не является рекомендуемым, но có mo adaptarí в этот có говорит в có я говорю captcha, чтобы воспроизводить изображение в голос? –  06.01.2017, 02:06

Также ты можешь считать использовать API SpeechSynthesisUtterance (Edge+),

Так например:

  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>
0
ответ дан 03.12.2019, 17:53
  • 1
    Интересный API несмотря на то, что, принимает функционирует верно. Я habí an рекомендуемый, что из-за мер безопасности мы был рекомендуемым, использовать, чтобы воспроизводить изображение captcha в голос. Но có mo adaptarí в этот có говорит в có я говорю captcha, чтобы воспроизводить изображение в голос? –  06.01.2017, 02:09
  • 2
    @J.Doe, не бери это в зло, но bá sicamente ты просишь у нас это делать из-за тебя. Попробуй делать какие-то доказательства сначала, и pú blica твой có я говорю докуда ты прибыл выдвигая проблемы, которые ты появляются. –  06.01.2017, 14:18

Отдели буквы с местом, так он прочитает по складам:

$("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>

Чтобы контролировать время, в котором говорятся буквы, ты можешь использовать 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
ответ дан 03.12.2019, 17:53