Laman web bercakap dan API sintesis pertuturan

mata teras

API Sintesis Suara membolehkan laman web memberikan maklumat kepada pengguna dengan membaca teks dengan kuat, yang dapat membantu pengguna yang cacat penglihatan dan pengguna multitasking.
API sintesis suara menyediakan pelbagai kaedah dan atribut untuk menyesuaikan output ucapan, seperti bahasa, kelajuan pertuturan, dan nada. API ini juga termasuk kaedah untuk memulakan, menjeda, menyambung semula, dan menghentikan proses sintesis pertuturan.
Pada masa ini, API sintesis suara hanya disokong sepenuhnya oleh Chrome 33, dan sebahagiannya menyokong pelayar Safari untuk iOS 7. API ini memerlukan sokongan penyemak imbas yang lebih luas untuk digunakan secara praktikal di laman web.

Beberapa minggu yang lalu, saya secara ringkas membincangkan NLP dan teknologi yang berkaitan. Apabila berurusan dengan bahasa semulajadi, dua aspek yang berbeza tetapi pelengkap perlu dipertimbangkan: Pengiktirafan ucapan automatik (ASR) dan Text-to-Speech (TTS). Dalam artikel yang memperkenalkan API Suara Web, saya membincangkan API Voice Web, API yang menyediakan input suara dan keupayaan output teks-ke-ucapan dalam pelayar web. Anda mungkin menyedari bahawa saya hanya meliputi cara melaksanakan pengiktirafan suara di laman web, bukan sintesis suara. Dalam artikel ini, kami akan mengisi jurang ini dan menerangkan API sintesis pertuturan. Pengiktirafan suara memberi peluang untuk memberikan maklumat kepada laman web untuk pengguna, terutama mereka yang kurang upaya. Ingatlah kes -kes penggunaan yang saya tekankan: & gt; Pengguna juga boleh berinteraksi dengan halaman semasa memandu tanpa mengambil mata mereka dari jalan. Tiada satu pun dari ini adalah kes penggunaan remeh.

Oleh itu, kita boleh memikirkannya sebagai saluran dari pengguna ke Laman Web. Sintesis fonetik, sebaliknya, membolehkan laman web memberikan maklumat kepada pengguna dengan membaca teks dengan kuat. Ini amat berguna untuk orang yang mempunyai kebutaan dan selalunya mereka yang mengalami gangguan visual. Terdapat banyak kes penggunaan untuk sintesis pertuturan sebagai pengiktirafan pertuturan. Fikirkan beberapa sistem yang dilaksanakan di dalam kereta baru yang boleh membaca teks atau e -mel anda supaya anda tidak perlu mengambil mata anda dari jalan. Orang yang cacat penglihatan menggunakan komputer biasa dengan perisian seperti Jaws, yang boleh membaca apa -apa yang dipaparkan di desktop, membolehkan mereka melakukan tugas. Aplikasi ini hebat, tetapi mereka mahal. Dengan API Sintesis Suara, kami dapat membantu orang yang menggunakan laman web kami, tanpa mengira sama ada mereka mempunyai kecacatan atau tidak. Sebagai contoh, katakan anda menulis postingan blog (seperti yang saya lakukan sekarang), dan untuk menjadikannya boleh dibaca, anda memisahkannya ke dalam perenggan. Bukankah ini peluang yang baik untuk menggunakan API sintesis pertuturan? Malah, kami boleh memprogram laman web kami supaya ikon pembesar suara muncul di skrin sebaik sahaja pengguna melayang (atau memfokuskan) teks. Jika pengguna mengklik ikon, kami akan memanggil fungsi untuk mensintesis teks perenggan yang diberikan. Ini adalah peningkatan yang tidak remeh. Lebih baik lagi, ia mempunyai overhead yang sangat rendah untuk kami sebagai pemaju dan tidak ada overhead untuk pengguna kami. Pelaksanaan asas konsep ini ditunjukkan di bawah. Demonstrasi API Sintesis Suara Sekarang kita mempunyai pemahaman yang lebih baik tentang kes penggunaan API ini, yang membolehkan kita memahami kaedah dan sifatnya. Kaedah dan atribut sintesis ucapan API mentakrifkan antara muka yang dipanggil SpeechSynthesis, yang strukturnya ditunjukkan di sini. Seperti dalam artikel sebelumnya, artikel ini tidak meliputi semua sifat dan kaedah yang diterangkan dalam spesifikasi. Alasannya ialah terlalu rumit untuk menutupnya dalam satu artikel. Walau bagaimanapun, kami akan menerangkan unsur -unsur yang cukup untuk memudahkan anda memahami unsur -unsur yang tidak dilindungi. ### Objek Objek Objek Pertama yang perlu kita ketahui adalah objek SpeechSynthesisToTheTance. Ia mewakili sebutan (iaitu teks) bahawa synthesizer akan dibaca dengan kuat. Objek ini sangat fleksibel dan boleh disesuaikan dengan pelbagai cara. Sebagai tambahan kepada teks, kita juga boleh menetapkan bahasa, kelajuan pertuturan dan nada yang digunakan untuk menyebut teks. Berikut adalah senarai atributnya: - Teks - rentetan yang menentukan ucapan (teks) yang akan disintesis. -Lang-rentetan yang mewakili bahasa sintesis pertuturan (seperti "en-gb" atau "it-it"). - Voiceuri - rentetan yang menentukan alamat perkhidmatan sintesis ucapan yang ingin digunakan oleh aplikasi web. - VOLUME - Nombor yang mewakili jumlah teks. Ia berkisar dari 0 (minimum) hingga 1 (maksimum) (termasuk), dan nilai lalai ialah 1. - Kadar - Nombor yang mewakili kelajuan ucapan. Ia adalah relatif kepada kadar lalai ucapan. Nilai lalai ialah 1. Nilai 2 bermakna ucapan akan dibaca dengan kuat pada dua kali kelajuan lalai. Nilai di bawah 0.1 atau ke atas 10 tidak dibenarkan. - Pitch - Nombor yang mewakili nada suara. Ia berkisar dari 0 (minimum) hingga 2 (maksimum) (inklusif). Nilai lalai ialah 1. Untuk menafikan objek ini, kita boleh lulus teks untuk disintesis sebagai parameter pembina, atau menghilangkan teks dan menetapkannya kemudian. Kod berikut adalah contoh kes pertama.// 创建语音对象var utterance = new SpeechSynthesisUtterance('My name is Aurelio De Rosa'); Kes kedua adalah untuk membina SpeechSynThesisutterance dan menetapkan parameter seperti yang ditunjukkan di bawah. // 创建语音对象var utterance = new SpeechSynthesisUtterance();utterance.text = 'My name is Aurelio De Rosa';utterance.lang = 'it-IT';utterance.rate = 1.2; Beberapa kaedah yang didedahkan oleh objek ini adalah: - Onstart - Tetapkan panggil balik yang dicetuskan pada permulaan sintesis. - Onpause - Menetapkan panggilan balik yang dicetuskan apabila sintesis pertuturan dijeda. - OnResume - Menetapkan panggilan balik yang dicetuskan apabila komposisi dipulihkan. - Oneend - Menetapkan panggilan balik yang dicetuskan pada akhir komposisi. Objek SpeechSynthesisToTheTance membolehkan kita menetapkan teks untuk dibaca dengan kuat dan mengkonfigurasi bagaimana ia dibaca dengan kuat. Pada masa ini, kami hanya mencipta objek yang mewakili ucapan. Kami masih perlu mengikatnya kepada synthesizer. ### SpeechSynthesis Objek Objek SpeechSynthesis tidak perlu ditegaskan. Ia tergolong dalam objek tetingkap dan boleh digunakan secara langsung. Objek ini mendedahkan beberapa kaedah, seperti: - bercakap () - menerima objek SpeechSynthesisToTheTance sebagai satu -satunya parameter. Kaedah ini digunakan untuk mensintesis ucapan. - Berhenti () - Hentikan proses sintesis dengan segera. - jeda () - Jeda proses sintesis. - resume () - menyambung semula proses sintesis. Satu lagi cara yang menarik ialah getVoices (). Ia tidak menerima sebarang parameter dan digunakan untuk mendapatkan senarai suara (tatasusunan) yang tersedia untuk penyemak imbas tertentu. Setiap entri dalam senarai memberikan maklumat seperti nama, nama mnemonik (memberikan suara kepada pemaju seperti "Google US English", Lang (bahasa suara, seperti itu-it), dan voiceuri (suara ini adalah alamat suara perkhidmatan sintesis). Nota Penting: Dalam Chrome dan Safari, atribut Voiceuri dipanggil suara. Oleh itu, demo yang akan kita bina dalam artikel ini menggunakan suara dan bukannya Voiceuri. Keserasian penyemak imbas Malangnya, pada masa penulisan, satu -satunya pelayar yang menyokong API sintesis suara adalah Chrome 33 (sokongan penuh) dan iOS 7 (sebahagiannya disokong). Demo Bahagian ini memberikan demonstrasi mudah API sintesis pertuturan. Halaman ini membolehkan anda memasukkan beberapa teks dan mensintesisnya. Di samping itu, anda boleh menetapkan kadar, nada, dan bahasa yang anda mahu gunakan. Anda juga boleh menghentikan, menjeda, atau meneruskan sintesis teks pada bila -bila masa menggunakan butang yang disediakan. Sebelum melampirkan pendengar ke butang, kami menguji pelaksanaannya kerana sokongan untuk API ini sangat terhad. Umumnya, ujian sangat mudah, termasuk kod berikut: if (window.SpeechSynthesisUtterance === undefined) { // 不支持} else { // 读取我的文本} Jika ujian gagal, kami akan memaparkan mesej "API tidak menyokong".Sebaik sahaja sokongan disahkan, kami memuatkan suara secara dinamik dalam kotak pemilihan tertentu yang diletakkan dalam tag. Perhatikan bahawa terdapat masalah dengan kaedah getVoices () dalam Chrome (#340160). Jadi saya mencipta penyelesaian untuk ini menggunakan setInterval (). Kami kemudian melampirkan pengendali ke setiap butang supaya mereka boleh memanggil tindakan khusus mereka (bermain, berhenti, dll.). Demonstrasi langsung kod disediakan di sini. Di samping itu, demo ini, dan semua demo lain yang saya bina setakat ini, boleh didapati di repositori demo API HTML5 saya. `` `

charset = "utf-8" & gt; name = "viewport" content = "width = device-width, scale awal = 1.0"/& gt;

sintesis ucapan API demo & gt;

• { -WebKit-Box-Sizing: Border-box; -Moz-box-sizing: kotak sempadan; saiz kotak: kotak sempadan; }

<code>  body
  {
    max-width: 500px;
    margin: 2em auto;
    padding: 0 0.5em;
    font-size: 20px;
  }

  h1,
  .buttons-wrapper
  {
    text-align: center;
  }

  .hidden
  {
    display: none;
  }

  #text,
  #log
  {
    display: block;
    width: 100%;
    height: 5em;
    overflow-y: scroll;
    border: 1px solid #333333;
    line-height: 1.3em;
  }

  .field-wrapper
  {
    margin-top: 0.2em;
  }

  .button-demo
  {
    padding: 0.5em;
    display: inline-block;
    margin: 1em auto;
  }
></code>

& gt;

sintesis ucapan API & gt;

<code><h3>></h3>Play area>
 action="" method="get">
  <label> for="text"></label>Text:>
   id="text">>
  <div> class="field-wrapper">
    <label> for="voice"></label>Voice:>
     id="voice">>
  </div>>
  <div> class="field-wrapper">
    <label> for="rate"></label>Rate (0.1 - 10):>
     type="number" id="rate" min="0.1" max="10" value="1" step="any" />
  </div>>
  <div> class="field-wrapper">
    <label> for="pitch"></label>Pitch (0.1 - 2):>
     type="number" id="pitch" min="0.1" max="2" value="1" step="any" />
  </div>>
  <div> class="buttons-wrapper">
     id="button-speak-ss" class="button-demo">Speak>
     id="button-stop-ss" class="button-demo">Stop>
     id="button-pause-ss" class="button-demo">Pause>
     id="button-resume-ss" class="button-demo">Resume>
  </div>>
>

 id="ss-unsupported" class="hidden">API not supported>

<h3>></h3>Log>
<div> id="log"></div>>
 id="clear-all" class="button-demo">Clear all>

>
  // Test browser support
  if (window.SpeechSynthesisUtterance === undefined) {
    document.getElementById('ss-unsupported').classList.remove('hidden');
    ['button-speak-ss', 'button-stop-ss', 'button-pause-ss', 'button-resume-ss'].forEach(function(elementId) {
      document.getElementById(elementId).setAttribute('disabled', 'disabled');
    });
  } else {
    var text = document.getElementById('text');
    var voices = document.getElementById('voice');
    var rate = document.getElementById('rate');
    var pitch = document.getElementById('pitch');
    var log = document.getElementById('log');

    // Workaround for a Chrome issue (#340160 - https://code.google.com/p/chromium/issues/detail?id=340160)
    var watch = setInterval(function() {
      // Load all voices available
      var voicesAvailable = speechSynthesis.getVoices();

      if (voicesAvailable.length !== 0) {
        for(var i = 0; i               voices.innerHTML += '                                  'data-voice-uri="' + voicesAvailable[i].voiceURI + '">' +
                              voicesAvailable[i].name +
                              (voicesAvailable[i].default ? ' (default)' : '') + '';
        }

        clearInterval(watch);
      }
    }, 1);

    document.getElementById('button-speak-ss').addEventListener('click', function(event) {
      event.preventDefault();

      var selectedVoice = voices.options[voices.selectedIndex];

      // Create the utterance object setting the chosen parameters
      var utterance = new SpeechSynthesisUtterance();

      utterance.text = text.value;
      utterance.voice = selectedVoice.getAttribute('data-voice-uri');
      utterance.lang = selectedVoice.value;
      utterance.rate = rate.value;
      utterance.pitch = pitch.value;

      utterance.onstart = function() {
        log.innerHTML = 'Speaker started' + '<br>' + log.innerHTML;
      };

      utterance.onend = function() {
        log.innerHTML = 'Speaker finished' + '<br>' + log.innerHTML;
      };

      window.speechSynthesis.speak(utterance);
    });

    document.getElementById('button-stop-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.cancel();
      log.innerHTML = 'Speaker stopped' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-pause-ss').addEventListener('click', function(event) {
      event.preventDefault();

      window.speechSynthesis.pause();
      log.innerHTML = 'Speaker paused' + '<br>' + log.innerHTML;
    });

    document.getElementById('button-resume-ss').addEventListener('click', function(event) {
      event.preventDefault();

      if (window.speechSynthesis.paused === true) {
        window.speechSynthesis.resume();
        log.innerHTML = 'Speaker resumed' + '<br>' + log.innerHTML;
      } else {
        log.innerHTML = 'Unable to resume. Speaker is not paused.' + '<br>' + log.innerHTML;
      }
    });

    document.getElementById('clear-all').addEventListener('click', function() {
      log.textContent = '';
    });
  }
></code>

Kesimpulan

Artikel ini memperkenalkan API sintesis pertuturan. Ini adalah API yang mensintesis teks dan meningkatkan pengalaman keseluruhan pengguna laman web kami, terutamanya pengguna cacat penglihatan. Seperti yang dapat kita lihat, API ini mendedahkan pelbagai objek, kaedah, dan sifat, tetapi tidak sukar digunakan. Malangnya, sokongan penyemak imbasnya kini sangat miskin, dengan Chrome dan Safari menjadi satu -satunya pelayar yang menyokongnya. Semoga lebih banyak pelayar akan mengikutinya dan membolehkan anda mempertimbangkan untuk menggunakannya di laman web anda. Saya telah memutuskan untuk berbuat demikian. Jangan lupa untuk memainkan demo, jika anda suka siaran ini, sila tinggalkan komen. Saya benar -benar mahu mendengar pendapat anda. Soalan -soalan yang sering ditanya mengenai laman web dan sintesis suara API (FAQ)

Apakah API sintesis pertuturan dan bagaimana ia berfungsi?

API Sintesis Suara adalah antara muka berasaskan web yang membolehkan pemaju mengintegrasikan fungsi teks-ke-ucapan ke dalam aplikasi mereka. Ia berfungsi dengan menukar teks bertulis ke dalam kata-kata yang digunakan menggunakan suara yang dihasilkan oleh komputer. Ini dilakukan dengan memecahkan teks ke dalam komponen pertuturan dan kemudian mensintesis komponen -komponen ini ke dalam ucapan. API menyediakan pelbagai suara dan bahasa untuk dipilih, membolehkan pemaju menyesuaikan output suara untuk memenuhi keperluan mereka.

Bagaimana saya melaksanakan API sintesis pertuturan dalam aplikasi web?

Melaksanakan API sintesis pertuturan dalam aplikasi web anda melibatkan beberapa langkah. Pertama, anda perlu membuat contoh SpeechSynthesisToTheTance baru dan menetapkan harta teksnya kepada teks yang anda ingin baca dengan lantang. Anda kemudian boleh menetapkan sifat lain, seperti ucapan, nada, dan kadar, untuk menyesuaikan output ucapan. Akhirnya, hubungi Kaedah Bercakap Interface SpeechSynthesis untuk memulakan sintesis pertuturan.

Bolehkah saya menyesuaikan suara dan bahasa output suara?

Ya, API sintesis pertuturan menyediakan pelbagai ucapan dan bahasa yang boleh anda pilih. Anda boleh menetapkan suara dan bahasa dengan menetapkan sifat suara dan lang dari contoh SpeechSynthesisutterance. API juga membolehkan anda menyesuaikan nada dan kadar suara anda untuk menyesuaikan lagi output.

Apakah batasan API sintesis pertuturan?

Walaupun API sintesis pertuturan adalah alat yang berkuasa, ia mempunyai beberapa batasan. Sebagai contoh, ketersediaan suara dan bahasa mungkin berbeza -beza oleh pelayar dan sistem operasi. Di samping itu, kualiti output suara mungkin berbeza -beza dan mungkin tidak selalu terdengar semula jadi. Selain itu, API ini tidak memberikan kawalan ke atas sebutan perkataan atau frasa tertentu.

Bagaimana menangani kesilapan semasa menggunakan API sintesis pertuturan?

API sintesis suara menyediakan peristiwa ralat yang boleh anda dengar. Acara ini dicetuskan apabila ralat berlaku semasa sintesis pertuturan. Anda boleh mengendalikan acara ini dengan menambahkan pendengar acara kepada contoh SpeechSynthesisToTheTance dan menyediakan fungsi panggil balik yang akan dipanggil apabila acara itu dicetuskan.

Bolehkah saya menjeda dan meneruskan output suara?

Ya, API sintesis suara menyediakan kaedah jeda dan pemulihan yang boleh anda gunakan untuk mengawal output suara anda. Anda boleh memanggil kaedah ini pada antara muka SpeechSynthesis untuk menjeda dan memulihkan suara.

Adakah API sintesis suara disokong dalam semua pelayar?

API sintesis suara disokong dalam pelayar yang paling moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ketersediaan suara dan bahasa mungkin berbeza -beza oleh pelayar dan sistem operasi.

Bolehkah saya menggunakan API sintesis suara dalam aplikasi mudah alih saya?

Ya, API sintesis suara boleh digunakan dalam aplikasi mudah alih. Walau bagaimanapun, ketersediaan suara dan bahasa mungkin berbeza -beza oleh sistem operasi mudah alih.

Bagaimana untuk menguji API sintesis pertuturan?

Anda boleh menguji API sintesis ucapan dengan membuat laman web mudah yang menukarkan teks bertulis ke dalam ucapan menggunakan API. Anda kemudian boleh mencuba suara, bahasa, nada dan kadar yang berbeza untuk melihat bagaimana ia mempengaruhi output suara.

di mana saya boleh mendapatkan lebih banyak maklumat mengenai API sintesis suara?

Anda boleh mendapatkan lebih banyak maklumat mengenai API sintesis suara dalam dokumentasi rasmi yang disediakan oleh Perikatan Web Web Web (W3C). Terdapat juga banyak tutorial dan artikel dalam talian yang memberikan penjelasan dan contoh terperinci tentang cara menggunakan API.

Atas ialah kandungan terperinci Laman web bercakap dan API sintesis pertuturan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!