فهرستِ فصل‌های یک فایل صوتی باید کاربر را به زمانِ درست ببرد؛ داشتنِ سه عنوان یا یک فایل VTTبه‌تنهایی این کار را انجام نمی‌دهد. در این نمونه، cueهایchaptersرا می‌خوانیم، دکمهٔ نام‌دار می‌سازیم و پیمایشِ واقعیِ زمان را با ماوس و Enterآزمایش می‌کنیم. این فهرست سفارشی است؛ رابطِ بومیِ همهٔ مرورگرها ادعا نمی‌شود.
سه فصلِ ساختگی برای رسانهٔ دوثانیه‌ای
فصلِ «آغازِ تمرین» از صفر تا۰٫۵،«بخشِ میانی» از۰٫۵تا۱٫۲۵و«پایانِ تمرین» از۱٫۲۵تا۲ثانیه است. VTTاین cueها را سرورِ همراه درchapters.vttمی‌دهد. این عنوان‌ها بخش‌بندیِ یک موجِ ریاضی‌اند؛ از فهمِ گفتار یا فصل‌بندیِ خودکارِ یک کتاب به دست نیامده‌اند.
عنصرtrackباkind='chapters'وmode='hidden'بارگذاری می‌شود. قبل از ساخت دکمه‌ها، دریافتِ cueو آماده‌شدنِ رسانه کنترل می‌شود. خواندنِcueازtrackِغیرفعال را بدون درخواستِ فایل، آماده‌بودنِ داده فرض نکنید.
قراردادِ فصل پیش از ساختِ رابط
تابعِ همراه، مدتِ مثبت و معلومِ رسانه و یک تا۱۰۰cueرا می‌خواهد. متنِ هر فصل باید غیرخالی، پایان بعد از شروع، ترتیبِ زمانی درست، فصل‌ها بدون هم‌پوشانی و پایانشان داخلِdurationباشد. این سیاستِ فهرستِ این تمرین است؛ تمامِ کاربردهای زیرنویس همین قانونِ بدونِ هم‌پوشانی را ندارند.
سه ورودیِ منفیِ محلی نیز اجرا شده‌اند: فصلِ تا۳ثانیه برای رسانهٔ۲ثانیه‌ای، دو فصلِ دارایِ هم‌پوشانی و نامِ خالی؛ هر سه رد شدند. قبولِ ساختار هم انطباقِ محتوای فصل با گفتار را ثابت نمی‌کند.
دکمه با نامِ خوانا و مقصدِ زمانیِ روشن
برای هر cueیکbuttonباtype='button'ساخته می‌شود؛ عنوان باtextContentقرار می‌گیرد. کلیک فقط media.currentTime = cue.startTimeرا انجام می‌دهد. دکمهٔ بومی با کیبورد نیز فعال می‌شود؛ برای هر شنونده دکمهٔ تصویریِ بدون نام نساخته‌ایم. این انتخاب، ممیزیِ کاملِ دسترس‌پذیری یا آزمونِ صفحه‌خوان نیست.
| عملِ واقعاً آزمایش‌شده | زمانِ مشاهده‌شده پس از seek |
|---|---|
| کلیکِ «بخشِ میانی» | ۰٫۵ثانیه |
| فوکوسِ «پایانِ تمرین» وEnter | ۱٫۲۵ثانیه |
در این آزمون، seekپایان یافت و رسانه در زمانِ مقصد بود. عددِcurrentTimeدر تمامِ قالب‌ها تضمینِ هم‌ترازیِ نمونه‌به‌نمونه نیست؛ دقتِ مقصد و رسانهٔ واقعی باید جدا بررسی شوند. فایلِ نمونه نیز بازهٔ قابل seekاز صفر تا۲ثانیه داشت.
فایل و فصل را به نسخه وصل کنیم
اگر بخشی از صوت حذف یا مکثی اضافه شود، زمان‌های فصلِ قدیمی می‌توانند اشتباه شوند. بعد از تغییرِ رسانه، duration،مرزهای فصل و چند پیمایشِ دستی را دوباره کنترل کنید. سرورِ آموزشی پاسخِ Rangeبرای WAVدارد؛ در آزمونِ اولیهٔ metadata-only،آماده‌نبودنِ seekآشکار شد و نتیجهٔ آن اجرای ناموفق به‌عنوان قبولی ثبت نشد. آزمونِ نهایی پس از آماده‌شدنِ رسانه و اصلاحِ پاسخِ نمونه موفق بود.
اجرای محلی با فایل‌های همراه
فایل Python را با Python 3.9یا جدیدتر و کتابخانهٔ استاندارد اجرا کنید؛ دو نشانیِ HTTPروی127.0.0.1با پورت‌های متفاوت چاپ می‌کند. فقط روی رایانهٔ خودتان گوش می‌دهد، فایلِ کاربر نمی‌خواند و آپلود ندارد. در مبدأ اول، صفحهٔ پایه را باز کنید و کدِ JavaScriptمتنیِ همراه را در ابزارِ توسعهٔ همان صفحه اجرا کنید؛ این کد خودکار روی سایت اصلی نصب نمی‌شود. برای پایانِ سرورها Ctrl+Cبزنید.
رسانهٔ نمونه، WAVتک‌کانالهٔ۱۶بیتی با نرخ۱۶۰۰۰،دو ثانیه موجِ سینوسی۴۴۰هرتز و۶۴۰۴۴بایت است. گفتارِ کسی ضبط نشده است. آزمونِ گزارش‌شده در۳نوامبر۲۰۲۶با Edge154.0.4258.37در محیطِ جدا و بی‌صدا انجام شد؛ شنیدنِ انسان، تشخیص گفتار، درخواستِ سرویس بیرونی یا تماس در کار نبود.
این قطعه را چطور به رسانه وصل کنیم؟
در صفحهٔ محلیِ مبدأ اول، یکaudioباsrcبرابرA+'/tone.wav'وpreload='auto'و یکtrackفرزند باkind='chapters'وsrcبرابرA+'/chapters.vtt'بسازید. پیش از تخصیصِsrc،شنونده‌هایcanplayوload/errorرا وصل کنید وmodeراhiddenبگذارید. پس از رسیدنِ هر دو،تابعِهمراه را باaudio،عنصرtrackو یکnavخالی صدا بزنید. تابع خودش دکمه‌ها را می‌سازد؛ رسانه را خودکار پخش نمی‌کند.
نمایشِ زیرنویسِ معمولی و برنامهٔ تحویلِ کتابِ چندفصلی دو مسئلهٔ مجاورند؛ خروجیِ مستقل اینجا پیمایشِ یک رسانهٔ بارگذاری‌شده است. نیازِ زمان‌داربودنِ خروجی را در درخواستِ اپرانگار روشن کنید؛ این مثال وعدهٔ ساختِ خودکارِ chapterیا پلیر در محصول نیست.
فایل تمرین و منبع
سرورِ دو مبدأِ محلی؛ صدای ریاضی و VTT را خودش می‌سازد · فهرست فصلِ سفارشی با دکمهٔ واقعی و کنترلِ زمانِcueها
منابع در ۳ نوامبر ۲۰۲۶ خوانده شدند؛ این تاریخ، تاریخ انتشار منبع نیست. مثال‌ها و فایل‌های این راهنما آموزشی و ساختهٔ تحریریه‌اند.