ساخت برنامه آموزشی با کدام زبان و روش؟

[ManOfTheMatch]

سلام دوستان گرامی

قبل از هرچیز عذر میخوام بابت اینکه سوالم رو اینجا می پرسم چون نمی دونم اصلا به کدوم قسمت مربوط میشه

من یک سری فایل های مکالمه انگیسی همراه متن مکالمه ها دارم
قرار هست که یک به اصلاح برنامه ی آموزشی بسازم که این مکالمه ها رو پخش کنه به همراه نمایش متن مربوطه

دقیقا مثل نرم افزار های قرآنی که وقتی قرآن تلاوت مبشه آیه مربوطه هایلایت میشه به رنگ زرد و همچنین دکمه های مکث و پلی و محیط گرافیکی و... هم وجود داره

یک نمونه دیگه هم در سایت ted.com دیدم که وقتی یک ویدیو رو پلی میکنیم در پایین اون پنجره ویدیو گزینه transcript داره که وقتی انتخاب می کنیم متن کامل زیرنویس ویدیو اورده میشه به صورتی که جمله به جمله هماهنگ با فیلم اون جمله ای که داره بیان میشه select میشه.

یک نمونه هم در مرورگر فایرفاکس هست
گزینه reader view و انتخاب narrate که کلمه به کلمه هابلایت میشه
اما همانطور که میدونید تو این سیستم خودش متن باید تشخیص بده و از narrator ویندوز استفاده میکنه (احتمالا)
ولی کار من راحتره چون فایل صوتی متن ها رو دارم و نیازی به تشخیص متن نیست

من اصلا نمی دونم که به چه زبانی باید بنویسمش
دوستی میگفت که نرم افزار های قرآنی رو با جاوا اسکریپت نوشتن اما من شک دارم چون این برنامه رو در محیط ویندوز میخوام اجرا کنم
واینکه نمی دونم اون اتفاقی که عرض کردم (هایلایت شدن جمله هنگام بیان اون جمله) چطوری باید انجامش بدم
و رابط گرافیکی اون رو چطور طراحی کنم

ببخشید که اینقدر حرف زدم
خیلی خیلی ممنون میشم اگه بنده رو راهنمایی بفرمایید
اگر هم موضوع مربوط نمیشه بفرمایین که در کدوم بخش مطرح کنم و از اینجا حذفش کنم

باتشکر

[plague]

نرم افزار های مولتی مدیا رو معمولا با استفاده از فلش یا جدیدا با JAVASCRIPT/HTML5 نمایش میدن
من در مورد زیر نویس اطلاع زیادی ندارم ولی با توجه به کتابخونه های زیادی که برای پخش فایل تصویری هست یه سرچ بکنید احتمالا چیزی پیدا بکنید که قابلیت ثبت سابتایتل هم داشته باشه (البته اختمالا پولیه )
راه حل دوم اینه که زیرنویس رو بندازدی روی ویدئو و از یه پلیر رایگان استفاده کنید

[ManOfTheMatch]

سلام
دوست عزیز از نحوه کارکرد گزینه transcript در سایت ted.com اطلاعی دارید؟
اگر سایت رو مشاهده بفرمایید و هنگام پخش ویدیو گزینه transcript رو انتخاب کنید متن کامل زیرنویس اورده میشه
اما اتفاقی که می افته select شدن جمله ای هست که در فیلم بیان میشه دقیقا این سازوکار select شدن رو میخواستم بدونم که چطور انجام شده

باتشکر فراوان

[plague]

این عملیات نسبتا پیچیده رو معمولا پلیر ها انجام میدن
بهتره نگاه کنید ببینید از چه پلیری استفاده کرده که احتمالا پولی هم باشه
اینکه رنگی میکنه نوشته رو چیز خاصی نیست یه تنظیماتی داره که مشخص میکنی در هر ثانیه از پخش فیلم کدوم کلمات باید رنگی بشن

اینا برنامه نویسی نداره و چیز ساده ای نیست که بخاید اجرا کنید
سیتسم پیچیده ای هست که قبلا یکی نوشته و بهتره برید از همون استفاده کنید

[ManOfTheMatch]

راه حل دوم اینه که زیرنویس رو بندازدی روی ویدئو و از یه پلیر رایگان استفاده کنید

سلام
میشه ی مقدار بیشتر توضیح بدین ؟
ممنون از شما

[ManOfTheMatch]

عذر میخوام
اطلاع دارین که برنامه های تلاوت قرآن ویندوزی چطوری طراحی شدن؟
آیا با جاواسکریپت طراحی شدن؟

بازهم ممنون از شما

[ManOfTheMatch]

این عملیات نسبتا پیچیده رو معمولا پلیر ها انجام میدن
بهتره نگاه کنید ببینید از چه پلیری استفاده کرده که احتمالا پولی هم باشه
اینکه رنگی میکنه نوشته رو چیز خاصی نیست یه تنظیماتی داره که مشخص میکنی در هر ثانیه از پخش فیلم کدوم کلمات باید رنگی بشن

اینا برنامه نویسی نداره و چیز ساده ای نیست که بخاید اجرا کنید
سیتسم پیچیده ای هست که قبلا یکی نوشته و بهتره برید از همون استفاده کنید

همین رنگی شدن نوشته ها که میفرمایید اتفاق خاصی نیست هم جزو اون عملیات پیچیدست و نمیشه انجامش داد؟

[plague]

زیر نویس های فیلم رو اگه دیده باشید تا حالا میبینید که هر خط یه تایم داره که مشخص میکنه این خط در کدوم زمان از شروع فیلم نمایش داده بشه و اون رنگی شدن هم چنین مکانیزمی داره

دوست عزیز اینا جزو دانش عمومی برنامه نویسی نیست و چیزی نیست که همه بدون یا دنبالش باشن چون خیلی کم پیش میاد استفاده داشته باشه بهتره که برید از سیستم های آماده ای که نوشته شده استفاده کنید

کافیه سرچ کنید
web player with subtitle

[ManOfTheMatch]

سلام دوستان عزیر
خیلی سریع سوالمو بپرسم
می خوام که برای مثال درثانیه 1.525487 متن hi هایلایت بشه
اگر ثانیه رو صحیح در نظر بگیرم مثلا به جای عدد بالا عدد 1 باشه کار میکنه و پلیر هنگام رسیدن به ثانیه 1 متن Hi رو هایلایت میکنه
ولی برای عدد 1.525487 کار نمی کنه

به نظر شما باید چکار کنم
این هم کدها هستش ، ببخشید که خیلی آماتوری هستش


<!DOCTYPE html>
<html>
<body>
<audio id = "adi" controls>
<source src="Greeting.mp3"></source>
</audio>

<div>
<pre>
A: <span id="ts1.525487" onClick ="jmp(this.id)">Hi</span> , <span id="ts2.193877" onClick ="jmp(this.id)">how are you doing?</span>
</pre>
</div>

<script>
var spns = document.getElementsByTagName("SPAN");
var audi = document.getElementById("adi");


audi.addEventListener("timeupdate", f1);

function f1(){

var i;
for (i = 0 ; i< spns.length ; i++){
if(spns[i].id == "ts" + audi.currentTime){
spns[i].style.backgroundColor = "red";
}
}
}

function jmp(clickedId){
clickedId = clickedId.slice(2);
audi.currentTime = clickedId;
}

</script>
</body>
</html>

[ManOfTheMatch]

سلام بالاخره تونستم اون چیزی رو که میخوام با کمک دوستان عزیز انجام بدم.
ی برنامه کوچولو که بتونه transcript یک فیلم یا فایل صوتی رو هایلایت کنه
بدین صورت که وقتی مثلا صوت به کلمه 'how are you' میرسه متن اش هم که زیرنویسش هست هایلایت بشه
البته قبلش باید زمانبندی جملات رو پیدا کرد که من از سایت http://otranscribe.com استفاده کردم
زمانبندی ها هم باید به صورت دستی داخل کد نوشته بشه (در داخل آدی span ها) که حوصله میخواد( البته شاید بشه این هم برنامشو نوشت که به صورت خودکار انجامش بده)
گفتم کدش رو قرار بدم شاید به درد کسی خورد.
البته از اساتید این حوزه عذر میخوام چون تازه کار هستم و کدها شاید آماتوری نوشته شده باشه.

ببخشید که سرتونو درد اوردم



<!DOCTYPE html>
<html>
<body>
<audio id = "adi" controls>
<source src="/1.%20Greeting.mp3"></source>
</audio>

<div id="demo">
<pre>
1
A: <span id="ts1.525487" onclick = "jmp(this.id)">Hi</span> , <span id="ts2.193877" onclick = "jmp(this.id)">how are you doing?</span>
B: <span id="ts3.194652" onclick = "jmp(this.id)">I'm fine</span>. <span id="ts4.175674" onclick = "jmp(this.id)">How about yourself?</span>
</pre>
</div>

<script>
var spns = document.getElementsByTagName("SPAN");
var audi = document.getElementById("adi");

audi.addEventListener("timeupdate", f1);
function f1(){
var i;
for (i = 0 ; i< spns.length ; i++){
var time = Number(spns[i].id.slice(2));
if(time < audi.currentTime){
if (i>0) spns[i -1].style.backgroundColor = "white";
spns[i].style.backgroundColor = "red";
}
}
}


function jmp(clickedId){
clickedId = clickedId.slice(2);
audi.currentTime = clickedId;
var k;
for (k=spns.length - 1 ; k> 0 ; k--){
spns[k].style.backgroundColor = "white";
}
}

</script>

</body>
</html>