كيفية إنشاء أداة لتحويل الصوت إلى نص باستخدام Web Speech API
في هذا المقال، ستتعلم كيفية إنشاء صفحة ويب تتيح للمستخدمين تحويل الصوت إلى نص مكتوب باستخدام Web Speech API.
سنوضح الخطوات بشكل مفصل مع أمثلة للكود وروابط للمصادر الخارجية لتوسيع معرفتك.
تحويل الصوت إلى نص
تحويل الصوت إلى فيديو
ماهي المتطلبات الأساسية بإنشاء هذه الأداة
لإنشاء هذه الأداة، تحتاج إلى الأدوات والتقنيات التالية:
- HTML: لإنشاء الهيكل الأساسي للصفحة.
- CSS: لتنسيق الصفحة.
- JavaScript: لتفعيل واجهة Web Speech API.
ماذا يعني Web Speech API
Web Speech API هي واجهة برمجة تطبيقات مضمنة في بعض المتصفحات مثل Google Chrome وMicrosoft Edge.
وتمكن هذه الواجهة الرائعة تتيح تحويل الكلام إلى نص باستخدام الميكروفون.
لمزيد من المعلومات حول Web Speech API، يمكنك زيارة الدليل الرسمي على MDN.
كيف يتم إنشاء صفحة HTML
لنبدأ بإنشاء صفحة HTML تحتوي على زر لتشغيل التسجيل ومربع لعرض النص المكتوب.
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تحويل الصوت إلى نص</title>
</head>
<body>
<h1>تحويل الصوت إلى نص</h1>
<button id="start-btn">ابدأ التسجيل</button>
<div id="output"></div>
<script>
const startBtn = document.getElementById('start-btn');
const output = document.getElementById('output');
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
recognition.lang = 'ar-SA';
recognition.onresult = function(event) {
output.textContent = event.results[0][0].transcript;
};
startBtn.addEventListener('click', function() {
recognition.start();
});
} else {
alert('متصفحك لا يدعم هذه الميزة.');
}
</script>
</body>
</html>
طريقة إضافة تنسيق باستخدام CSS
قمنا بإضافة بعض التنسيقات لتحسين مظهر الصفحة. الكود التالي يضيف تنسيقًا للزر والمربع النصي:
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#output {
width: 80%;
height: 200px;
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
text-align: right;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
كيف يتم جلب الموارد الخارجية
إليك بعض الروابط المفيدة التي يمكنك الرجوع إليها لتحسين الأداة:
- دليل Web Speech API على MDN
- Google Cloud Speech-to-Text API (اختياري لتحسين الأداء)
- FFmpeg.js (لدمج الصوت والفيديو)
الخاتمة
الآن أصبح لديك صفحة ويب بسيطة لتحويل الصوت إلى نص باستخدام Web Speech API.
كما يمكنك التوسع في المشروع عن طريق إضافة ميزات مثل دعم لغات متعددة أو دمج الصوت مع الفيديو.
