Buat Apl penilaian sebutan (Bahagian 1)

PHPz
Lepaskan: 2024-08-18 07:01:02
asal
991 orang telah melayarinya

Tujuan tutorial ini adalah untuk mencipta aplikasi untuk mengawal sebutan pengguna.

Untuk mengikutinya, anda mesti mempunyai pengetahuan tentang javascript dan lebih ideal Vue.js 3.

Idea

Saya baru-baru ini memutuskan untuk kembali ke bahasa Jerman. Kesukaran utama yang saya hadapi dalam bahasa ini ialah menyebutnya dengan betul. Biasanya saya mendengar contoh, merakam sendiri mengulanginya dan mendengar sendiri semula. Ia satu proses yang rumit dan saya mesti mengakui saya tidak mempunyai telinga yang sangat baik.

Berdasarkan pemerhatian ini, saya tertanya-tanya sama ada terdapat Apl atau API yang boleh memberitahu saya sama ada saya menyebut perkataan atau ayat dengan betul dalam bahasa Jerman! Selepas beberapa penyiasatan dan penemuan hebat, saya ingin mengodkan Apl saya sendiri untuk menyelesaikan masalah saya.

Begini cara saya melakukannya!

API yang tersedia

Selepas beberapa penyelidikan, saya dapat mencari Apl yang menyelesaikan masalah saya. Tetapi secara keseluruhan, pengesahan sebutan selalunya hanya fungsi tambahan bagi aplikasi berbayar (atau yang berfungsi dengan langganan). Saya kemudian memutuskan untuk mencari API.

Berikut ialah senarai API yang menjalankan tugas :

  • API Ucapan-ke-Teks Awan Google
  • Perkhidmatan Ucapan Microsoft Azure
  • Sebutan iSpeech
  • Speechmatics
  • Ucapan
  • Elsa Sekarang
  • SpeechSuper

API ini dibayar tetapi secara amnya membolehkan anda mendapat akses selama 2 minggu untuk menguji dan mencuba.

Memandangkan saya ingin menyemak sebutan bahasa Jerman saya, saya memilih untuk menguji dengan SpeechSuper API kerana ia menyokong beberapa bahasa termasuk bahasa Jerman. Kemudian dalam tutorial, kami akan mencuba Speechace API untuk menunjukkan betapa mudahnya untuk bertukar daripada satu API ke API lain bergantung pada keperluan anda.

Definisi ergonomik aplikasi

Matlamatnya adalah untuk melaksanakan Apl mudah yang membolehkan anda memasukkan perkataan, merakam suara anda, menghantar rakaman audio ke API dan memaparkan skor anda.

Beginilah rupa aplikasi itu:

Create a pronunciation assessment App (Part 1)

Jadi kami akan mencipta aplikasi yang akan membentangkan medan teks yang membenarkan kemasukan perkataan atau ayat. Satu butang akan membolehkan anda mendengarnya.
Kami kemudian mempunyai butang untuk merakam suara kami, yang ini akan menukar gaya apabila ia berada dalam mod rakaman. Cuma klik padanya untuk berhenti dan hantar ke API untuk mendapatkan skor sebutan.
Setelah skor diperoleh, ia dipaparkan sebagai jubin dengan warna yang mewakili skor kami, daripada merah kepada hijau kepada oren.

Permulaan aplikasi

Idealnya ialah dapat menggunakan Apl sebagai apl web, tetapi juga sebagai aplikasi Android asli. Atas sebab ini kami akan menggunakan Quasar.

Rangka kerja Quasar

Quasar ialah rangka kerja Vue.js sumber terbuka untuk membangunkan aplikasi dengan pangkalan kod tunggal. Ia boleh digunakan di web (SPA, PWA, SSR), sebagai aplikasi mudah alih (Android, iOS) atau sebagai aplikasi Desktop (MacOs, Windows, Linux).

Persediaan

Jika ini belum lagi berlaku, anda perlu memasang NodeJS. Lebih baik menggunakan volta kerana ia akan membolehkan anda menggunakan versi NodeJ yang berbeza bergantung pada projek anda.

Kami akan bermula dengan memulakan projek kami dengan alat perancah Quasar.

npm i -g @quasar/cli
npm init quasar
Salin selepas log masuk

Cli akan bertanya kepada kami beberapa soalan, pilih pilihan berikut :

Senarai Pilihan
  • Apl dengan Quasar CLI
  • Folder projek : learn2speak
  • Quasar v2
  • Javascript
  • Apl Quasar dengan Vite
  • Nama pakej : learn2speak
  • Nama produk projek : Belajar bercakap
  • Perihalan projek : Nilai sebutan anda
  • Pengarang : diri sendiri
  • prapemproses CSS : Sass dengan sintaks SCSS
  • Ciri-ciri yang diperlukan:
    • ESLint
    • Axios
  • Pratetap ESLint : Standard
  • Pasang kebergantungan projek : Ya, gunakan npm

Setelah arahan dilaksanakan, anda boleh memasuki direktori dan menyampaikan aplikasi secara setempat:

cd learn2speak
npm run dev
Salin selepas log masuk

Pelayar lalai anda harus membuka halaman di alamat berikut http://localhost:9000

Create a pronunciation assessment App (Part 1)

Pengubahsuaian rangka yang dicadangkan untuk mendapatkan ergonomik yang disasarkan

Aplikasi contoh tersedia, kami akan mengeluarkan elemen yang tidak kami perlukan. Untuk melakukan ini, kami akan membuka kod sumber dalam VSCode (anda sudah tentu boleh menggunakan editor lain)

code .
Salin selepas log masuk

Layout modification

Quasar provides us with the notion of Layout and then of page included in the latter. The pages and the layout are chosen via the router. For this tutorial, we do not need to know these notions, but you can learn them here: Quasar layout

We do not need drawer, at least not for now so we will delete it from the src/layouts/MainLayout.vue file. To do this, delete the section of the