interactive transcript با کمک جاوا اسکریپت
سلام دوستان گرامی
قبل از هرچیز عذر میخوام بابت اینکه سوالم رو اینجا می پرسم چون نمی دونم اصلا به کدوم قسمت مربوط میشه
من یک سری فایل های مکالمه انگیسی همراه متن مکالمه ها دارم
قرار هست که یک به اصلاح برنامه ی آموزشی بسازم که این مکالمه ها رو پخش کنه به همراه نمایش متن مربوطه
دقیقا مثل نرم افزار های قرآنی که وقتی قرآن تلاوت مبشه آیه مربوطه هایلایت میشه به رنگ زرد و همچنین دکمه های مکث و پلی و محیط گرافیکی و... هم وجود داره
یک نمونه دیگه هم در سایت ted.com دیدم که وقتی یک ویدیو رو پلی میکنیم در پایین اون پنجره ویدیو گزینه transcript داره که وقتی انتخاب می کنیم متن کامل زیرنویس ویدیو اورده میشه به صورتی که جمله به جمله هماهنگ با فیلم اون جمله ای که داره بیان میشه select میشه.
یک نمونه هم در مرورگر فایرفاکس هست
گزینه reader view و انتخاب narrate که کلمه به کلمه هابلایت میشه
اما همانطور که میدونید تو این سیستم خودش متن باید تشخیص بده و از narrator ویندوز استفاده میکنه (احتمالا)
ولی کار من راحتره چون فایل صوتی متن ها رو دارم و نیازی به تشخیص متن نیست
من اصلا نمی دونم که به چه زبانی باید بنویسمش
دوستی میگفت که نرم افزار های قرآنی رو با جاوا اسکریپت نوشتن اما من شک دارم چون این برنامه رو در محیط ویندوز میخوام اجرا کنم
واینکه نمی دونم اون اتفاقی که عرض کردم (هایلایت شدن جمله هنگام بیان اون جمله) چطوری باید انجامش بدم
و رابط گرافیکی اون رو چطور طراحی کنم
ببخشید که اینقدر حرف زدم
خیلی خیلی ممنون میشم اگه بنده رو راهنمایی بفرمایید
اگر هم موضوع مربوط نمیشه بفرمایین که در کدوم بخش مطرح کنم و از اینجا حذفش کنم
باتشکر
نقل قول: ساخت برنامه آموزشی با کدام زبان و روش؟
نرم افزار های مولتی مدیا رو معمولا با استفاده از فلش یا جدیدا با JAVASCRIPT/HTML5 نمایش میدن
من در مورد زیر نویس اطلاع زیادی ندارم ولی با توجه به کتابخونه های زیادی که برای پخش فایل تصویری هست یه سرچ بکنید احتمالا چیزی پیدا بکنید که قابلیت ثبت سابتایتل هم داشته باشه (البته اختمالا پولیه )
راه حل دوم اینه که زیرنویس رو بندازدی روی ویدئو و از یه پلیر رایگان استفاده کنید
interactive transcript با کمک جاوا اسکریپت
سلام
دوست عزیز از نحوه کارکرد گزینه transcript در سایت ted.com اطلاعی دارید؟
اگر سایت رو مشاهده بفرمایید و هنگام پخش ویدیو گزینه transcript رو انتخاب کنید متن کامل زیرنویس اورده میشه
اما اتفاقی که می افته select شدن جمله ای هست که در فیلم بیان میشه دقیقا این سازوکار select شدن رو میخواستم بدونم که چطور انجام شده
باتشکر فراوان
نقل قول: ساخت برنامه آموزشی با کدام زبان و روش؟
این عملیات نسبتا پیچیده رو معمولا پلیر ها انجام میدن
بهتره نگاه کنید ببینید از چه پلیری استفاده کرده که احتمالا پولی هم باشه
اینکه رنگی میکنه نوشته رو چیز خاصی نیست یه تنظیماتی داره که مشخص میکنی در هر ثانیه از پخش فیلم کدوم کلمات باید رنگی بشن
اینا برنامه نویسی نداره و چیز ساده ای نیست که بخاید اجرا کنید
سیتسم پیچیده ای هست که قبلا یکی نوشته و بهتره برید از همون استفاده کنید
interactive transcript با کمک جاوا اسکریپت
نقل قول:
نوشته شده توسط
plague
راه حل دوم اینه که زیرنویس رو بندازدی روی ویدئو و از یه پلیر رایگان استفاده کنید
سلام
میشه ی مقدار بیشتر توضیح بدین ؟
ممنون از شما
interactive transcript با کمک جاوا اسکریپت
عذر میخوام
اطلاع دارین که برنامه های تلاوت قرآن ویندوزی چطوری طراحی شدن؟
آیا با جاواسکریپت طراحی شدن؟
بازهم ممنون از شما
interactive transcript با کمک جاوا اسکریپت
نقل قول:
نوشته شده توسط
plague
این عملیات نسبتا پیچیده رو معمولا پلیر ها انجام میدن
بهتره نگاه کنید ببینید از چه پلیری استفاده کرده که احتمالا پولی هم باشه
اینکه رنگی میکنه نوشته رو چیز خاصی نیست یه تنظیماتی داره که مشخص میکنی در هر ثانیه از پخش فیلم کدوم کلمات باید رنگی بشن
اینا برنامه نویسی نداره و چیز ساده ای نیست که بخاید اجرا کنید
سیتسم پیچیده ای هست که قبلا یکی نوشته و بهتره برید از همون استفاده کنید
همین رنگی شدن نوشته ها که میفرمایید اتفاق خاصی نیست هم جزو اون عملیات پیچیدست و نمیشه انجامش داد؟
نقل قول: ساخت برنامه آموزشی با کدام زبان و روش؟
زیر نویس های فیلم رو اگه دیده باشید تا حالا میبینید که هر خط یه تایم داره که مشخص میکنه این خط در کدوم زمان از شروع فیلم نمایش داده بشه و اون رنگی شدن هم چنین مکانیزمی داره
دوست عزیز اینا جزو دانش عمومی برنامه نویسی نیست و چیزی نیست که همه بدون یا دنبالش باشن چون خیلی کم پیش میاد استفاده داشته باشه بهتره که برید از سیستم های آماده ای که نوشته شده استفاده کنید
کافیه سرچ کنید
web player with subtitle
interactive transcript با کمک جاوا اسکریپت
سلام دوستان عزیر
خیلی سریع سوالمو بپرسم
می خوام که برای مثال درثانیه 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>
interactive transcript با کمک جاوا اسکریپت
سلام بالاخره تونستم اون چیزی رو که میخوام با کمک دوستان عزیز انجام بدم.
ی برنامه کوچولو که بتونه 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>