हमें लेआउट भाग के लिए और अधिक की आवश्यकता नहीं है क्योंकि हमारा एप्लिकेशन केवल एक पृष्ठ को परिभाषित करेगा।
मुख्य पृष्ठ का कार्यान्वयन फ़ाइल में है: src/pages/IndexPage.vue
यह मुख्य पृष्ठ है जहां हम अपना टेक्स्ट फ़ील्ड और सेव बटन रखेंगे।
इस फ़ाइल के लिए, हम बस टेम्प्लेट ( टैग) से क्वासर लोगो को हटा देते हैं और vueJS 3 कंपोज़िशन एपीआई का उपयोग करने के लिए स्क्रिप्ट भाग को संशोधित करते हैं, ताकि स्रोत निम्न फ़ाइल जैसा दिखे:
अब हम क्वासर घटक QInput का उपयोग करके टेक्स्ट फ़ील्ड जोड़ेंगे
ऐसा करने के लिए हम पृष्ठ टेम्पलेट में q-इनपुट घटक जोड़ते हैं:
आप देख सकते हैं कि टेक्स्ट फ़ील्ड स्क्रीन के केंद्र में प्रदर्शित होता है, यह क्वासर फ्लेक्स और फ्लेक्स-सेंटर कक्षाओं के कारण है। इन वर्गों को क्वासर: फ्लेक्सबॉक्स द्वारा परिभाषित किया गया है। हम टेक्स्ट फ़ील्ड को स्क्रीन के शीर्ष पर रखकर इसे ठीक कर देंगे, हम घटक को स्टाइल करने के लिए भी इसका लाभ उठाएंगे।
क्वासर हमें प्रयोग करने और कक्षाएं ढूंढने के लिए एक फ्लेक्स प्लेग्राउंड भी प्रदान करता है।
जैसा कि आप देख सकते हैं, हमने उपयोगकर्ता द्वारा दर्ज किए गए मान को संग्रहीत करने के लिए स्क्रिप्ट भाग में एक वाक्य संदर्भ परिभाषित किया है। यह वी-मॉडल निर्देश के माध्यम से क्यू-इनपुट घटक से जुड़ा है
हम शब्द या वाक्य के हमारे उच्चारण की रिकॉर्डिंग की अनुमति देने वाला बटन जोड़कर इस पहले भाग को समाप्त करेंगे। इसके लिए हम बस क्वासर के क्यू-बटन घटक का उपयोग करेंगे और इसे अपने टेक्स्ट फ़ील्ड के बाद रखेंगे।
ध्यान दें कि हमने प्रत्येक घटक के ऊपर कुछ जगह छोड़कर इंटरफ़ेस को थोड़ा प्रसारित करने के लिए q-mt-lg क्लास को जोड़ा है। आप रिक्ति पर क्वासर दस्तावेज़ का उल्लेख कर सकते हैं।
एप्लिकेशन इस तरह दिखेगा:
![\\\"Create](\\\"/uploads/20240828/172485325166cf2c03140b1.png\\\")
इसलिए हम अपने एप्लिकेशन का ढांचा प्राप्त करने में कामयाब रहे हैं।
भविष्य के भाग में हम देखेंगे कि ऑडियो कैसे प्राप्त करें, फिर स्पीचसुपर एपीआई के माध्यम से स्कोर कैसे प्राप्त करें
पोस्ट पर टिप्पणी करने में संकोच न करें! भाग 2 जल्द ही आएगा!
","image":"http://www.luping.net/uploads/20240828/172485325166cf2c030035a.png","datePublished":"2024-08-28T21:54:10+08:00","dateModified":"2024-08-28T21:54:10+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
ब्राउज़ करें:970
इस ट्यूटोरियल का उद्देश्य उपयोगकर्ता के उच्चारण को नियंत्रित करने के लिए एक एप्लिकेशन बनाना है।
इसका अनुसरण करने के लिए, आपको जावास्क्रिप्ट और आदर्श रूप से Vue.js 3 का ज्ञान होना चाहिए।
मैंने हाल ही में जर्मन वापस आने का फैसला किया है। इस भाषा में मेरे सामने मुख्य कठिनाई इसका सही उच्चारण करना है। आमतौर पर मैं एक उदाहरण सुनता हूं, उसे दोहराते हुए खुद को रिकॉर्ड करता हूं और फिर से खुद को सुनता हूं। यह एक जटिल प्रक्रिया है और मुझे यह स्वीकार करना होगा कि मेरे कान बहुत अच्छे नहीं हैं।
इस अवलोकन के आधार पर, मुझे आश्चर्य हुआ कि क्या कोई ऐप या एपीआई है जो मुझे बता सके कि मैं जर्मन में किसी शब्द या वाक्य का सही उच्चारण कर रहा हूं या नहीं! कुछ जांच और महान खोजों के बाद, मैं अपनी समस्या का समाधान करने के लिए अपने स्वयं के ऐप को कोड करना चाहता था।
मैंने यह कैसे किया!
कुछ शोध के बाद, मैं ऐसे ऐप्स ढूंढने में सक्षम हुआ जिन्होंने मेरी समस्या का समाधान किया। लेकिन कुल मिलाकर, उच्चारण सत्यापन अक्सर एक भुगतान किए गए एप्लिकेशन (या जो सदस्यता के साथ काम करता है) का एक अतिरिक्त कार्य था। फिर मैंने एपीआई खोजने का फैसला किया।
यहां एपीआई की सूची है जो काम करती है:
ये एपीआई भुगतान किए जाते हैं लेकिन आम तौर पर आपको परीक्षण और प्रयोग के लिए 2 सप्ताह की सुविधा मिलती है।
चूंकि मैं जर्मन के अपने उच्चारण की जांच करना चाहता था, इसलिए मैंने स्पीचसुपर एपीआई के साथ परीक्षण करना चुना क्योंकि यह जर्मन सहित कई भाषाओं का समर्थन करता है। बाद में ट्यूटोरियल में हम स्पीचेस एपीआई को यह प्रदर्शित करने का प्रयास करेंगे कि आपकी आवश्यकताओं के आधार पर एक एपीआई से दूसरे एपीआई पर स्विच करना कितना आसान है।
लक्ष्य एक सरल ऐप लागू करना है जो आपको एक शब्द दर्ज करने, अपनी आवाज रिकॉर्ड करने, एपीआई पर ऑडियो रिकॉर्डिंग भेजने और अपना स्कोर प्रदर्शित करने की अनुमति देता है।
एप्लिकेशन इस तरह दिखेगा:
इसलिए हम एक एप्लिकेशन बनाएंगे जो एक शब्द या वाक्य के प्रवेश की अनुमति देने वाला एक टेक्स्ट फ़ील्ड प्रस्तुत करेगा। एक बटन आपको इसे सुनने की अनुमति देगा।
फिर हमारे पास अपनी आवाज रिकॉर्ड करने के लिए एक बटन होता है, यह रिकॉर्डिंग मोड में होने पर शैली बदल देगा। रुकने के लिए बस उस पर क्लिक करें और उच्चारण स्कोर प्राप्त करने के लिए एपीआई को भेजें।
एक बार स्कोर प्राप्त हो जाने के बाद, इसे एक टाइल के रूप में प्रदर्शित किया जाता है जिसमें हमारे स्कोर का प्रतिनिधित्व करने वाला रंग होता है, लाल से हरे से नारंगी तक।
आदर्श यह होगा कि ऐप को एक वेबएप के साथ-साथ एक मूल एंड्रॉइड एप्लिकेशन के रूप में भी तैनात किया जा सके। इस कारण से हम क्वासर का उपयोग करेंगे।
क्वासर एकल कोडबेस के साथ एप्लिकेशन विकसित करने के लिए एक ओपन-सोर्स Vue.js फ्रेमवर्क है। उन्हें वेब (एसपीए, पीडब्ल्यूए, एसएसआर), मोबाइल एप्लिकेशन (एंड्रॉइड, आईओएस) या डेस्कटॉप एप्लिकेशन (मैकओ, विंडोज, लिनक्स) के रूप में तैनात किया जा सकता है।
यदि यह पहले से मामला नहीं है, तो आपको NodeJS इंस्टॉल करना होगा। वोल्टा का उपयोग करना बेहतर है क्योंकि यह आपको अपनी परियोजनाओं के आधार पर NodeJs के विभिन्न संस्करणों का उपयोग करने की अनुमति देगा।
हम क्वासर स्कैफोल्डिंग टूल के साथ अपने प्रोजेक्ट को आरंभ करके शुरुआत करेंगे।
npm i -g @quasar/cli npm init quasar
क्लि हमसे कई प्रश्न पूछेगा, निम्नलिखित विकल्प चुनें:
विकल्प सूची
एक बार कमांड निष्पादित हो जाने पर, आप निर्देशिका में प्रवेश कर सकते हैं और स्थानीय रूप से एप्लिकेशन की सेवा कर सकते हैं:
cd learn2speak npm run dev
आपके डिफ़ॉल्ट ब्राउज़र को निम्नलिखित पते पर पेज खोलना चाहिए http://localhost:9000
उदाहरण एप्लिकेशन उपलब्ध है, हम उन तत्वों को हटा देंगे जिनकी हमें आवश्यकता नहीं है। ऐसा करने के लिए हम VSCode में स्रोत कोड खोलेंगे (आप निश्चित रूप से किसी अन्य संपादक का उपयोग कर सकते हैं)
code .
क्वासर हमें लेआउट और फिर बाद में शामिल पेज की अवधारणा प्रदान करता है। पेज और लेआउट राउटर के माध्यम से चुने जाते हैं। इस ट्यूटोरियल के लिए, हमें इन धारणाओं को जानने की आवश्यकता नहीं है, लेकिन आप उन्हें यहां सीख सकते हैं: क्वासर लेआउट
हमें ड्रॉअर की आवश्यकता नहीं है, कम से कम अभी तो नहीं इसलिए हम इसे src/layouts/MainLayout.vue फ़ाइल से हटा देंगे। ऐसा करने के लिए,
Learn2Speak
फिर हम संपूर्ण स्क्रिप्ट भाग को हटा सकते हैं और इसे निम्नलिखित कोड से बदल सकते हैं:
हमें लेआउट भाग के लिए और अधिक की आवश्यकता नहीं है क्योंकि हमारा एप्लिकेशन केवल एक पृष्ठ को परिभाषित करेगा।
मुख्य पृष्ठ का कार्यान्वयन फ़ाइल में है: src/pages/IndexPage.vue
यह मुख्य पृष्ठ है जहां हम अपना टेक्स्ट फ़ील्ड और सेव बटन रखेंगे।
इस फ़ाइल के लिए, हम बस टेम्प्लेट ( टैग) से क्वासर लोगो को हटा देते हैं और vueJS 3 कंपोज़िशन एपीआई का उपयोग करने के लिए स्क्रिप्ट भाग को संशोधित करते हैं, ताकि स्रोत निम्न फ़ाइल जैसा दिखे:
अब हम क्वासर घटक QInput का उपयोग करके टेक्स्ट फ़ील्ड जोड़ेंगे
ऐसा करने के लिए हम पृष्ठ टेम्पलेट में q-इनपुट घटक जोड़ते हैं:
आप देख सकते हैं कि टेक्स्ट फ़ील्ड स्क्रीन के केंद्र में प्रदर्शित होता है, यह क्वासर फ्लेक्स और फ्लेक्स-सेंटर कक्षाओं के कारण है। इन वर्गों को क्वासर: फ्लेक्सबॉक्स द्वारा परिभाषित किया गया है। हम टेक्स्ट फ़ील्ड को स्क्रीन के शीर्ष पर रखकर इसे ठीक कर देंगे, हम घटक को स्टाइल करने के लिए भी इसका लाभ उठाएंगे।
क्वासर हमें प्रयोग करने और कक्षाएं ढूंढने के लिए एक फ्लेक्स प्लेग्राउंड भी प्रदान करता है।
जैसा कि आप देख सकते हैं, हमने उपयोगकर्ता द्वारा दर्ज किए गए मान को संग्रहीत करने के लिए स्क्रिप्ट भाग में एक वाक्य संदर्भ परिभाषित किया है। यह वी-मॉडल निर्देश के माध्यम से क्यू-इनपुट घटक से जुड़ा है
हम शब्द या वाक्य के हमारे उच्चारण की रिकॉर्डिंग की अनुमति देने वाला बटन जोड़कर इस पहले भाग को समाप्त करेंगे। इसके लिए हम बस क्वासर के क्यू-बटन घटक का उपयोग करेंगे और इसे अपने टेक्स्ट फ़ील्ड के बाद रखेंगे।
ध्यान दें कि हमने प्रत्येक घटक के ऊपर कुछ जगह छोड़कर इंटरफ़ेस को थोड़ा प्रसारित करने के लिए q-mt-lg क्लास को जोड़ा है। आप रिक्ति पर क्वासर दस्तावेज़ का उल्लेख कर सकते हैं।
एप्लिकेशन इस तरह दिखेगा:
इसलिए हम अपने एप्लिकेशन का ढांचा प्राप्त करने में कामयाब रहे हैं।
भविष्य के भाग में हम देखेंगे कि ऑडियो कैसे प्राप्त करें, फिर स्पीचसुपर एपीआई के माध्यम से स्कोर कैसे प्राप्त करें
पोस्ट पर टिप्पणी करने में संकोच न करें! भाग 2 जल्द ही आएगा!
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3
