Buat pemain audio yang dikawal suara dengan API Ucapan Web-tutorial js-php.cn

Make a Voice-Controlled Audio Player with the Web Speech API

mata teras

digunakan untuk menyembunyikan/menunjukkan blok tambahan / .sp_hiddenblock { Margin: 2px; Sempadan: 1px pepejal RGB (250, 197, 82); Radius sempadan: 3px; Padding: 5px; latar belakang warna: RGBA (250, 197, 82, 0.7); } .sp_hiddenblock.sp_hide { Paparan: Tiada! Penting; } Artikel ini dikaji semula oleh Edwin Reynoso dan Mark Brown. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

Web Voice API adalah API JavaScript yang membolehkan pemaju web mengintegrasikan keupayaan pengiktirafan dan sintesis ucapan ke dalam laman web mereka.

Terdapat banyak sebab untuk ini. Sebagai contoh, untuk meningkatkan pengalaman orang kurang upaya (terutamanya pengguna dengan gangguan visual, atau pengguna dengan mobiliti tangan yang terhad), atau membolehkan pengguna berinteraksi dengan aplikasi web semasa melaksanakan tugas lain, seperti memandu.

Jika anda tidak pernah mendengar API Suara Web, atau anda ingin memulakan dengan cepat, mungkin idea yang baik untuk membaca artikel Aurelio de Rosa Pengenalan kepada API Suara Web, API Sintesis Suara, dan Idea Borang Talking.

Sokongan penyemak imbas

Pengilang pelayar baru -baru ini mula melaksanakan kedua -dua API Pengiktirafan Suara dan API Sintesis Suara. Seperti yang anda lihat, sokongan untuk API ini jauh dari sempurna, jadi jika anda mengkaji tutorial ini, gunakan penyemak imbas yang betul.

Di samping itu, API Pengiktirafan Suara kini memerlukan sambungan Internet kerana suara akan dihantar melalui rangkaian dan hasilnya akan dikembalikan kepada penyemak imbas. Jika sambungan menggunakan HTTP, pengguna mesti membenarkan tapak menggunakan mikrofon mereka setiap kali permintaan dibuat. Jika sambungan menggunakan HTTPS, anda hanya perlu melakukan ini sekali.

Perpustakaan Pengiktirafan Suara

Perpustakaan

membantu kami menguruskan kerumitan dan memastikan kami tetap bersesuaian. Sebagai contoh, apabila pelayar lain mula menyokong API Pengiktirafan Suara, kita tidak perlu bimbang tentang menambah awalan vendor.

Annyang adalah perpustakaan seperti yang sangat mudah digunakan.

Ketahui lebih lanjut .

Untuk memulakan Annyang, kami menambah skrip mereka ke laman web kami:

<🎜>

Salin selepas log masuk

kita boleh menyemak sama ada API disokong seperti ini:

if (annyang) { /*逻辑*/ }

Salin selepas log masuk

dan tambahkan arahan menggunakan objek yang menggunakan nama arahan sebagai kunci dan panggil balik sebagai kaedah:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

Salin selepas log masuk

Akhirnya, kami hanya menambahnya dan memulakan pengiktirafan suara dengan arahan berikut:

annyang.addCommands(commands);
annyang.start();

Salin selepas log masuk

Pemain Audio Kawalan Suara

Dalam artikel ini, kami akan membina pemain audio yang dikawal suara. Kami akan menggunakan kedua -dua API sintesis pertuturan (digunakan untuk memberitahu pengguna lagu mana yang dimainkan, atau arahan tidak diiktiraf) dan API Pengiktirafan Ucapan (menukar arahan suara ke rentetan yang akan mencetuskan logik aplikasi yang berbeza).

Kelebihan menggunakan pemain audio dengan API Voice Web ialah pengguna boleh melayari halaman lain dalam penyemak imbas atau meminimumkan penyemak imbas dan melakukan tindakan lain sementara masih dapat beralih antara lagu. Jika kita mempunyai banyak lagu di senarai main kita, kita juga boleh meminta lagu tertentu tanpa carian manual (jika kita tahu namanya atau penyanyi, tentu saja).

Kami tidak akan bergantung kepada perpustakaan pihak ketiga untuk pengiktirafan pertuturan, kerana kami ingin menunjukkan cara menggunakan API tanpa menambah kebergantungan tambahan kepada projek. Pemain audio yang dikawal suara hanya menyokong penyemak imbas yang menyokong atribut interimResults. Versi terkini Chrome harus menjadi pilihan yang selamat.

Seperti biasa, anda boleh mencari kod penuh pada GitHub, serta demo pada Codepen.

pemula - senarai main

mari kita mulakan dengan senarai main statik. Ia terdiri daripada objek yang mengandungi lagu yang berbeza dalam array. Setiap lagu adalah objek baru yang mengandungi laluan ke fail, nama penyanyi, dan nama lagu:

var data = {
  "songs": [
    {
      "fileName": "https://www.ruse-problem.org/songs/RunningWaters.mp3",
      "singer" : "Jason Shaw",
      "songName" : "Running Waters"
    },
    ...

Salin selepas log masuk

kita sepatutnya dapat menambah objek baru ke array songs dan secara automatik memasukkan lagu -lagu baru ke dalam pemain audio kami.

Pemain Audio

Sekarang mari kita lihat pemain itu sendiri. Ini akan menjadi objek yang mengandungi perkara berikut:

Beberapa data tetapan
kaedah yang berkaitan dengan UI (seperti pengisian lagu)
kaedah yang berkaitan dengan API suara (seperti perintah pengiktirafan dan pemprosesan)
kaedah yang berkaitan dengan operasi audio (mis. Main, jeda, berhenti, sebelumnya, seterusnya)

Tetapkan data

Ini agak mudah.

var audioPlayer = {
  audioData: {
    currentSong: -1,
    songs: []
  },

Salin selepas log masuk

Atribut

currentSong merujuk kepada indeks lagu pengguna yang sedang dalam. Ini berguna, sebagai contoh, apabila kita perlu memainkan lagu sebelumnya/seterusnya atau berhenti/jeda lagu.

Arahan

songs mengandungi semua lagu yang telah didengar oleh pengguna. Ini bermakna bahawa pada masa akan datang pengguna mendengar lagu yang sama, kita boleh memuatkannya dari array tanpa memuat turunnya.

anda boleh melihat kod penuh di sini.

kaedah ui

UI akan mengandungi senarai arahan yang tersedia, senarai trek yang ada, dan kotak konteks untuk memberitahu pengguna tindakan semasa dan arahan sebelumnya. Saya tidak akan terperinci mengenai kaedah UI, tetapi memberikan gambaran ringkas. Anda boleh mencari kod untuk kaedah ini di sini.

LOAD

Ini akan melangkah ke atas senarai main yang kami nyatakan sebelum ini dan memasukkan nama lagu itu, bersama dengan nama artis, ke senarai trek yang tersedia.

ChangeCurrentSONGEFFECT

Ini menunjukkan lagu yang sedang dimainkan (dengan menandakannya dengan hijau dan menambah sepasang fon kepala di sebelahnya), dan lagu -lagu yang telah dimainkan.

Playsong

Ini menunjukkan bahawa lagu pengguna sedang dimainkan atau berakhir melalui kaedah changeStatusCode (menambah maklumat ini ke kotak) dan dengan memberitahu pengguna perubahan ini melalui API Suara.

changestatuscode

Seperti yang disebutkan di atas, ini mengemas kini mesej status dalam kotak konteks (contohnya, menunjukkan bahawa lagu baru sedang dimainkan) dan menggunakan kaedah speak untuk memberitahu pengguna perubahan ini.

ChangElastCommand

Fungsi pembantu kecil untuk mengemas kini kotak arahan terakhir.

togglespinner

Fungsi pembantu kecil untuk menyembunyikan atau memaparkan ikon spinner (menunjukkan bahawa arahan suara pengguna sedang diproses).

kaedah pemain

Pemain akan bertanggungjawab untuk apa yang anda harapkan, iaitu: bermula, berhenti, dan berhenti main balik, dan bergerak bolak -balik antara trek. Sekali lagi, saya tidak akan masuk ke dalam kaedah ini secara terperinci, tetapi saya ingin mengarahkan anda ke pangkalan kod GitHub kami.

Play

pemeriksaan ini sama ada pengguna telah mendengar lagu tersebut. Jika tidak, ia memulakan lagu, jika tidak, ia hanya akan memanggil kaedah playSong yang dibincangkan sebelum ini pada lagu yang kini di -cache. Ini dalam audioData.songs dan sepadan dengan indeks currentSong.

Pausesong

Jeda ini atau berhenti sepenuhnya (mengembalikan masa main balik ke permulaan lagu) lagu, bergantung pada apa yang diluluskan sebagai parameter kedua. Ia juga mengemas kini kod status untuk memberitahu pengguna bahawa lagu itu telah dihentikan atau dijeda.

berhenti

ini menjeda atau menghentikan lagu berdasarkan parameter pertama dan satu -satunya:

Pemeriksaan ini jika lagu terdahulu di -cache, dan jika ya, jeda lagu semasa, decrements currentSong dan memainkan lagu semasa sekali lagi. Jika lagu baru tidak dalam array, ia melakukan perkara yang sama, tetapi ia mula -mula memuatkan lagu berdasarkan nama fail/laluan yang sepadan dengan indeks penurunan currentSong.

Seterusnya

Jika pengguna telah mendengar lagu sebelum ini, kaedah ini akan cuba menjeda. Jika lagu seterusnya wujud dalam objek data kami (iaitu senarai main kami), ia memuat dan memainkannya. Sekiranya tidak ada lagu seterusnya, ia hanya akan mengubah kod status dan memaklumkan kepada pengguna bahawa mereka telah mencapai lagu terakhir.

SearchSpecificSong

Ini mengambil kata kunci sebagai parameter dan melakukan carian linear antara nama lagu dan artis, kemudian memainkan pertandingan pertama.

Kaedah API suara

API Suara sangat mudah dilaksanakan. Malah, hanya dua baris kod yang boleh membuat aplikasi web bercakap dengan pengguna:

<🎜>

Salin selepas log masuk

Apa yang kita lakukan di sini ialah membuat objek utterance dengan teks yang ingin kita katakan. Antara muka speechSynthesis (tersedia pada objek window) bertanggungjawab untuk mengendalikan objek utterance ini dan mengawal main balik suara yang dihasilkan.

Teruskan mencubanya dalam penyemak imbas anda. Itu mudah!

bercakap

kita dapat melihat aplikasi praktikalnya dalam kaedah speak kami, yang membaca dengan kuat mesej yang diluluskan sebagai parameter:

if (annyang) { /*逻辑*/ }

Salin selepas log masuk

Jika parameter kedua (scope) wujud, selepas mesej dimainkan, kami memanggil kaedah scope pada play (yang akan menjadi objek audio).

ProcessCommands

Kaedah ini tidak begitu menarik. Ia mengambil arahan sebagai hujah dan memanggil kaedah yang sesuai untuk bertindak balas terhadapnya. Ia menggunakan ungkapan biasa untuk memeriksa sama ada pengguna mahu memainkan lagu tertentu, jika tidak, ia masuk ke dalam pernyataan suis untuk menguji arahan yang berbeza. Jika tiada yang sepadan dengan arahan yang diterima, ia memberitahu pengguna bahawa arahan itu tidak difahami.

anda boleh mencari kodnya di sini.

Tele semuanya bersama -sama

Setakat ini, kami mempunyai objek data yang mewakili senarai main, dan objek audioPlayer yang mewakili pemain itu sendiri. Sekarang kita perlu menulis beberapa kod untuk mengenal pasti dan memproses input pengguna. Sila ambil perhatian bahawa ini hanya terpakai kepada pelayar WebKit.

kod yang membuat pengguna bercakap dengan aplikasi anda semudah sebelum ini:

var commands = {
  'show divs': function() {
    $('div').show();
  },
  'show forms': function() {
    $("form").show();
  }
};

Salin selepas log masuk

Ini akan menjemput pengguna untuk membolehkan halaman mengakses mikrofon mereka. Jika anda membenarkan akses, anda boleh mula bercakap dan apabila anda berhenti, acara onresult akan dicetuskan untuk membuat hasil penangkapan suara yang tersedia sebagai objek JavaScript.

Rujukan: HTML5 API Pengiktirafan Ucapan

kita boleh melaksanakannya dalam permohonan kami seperti berikut:

annyang.addCommands(commands);
annyang.start();

Salin selepas log masuk

seperti yang anda lihat, kami menguji kehadiran webkitSpeechRecognition pada objek window. Jika ia wujud, maka kita boleh mula, jika tidak, kita akan memberitahu pengguna bahawa penyemak imbas tidak menyokongnya. Jika semuanya berjalan lancar, kami kemudian menetapkan beberapa pilihan. Antaranya lang adalah pilihan yang menarik yang meningkatkan hasil pengiktirafan berdasarkan asal anda.

Kemudian, kami mengisytiharkan pengendali untuk peristiwa start dan onresult sebelum memulakan kaedah onend.

Hasil pemprosesan

Apabila pengiktirafan pertuturan mendapat hasil, sekurang -kurangnya dalam konteks pelaksanaan pengiktirafan ucapan semasa dan keperluan kami, kami ingin melakukan beberapa perkara. Setiap kali ada hasilnya, kami ingin menyimpannya dalam array dan menetapkan masa tamat untuk menunggu selama tiga saat supaya penyemak imbas dapat mengumpulkan hasil selanjutnya. Selepas tiga saat kami ingin menggunakan hasil yang dikumpulkan dan gelung melalui mereka dalam urutan terbalik (hasil yang lebih baru lebih cenderung tepat) dan periksa sama ada transkrip yang dikenal pasti mengandungi salah satu arahan yang kami ada. Jika ya, kami melaksanakan arahan dan memulakan semula pengiktirafan suara. Kami melakukan ini kerana ia boleh mengambil masa satu minit untuk menunggu hasil akhir, yang menjadikan pemain audio kami kelihatan agak tidak responsif dan tidak bermakna kerana ia akan lebih cepat dengan hanya satu klik butang.

<🎜>

Salin selepas log masuk

Kerana kami tidak menggunakan perpustakaan, kami perlu menulis lebih banyak kod untuk menubuhkan pengiktirafan ucapan kami, gelung melalui setiap hasil dan periksa sama ada transkripsinya sepadan dengan kata kunci yang diberikan.

Akhirnya, kami memulakannya dengan segera pada akhir pengiktirafan pertuturan:

if (annyang) { /*逻辑*/ }

Salin selepas log masuk

anda boleh melihat kod penuh untuk bahagian ini di sini.

itu sahaja. Kami kini mempunyai pemain audio yang berfungsi sepenuhnya dan dikawal oleh suara. Saya sangat mengesyorkan anda memuat turun kod dari GitHub dan mencubanya, atau lihat demo Codepen. Saya juga menyediakan versi yang berfungsi melalui HTTPS.

Kesimpulan

Saya harap tutorial praktikal ini akan memberikan pengenalan yang baik kepada kemungkinan API Suara Web. Saya fikir sebagai pelaksanaan stabil dan ciri -ciri baru ditambah, kita akan melihat penggunaan API ini berkembang. Sebagai contoh, saya fikir YouTube Masa Depan akan dikawal dengan suara sepenuhnya, di mana kita dapat menonton video dari pengguna yang berbeza, memainkan lagu-lagu tertentu, dan bergerak di antara lagu-lagu dengan hanya arahan suara.

API Suara Web juga boleh meningkatkan banyak kawasan lain atau membuka kemungkinan baru. Sebagai contoh, gunakan suara untuk melayari e -mel, menavigasi laman web, atau cari rangkaian.

Adakah anda menggunakan API ini dalam projek anda? Saya suka mendengar anda dalam komen di bawah.

soalan yang sering ditanya mengenai pemain audio kawalan suara menggunakan Web Voice API (FAQ)

Bagaimana API Suara Web berfungsi dalam pemain audio yang dikawal suara?

API Voice Web adalah alat yang berkuasa yang membolehkan pemaju mengintegrasikan pengiktirafan dan sintesis ucapan ke dalam aplikasi web mereka. Dalam pemain audio yang dikawal oleh suara, API berfungsi dengan menukar arahan yang dituturkan ke dalam teks bahawa aplikasi itu kemudiannya boleh mentafsir dan melaksanakannya. Sebagai contoh, jika pengguna mengatakan "bermain", API akan menukarnya ke teks, dan aplikasi akan memahami bahawa ini adalah arahan untuk mula bermain audio. Proses ini melibatkan algoritma yang canggih dan teknik pembelajaran mesin untuk mengenal pasti dan mentafsirkan ucapan manusia dengan tepat.

Apakah kelebihan menggunakan pemain audio yang dikawal suara?

Pemain audio yang dikawal suara mempunyai beberapa kelebihan. Pertama, ia memberikan pengalaman bebas tangan, yang sangat berguna apabila pengguna sibuk dengan tugas-tugas lain. Kedua, ia dapat meningkatkan kebolehcapaian untuk pengguna dengan mobiliti yang dikurangkan, yang mungkin mengalami kesukaran menggunakan kawalan tradisional. Akhirnya, ia menawarkan pengalaman pengguna novel dan menarik yang boleh membuat aplikasi anda menonjol dari persaingan.

Bolehkah saya menggunakan API Suara di mana -mana pelayar web?

Pelayar web yang paling moden menyokong API Web Suara, termasuk Google Chrome, Mozilla Firefox, dan Microsoft Edge. Walau bagaimanapun, adalah lebih baik untuk memeriksa keserasian penyemak imbas tertentu sebelum mengintegrasikan API ke dalam aplikasi anda, kerana sokongan mungkin berbeza antara versi dan platform.

Bagaimana untuk meningkatkan ketepatan pengiktirafan pertuturan dalam pemain audio yang dikawal suara?

Anda boleh menggunakan mikrofon berkualiti tinggi, mengurangkan bunyi latar belakang, dan melatih API untuk lebih memahami suara dan aksen pengguna untuk meningkatkan ketepatan pengiktirafan pertuturan. Di samping itu, anda boleh melaksanakan pengendalian ralat dalam aplikasi anda untuk mengendalikan arahan yang tidak dikenali dan memberi maklum balas kepada pengguna.

Bolehkah saya menyesuaikan arahan suara dalam pemain audio yang dikawal suara?

Ya, anda boleh menyesuaikan arahan suara dalam pemain audio yang dikawal suara. Ini boleh dilakukan dengan menentukan set arahan anda sendiri dalam kod aplikasi anda, yang mana API suara web akan mengenali dan mentafsir. Ini membolehkan anda menyesuaikan pengalaman pengguna berdasarkan keperluan dan keutamaan khusus anda.

Adakah bahasa sokongan API Web API selain bahasa Inggeris?

Ya, API Suara Web menyokong pelbagai bahasa. Anda boleh menentukan bahasa dalam tetapan API, dan ia akan mengenali dan mentafsir arahan untuk bahasa itu. Ini menjadikannya alat sejagat untuk membangunkan aplikasi untuk penonton antarabangsa.

Bagaimana keselamatan API Suara Web?

API Suara Web direka dengan keselamatan dalam fikiran. Ia menggunakan sambungan HTTPS yang selamat untuk menghantar data suara dan tidak menyimpan sebarang maklumat peribadi. Walau bagaimanapun, seperti mana -mana teknologi web, adalah penting untuk mengikuti amalan terbaik keselamatan, seperti mengemas kini perisian dan melindungi aplikasi anda dari kelemahan web yang sama.

Bolehkah saya menggunakan API Voice Web dalam aplikasi mudah alih saya?

Walaupun API Web Suara direka terutamanya untuk digunakan dalam aplikasi web, ia juga boleh digunakan dalam aplikasi mudah alih melalui pandangan web. Walau bagaimanapun, untuk aplikasi mudah alih asli, anda mungkin ingin mempertimbangkan menggunakan API pengiktirafan ucapan khusus platform yang boleh memberikan prestasi dan integrasi yang lebih baik.

Apakah batasan API Suara Web?

Walaupun API Suara Web adalah alat yang berkuasa, ia mempunyai beberapa batasan. Sebagai contoh, ia memerlukan sambungan internet untuk berfungsi, dan ketepatannya mungkin dipengaruhi oleh faktor -faktor seperti bunyi latar belakang dan aksen pengguna. Di samping itu, sokongan API mungkin berbeza antara pelayar dan platform web yang berbeza.

Bagaimana untuk memulakan dengan API Web Suara?

Untuk memulakan dengan API Suara Web, anda perlu memahami asas -asas JavaScript dan pembangunan web. Anda kemudian boleh melayari dokumentasi API yang memberikan maklumat terperinci mengenai ciri -ciri mereka dan cara menggunakannya. Terdapat juga banyak tutorial dan contoh dalam talian yang tersedia untuk membantu anda mempelajari cara mengintegrasikan API ke dalam aplikasi anda sendiri.

Atas ialah kandungan terperinci Buat pemain audio yang dikawal suara dengan API Ucapan Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!