مرجع عناصر HTML : عنصر <audio>
عنصر <audio> در HTML برای جاسازی محتوای صوتی در اسناد استفاده میشود. این عنصر ممکن است شامل یک یا چند منبع صوتی باشد که با استفاده از ویژگی src یا عنصر <source> نمایش داده میشوند: مرورگر مناسبترین منبع را انتخاب میکند. همچنین میتواند با استفاده از MediaStream، مقصدی برای رسانههای پخش شده باشد.
مثال بالا کاربرد اولیه عنصر را نشان میدهد. به روشی مشابه با عنصر ، ما مسیری را برای رسانهای که میخواهیم در آن جاسازی کنیم، درون ویژگی src قرار میدهیم؛ میتوانیم ویژگیهای دیگری را نیز برای مشخص کردن اطلاعاتی مانند اینکه آیا میخواهیم به صورت خودکار پخش شود و تکرار شود، آیا میخواهیم کنترلهای صوتی پیشفرض مرورگر را نشان دهیم و غیره، اضافه کنیم.
محتوای درون تگهای باز و بسته به عنوان یک جایگزین در مرورگرهایی که از این عنصر پشتیبانی نمیکنند، نمایش داده میشود.
ویژگیهای این عنصر شامل ویژگیهای سراسری است.
autoplay
یک ویژگی بولی: در صورت مشخص شدن، صدا به محض اینکه بتواند پخش شود، بدون انتظار برای اتمام دانلود کل فایل صوتی، به طور خودکار شروع به پخش میکند.
سایتهایی که به طور خودکار صدا (یا ویدیوهایی با آهنگ صوتی) را پخش میکنند، میتوانند تجربه ناخوشایندی برای کاربران باشند، بنابراین در صورت امکان باید از آنها اجتناب شود. اگر باید قابلیت پخش خودکار را ارائه دهید، باید آن را به صورت اختیاری فعال کنید (از کاربر بخواهید که آن را به طور خاص فعال کند). با این حال، این میتواند هنگام ایجاد عناصر رسانهای که منبع آنها بعداً و تحت کنترل کاربر تنظیم میشود، مفید باشد. برای اطلاعات بیشتر در مورد نحوه استفاده صحیح از پخش خودکار، به راهنمای پخش خودکار ما مراجعه کنید.
صدا با ویژگی تا زمانی که کنترلهای رسانه نزدیک یا درون پنجره نمایش نباشند، شروع به دانلود و پخش خودکار نمیکند. صدای بارگذاری شده با تنبلی بدون ویژگی controls به صورت خودکار پخش نمیشود.
controls
اگر این ویژگی وجود داشته باشد، مرورگر کنترلهایی را ارائه میدهد تا به کاربر اجازه دهد پخش صدا، از جمله میزان صدا، جستجو و مکث/از سرگیری پخش را کنترل کند.
controlslist
ویژگی controlslist، در صورت مشخص شدن، به مرورگر کمک میکند تا هر زمان که مرورگر مجموعه کنترلهای خود را نشان میدهد (یعنی زمانی که ویژگی controls مشخص شده است)، کنترلهایی را که برای عنصر audio نمایش میدهد، انتخاب کند.
مقادیر مجاز عبارتند از nodownload، nofullscreen و noremoteplayback.
crossorigin
این ویژگی شمارشی نشان میدهد که آیا از CORS برای دریافت فایل صوتی مرتبط استفاده شود یا خیر. منابع دارای CORS را میتوان بدون آلوده شدن در عنصر دوباره استفاده کرد. مقادیر مجاز عبارتند از:
- anonymous
یک درخواست cross-origin بدون اعتبارنامه ارسال میکند. به عبارت دیگر، هدر Origin: HTTP را بدون کوکی، گواهی X.509 یا انجام احراز هویت HTTP Basic ارسال میکند. اگر سرور اعتبارنامهها را به سایت مبدا ندهد (با تنظیم نکردن هدر HTTP)، منبع آلوده شده و استفاده از آن محدود میشود.
- use-credentials
یک درخواست cross-origin با اعتبارنامه ارسال میکند. به عبارت دیگر، هدر Origin: HTTP را به همراه یک کوکی، یک گواهی یا انجام احراز هویت HTTP Basic ارسال میکند. اگر سرور به سایت مبدا اعتبارنامه ندهد (از طریق هدر HTTP)، منبع آلوده شده و استفاده از آن محدود میشود.
در صورت عدم وجود، منبع بدون درخواست CORS (یعنی بدون ارسال هدر audioprocess
بافر ورودی یک ScriptProcessorNode آماده پردازش است.
canplay
مرورگر میتواند رسانه را پخش کند، اما تخمین میزند که دادههای کافی برای پخش رسانه تا انتهای آن بدون نیاز به توقف برای بافرینگ بیشتر محتوا بارگذاری نشده است.
canplaythrough
مرورگر تخمین میزند که میتواند رسانه را تا انتهای آن بدون توقف برای بافرینگ محتوا پخش کند.
complete
رندر کردن یک OfflineAudioContext خاتمه یافته است.
durationchange
ویژگی duration بهروزرسانی شده است.
emptied
رسانه خالی شده است؛ برای مثال، این رویداد در صورتی ارسال میشود که رسانه قبلاً بارگیری شده باشد (یا تا حدی بارگیری شده باشد) و متد برای بارگیری مجدد آن فراخوانی میشود.
ended
پخش متوقف شده است زیرا به انتهای رسانه رسیده است.
loaddata
بارگذاری اولین فریم رسانه به پایان رسیده است.
loadmetadata
فراداده بارگیری شده است.
loadstart
زمانی که مرورگر شروع به بارگیری منبع میکند، اجرا میشود.
pause
پخش متوقف شده است.
play
پخش آغاز شده است.
playing
پخش پس از مکث یا تأخیر به دلیل کمبود داده، آماده شروع است.
ratechange
نرخ پخش تغییر کرده است.
seeked
عملیات جستجو تکمیل شد.
seeking
عملیات جستجو آغاز شد.
stalled
عامل کاربر در تلاش است تا دادههای رسانه را دریافت کند، اما دادهها به طور غیرمنتظرهای در دسترس نیستند.
suspend
بارگذاری دادههای رسانه به حالت تعلیق درآمده است.
timeupdate
زمان نشان داده شده توسط ویژگی currentTime بهروزرسانی شده است.
volumechange
میزان صدا تغییر کرده است.
waiting
پخش به دلیل کمبود موقت دادهها متوقف شده است.
مرورگرها همه از انواع فایلها و کدکهای صوتی یکسانی پشتیبانی نمیکنند؛ شما میتوانید چندین منبع را درون عناصر تو در تو ارائه دهید و مرورگر سپس از اولین منبعی که میفهمد استفاده خواهد کرد:
منبع صدا را میتوان روی هر URL معتبری، از جمله URLهای HTTP(S) و URLهای داده، تنظیم کرد. هنگام استفاده از URLهای HTTP(S)، توجه داشته باشید که رفتار ذخیرهسازی مرورگر بر تعداد دفعات درخواست فایل از سرور تأثیر میگذارد. URLهای داده، دادههای صوتی را مستقیماً در HTML جاسازی میکنند، که میتواند برای فایلهای صوتی کوچک مفید باشد، اما برای فایلهای بزرگتر توصیه نمیشود زیرا اندازه فایل HTML را افزایش میدهد.
هنگام استفاده از عناصر ، مرورگر سعی میکند هر منبع را به ترتیب بارگیری کند. اگر یک منبع با شکست مواجه شود (مثلاً به دلیل URL نامعتبر یا فرمت پشتیبانی نشده)، منبع بعدی امتحان میشود و به همین ترتیب ادامه مییابد. یک رویداد خطا روی عنصر پس از شکست همه منابع رخ میدهد؛ رویدادهای خطا روی هر عنصر به صورت جداگانه رخ نمیدهند.
همچنین میتوانید از API صوتی وب برای تولید و دستکاری مستقیم جریانهای صوتی از کد جاوا اسکریپت به جای پخش فایلهای صوتی از پیش موجود استفاده کنید. میتوانید srcObject را در جاوا اسکریپت روی یک شیء MediaStream تنظیم کنید. این معمولاً برای جریانهای صوتی زنده یا پردازش صوتی در زمان واقعی استفاده میشود.
توجه داشته باشید که منابع MediaStream محدودیتهایی دارند: آنها قابل جستجو نیستند و فقط از مجموعه محدودی از کدکها پشتیبانی میکنند.
ما یک راهنمای جامع و کامل برای انواع فایلهای رسانهای و کدکهای صوتی که میتوانند در آنها استفاده شوند، ارائه میدهیم. همچنین یک راهنمای برای کدکهای پشتیبانی شده برای ویدیو نیز موجود است.
سایر نکات استفاده:
اگر ویژگی کنترلها را مشخص نکنید، پخشکننده صوتی شامل کنترلهای پیشفرض مرورگر نخواهد بود. با این حال، میتوانید با استفاده از جاوا اسکریپت و API ، کنترلهای سفارشی خود را ایجاد کنید.
برای امکان کنترل دقیق بر محتوای صوتی خود، HTMLMediaElements رویدادهای مختلف زیادی را اجرا میکند. این همچنین راهی برای نظارت بر فرآیند دریافت صدا فراهم میکند تا بتوانید خطاها را مشاهده کنید یا تشخیص دهید که چه زمانی به اندازه کافی برای شروع پخش یا دستکاری آن در دسترس است.
عناصر نمیتوانند زیرنویس یا کپشن مرتبط با خود را مانند عناصر داشته باشند. برای اطلاعات مفید و راهحلها، به WebVTT و Audio نوشته Ian Devlin مراجعه کنید. برای آزمایش محتوای جایگزین در مرورگرهایی که از این عنصر پشتیبانی میکنند، میتوانید را با یک عنصر ناموجود مانند جایگزین کنید.
یک منبع خوب برای اطلاعات عمومی در مورد استفاده از در HTML، آموزش مقدماتی ویدئو و صدا در HTML است.
عنصر هیچ خروجی بصری ذاتی از خود ندارد، مگر اینکه ویژگی controls مشخص شده باشد، که در این صورت کنترلهای پیشفرض مرورگر نمایش داده میشوند.
کنترلهای پیشفرض به طور پیشفرض مقدار display برابر با inline دارند و اغلب ایده خوبی است که مقدار آن را روی block تنظیم کنید تا کنترل بر موقعیتیابی و طرحبندی بهبود یابد، مگر اینکه بخواهید در یک بلوک متنی یا مشابه آن قرار گیرد.
شما میتوانید کنترلهای پیشفرض را با ویژگیهایی که بر بلوک به عنوان یک واحد واحد تأثیر میگذارند، استایلبندی کنید، بنابراین به عنوان مثال میتوانید به آن border و border-radius، padding، margin و غیره بدهید. با این حال، نمیتوانید اجزای جداگانه داخل پخشکننده صوتی را استایلبندی کنید (مثلاً اندازه دکمه یا آیکونها را تغییر دهید، فونت را تغییر دهید و غیره) و کنترلها در مرورگرهای مختلف متفاوت هستند.
برای داشتن ظاهر و حس یکسان در مرورگرها، باید کنترلهای سفارشی ایجاد کنید. این کنترلها را میتوان به هر روشی که میخواهید علامتگذاری و استایلبندی کرد و سپس میتوان از جاوا اسکریپت به همراه API برای اتصال عملکرد آنها استفاده کرد.
اصول اولیه استایلبندی پخشکننده ویدیو، تکنیکهای استایلبندی مفیدی را ارائه میدهد - این کتاب در زمینه نوشته شده است، اما بخش زیادی از آن به همان اندازه برای نیز قابل استفاده است.
تشخیص اضافه شدن و حذف شدن آهنگها
شما میتوانید با استفاده از رویدادهای addtrack و removetrack، زمان اضافه شدن و حذف شدن آهنگها از یک عنصر را تشخیص دهید. با این حال، این رویدادها مستقیماً به خود عنصر ارسال نمیشوند. در عوض، آنها به شیء لیست آهنگ در HTMLMediaElement عنصر که مربوط به نوع آهنگی است که به عنصر اضافه شده است، ارسال میشوند:
یک AudioTrackList شامل تمام آهنگهای صوتی عنصر رسانه. میتوانید یک شنونده برای addtrack به این شیء اضافه کنید تا هنگام اضافه شدن آهنگهای صوتی جدید به عنصر، هشدار داده شود.
یک شنونده addtrack به این شیء VideoTrackList اضافه کنید تا هنگام اضافه شدن آهنگهای ویدیویی به عنصر، مطلع شود.
یک شنونده رویداد addtrack به این TextTrackList اضافه کنید تا هنگام اضافه شدن آهنگهای متنی جدید به عنصر، مطلع شود.
نکته: اگرچه این یک عنصر است، اما هنوز لیست آهنگهای ویدیویی و متنی را دارد و در واقع میتواند برای نمایش ویدیو استفاده شود، اگرچه پیامدهای رابط کاربری میتواند عجیب باشد.
برای مثال، برای تشخیص زمان اضافه شدن یا حذف شدن آهنگهای صوتی به یک عنصر ، میتوانید از کدی مانند این استفاده کنید:
این کد، آهنگهای صوتی که به عنصر اضافه یا از آن حذف میشوند را زیر نظر میگیرد و یک تابع فرضی را در ویرایشگر آهنگ فراخوانی میکند تا آهنگ را از لیست آهنگهای موجود ویرایشگر ثبت و حذف کند.
همچنین میتوانید از برای گوش دادن به رویدادهای addtrack و removetrack استفاده کنید.
صوتی که با دیالوگ گفتاری همراه است باید هم زیرنویس و هم رونوشتهایی را ارائه دهد که محتوای آن را به طور دقیق توصیف کنند. زیرنویسها، که با استفاده از WebVTT مشخص میشوند، به افرادی که دچار اختلال شنوایی هستند اجازه میدهند محتوای ضبط صدا را هنگام پخش ضبط درک کنند، در حالی که رونوشتها به افرادی که به زمان بیشتری نیاز دارند اجازه میدهند تا بتوانند محتوای ضبط را با سرعت و فرمتی که برای آنها راحت است، مرور کنند.
اگر از سرویسهای زیرنویس خودکار استفاده میشود، بررسی محتوای تولید شده برای اطمینان از نمایش دقیق صدای منبع مهم است.
عنصر مستقیماً از WebVTT پشتیبانی نمیکند. شما باید کتابخانه یا چارچوبی پیدا کنید که این قابلیت را برای شما فراهم کند، یا کدی را برای نمایش زیرنویسها خودتان بنویسید. یک گزینه این است که صدای خود را با استفاده از عنصر که از WebVTT پشتیبانی میکند، پخش کنید.
علاوه بر دیالوگ گفتاری، زیرنویسها و رونوشتها باید موسیقی و جلوههای صوتی را نیز که اطلاعات مهم را منتقل میکنند، شناسایی کنند. این شامل احساسات و لحن است. به عنوان مثال، در WebVTT زیر، به استفاده از براکتهای مربعی برای ارائه لحن و بینش عاطفی به بیننده توجه کنید. این میتواند به ایجاد حال و هوایی که در غیر این صورت با استفاده از موسیقی، صداهای غیرکلامی و جلوههای صوتی مهم و غیره ارائه میشد، کمک کند.
همچنین، ارائه برخی محتوا (مانند لینک دانلود مستقیم) به عنوان جایگزین برای بینندگانی که از مرورگری استفاده میکنند که عنصر در آن پشتیبانی نمیشود، رویه خوبی است:
مثال زیر نحوهی استفادهی اولیه از عنصر را برای پخش یک فایل OGG نشان میدهد. این فایل به دلیل ویژگی autoplay - در صورتی که صفحه مجوز انجام این کار را داشته باشد - به صورت خودکار پخش میشود و همچنین شامل محتوای جایگزین نیز میشود.
برای جزئیات بیشتر در مورد زمانهای کارکرد پخش خودکار، نحوه دریافت مجوز برای استفاده از پخش خودکار، و نحوه و زمان مناسب استفاده از پخش خودکار، به راهنمای پخش خودکار ما مراجعه کنید.
عنصر <audio> به همراه عنصر <source>
این مثال مشخص میکند که کدام آهنگ صوتی با استفاده از ویژگی src در یک عنصر تودرتو به جای مستقیماً در عنصر جاسازی شود. همیشه مفید است که نوع MIME فایل را درون ویژگی type قرار دهید، زیرا مرورگر میتواند فوراً تشخیص دهد که آیا میتواند آن فایل را پخش کند یا خیر، و در صورت عدم پخش، وقت خود را برای آن تلف نکند.
<audio> با چندین عنصر <source>
این مثال شامل چندین عنصر است. مرورگر سعی میکند اگر بتواند عنصر منبع اول (Opus) را پخش کند، آن را بارگذاری کند؛ در غیر این صورت به عنصر دوم (Vorbis) و در نهایت به MP3 برمیگردد:
| مشخصه | توضیحات |
|---|
| دسته بندی محتوا | محتوای روان، محتوای جملهبندیشده، محتوای جاسازیشده. اگر ویژگی کنترلی داشته باشد: محتوای تعاملی و محتوای قابل لمس. |
| محتوای مجاز | اگر عنصر دارای ویژگی src باشد: صفر یا چند عنصر <track> و به دنبال آن محتوای شفافی که حاوی هیچ عنصر رسانهای <audio> یا <video> نباشد. در غیر این صورت: صفر یا چند عنصر <source> و به دنبال آن صفر یا چند عنصر <track> و به دنبال آن محتوای شفافی که حاوی هیچ عنصر رسانهای <audio> یا <video> نباشد. |
| حذف برچسب | هیچکدام، هر دو تگ شروع و پایان اجباری هستند. |
| والدین مجاز | هر عنصری که محتوای جاسازیشده را میپذیرد. |
| نقش ضمنی ARIA | بدون نقش متناظر |
| نقشهای مجاز ARIA | application |
| رابط DOM | HTMLAudioElement |
HTTP) دریافت میشود و از استفاده غیر آلوده آن در عناصر
جلوگیری میشود. در صورت نامعتبر بودن، طوری مدیریت میشود که گویی از کلمه کلیدی شمارشی anonymous استفاده شده است. برای اطلاعات بیشتر به ویژگیهای تنظیمات CORS مراجعه کنید.
disableremoteplayback
یک ویژگی بولی که برای غیرفعال کردن قابلیت پخش از راه دور در دستگاههایی که با استفاده از فناوریهای سیمی (HDMI، DVI و غیره) و بیسیم (Miracast، Chromecast، DLNA، AirPlay و غیره) متصل شدهاند، استفاده میشود. برای اطلاعات بیشتر به
پیشنهادی مراجعه کنید.
در Safari، میتوانید از
به عنوان جایگزین استفاده کنید.
loading
نشان میدهد که مرورگر چگونه باید صدا را بارگیری کند:
eager
صدا را بلافاصله بارگیری میکند، صرف نظر از اینکه صدا در حال حاضر در محدوده دید قابل مشاهده است یا خیر (این مقدار پیشفرض است).
lazy
بارگذاری صدا را تا زمانی که کنترلها به فاصله محاسبهشده از محدوده دید، همانطور که توسط مرورگر تعریف شده است، برسند، به تعویق میاندازد.
توجه: برای اینکه عناصر صوتی به طور قابل مشاهده با محدوده دید تلاقی کنند، باید قابل مشاهده باشند. مرورگرها از ویژگی controls برای قابل مشاهده کردن عناصر صوتی استفاده میکنند، بنابراین برای بارگذاری تنبل مورد نیاز است. صدای بارگذاری شده با تنبل بدون ویژگی controls بارگیری نمیشود.
بارگذاری تنبل از پهنای باند شبکه و ذخیرهسازی مورد نیاز برای مدیریت صدا تا زمانی که به طور معقولی از نیاز به آن مطمئن شود، جلوگیری میکند. این امر عملکرد را در اکثر موارد استفاده معمول بهبود میبخشد.
صدای بارگذاری شده با تنبلی که در نمای بصری قرار دارد، ممکن است هنگام اجرای رویداد بارگذاری پنجره هنوز دانلود نشود. دلیل این امر این است که این رویداد فقط بر اساس صدای بارگذاری شده با اشتیاق اجرا میشود - صدای بارگذاری شده با تنبلی حتی اگر در نمای بصری هنگام بارگذاری اولیه صفحه قرار داشته باشد، در نظر گرفته نمیشود.
بارگیری فقط زمانی به تعویق میافتد که جاوا اسکریپت فعال باشد. این یک اقدام ضد ردیابی است، زیرا اگر یک عامل کاربر از بارگذاری تنبل در هنگام غیرفعال بودن اسکریپت پشتیبانی کند، همچنان میتوان موقعیت تقریبی پیمایش کاربر را در طول یک جلسه ردیابی کرد، با قرار دادن استراتژیک صدا در نشانهگذاری صفحه به گونهای که سرور بتواند تعداد درخواستهای صوتی و زمان آنها را ردیابی کند.
توجه: ویژگی
همچنین بر ویژگی پخش خودکار تأثیر میگذارد، همانطور که در آن بخش از این صفحه توضیح داده شده است.
loop
یک ویژگی بولی: در صورت مشخص شدن، پخشکننده صدا پس از رسیدن به انتهای صدا، به طور خودکار به ابتدا برمیگردد.
muted
یک ویژگی بولی که نشان میدهد آیا صدا در ابتدا بیصدا خواهد شد یا خیر. مقدار پیشفرض آن false است.
preload
این ویژگی شمارشی برای ارائه راهنمایی به مرورگر در مورد آنچه نویسنده فکر میکند منجر به بهترین تجربه کاربری میشود، در نظر گرفته شده است. ممکن است یکی از مقادیر زیر را داشته باشد:
none: نشان میدهد که صدا نباید از قبل بارگیری شود.
metadata: نشان میدهد که فقط متادیتای صوتی (مثلاً طول) دریافت میشود.
auto: نشان میدهد که کل فایل صوتی قابل دانلود است، حتی اگر انتظار نمیرود کاربر از آن استفاده کند.
empty string: مترادف مقدار auto.
مقدار پیشفرض برای هر مرورگر متفاوت است. مشخصات توصیه میکند که روی متادیتا تنظیم شود.
صدا با ویژگی
فقط زمانی رفتار پیشبارگذاری را اعمال میکند که کنترلهای صوتی نزدیک یا درون نمای دید باشند. ویژگی autoplay نسبت به preload اولویت دارد. اگر autoplay مشخص شود، مرورگر بدیهی است که باید دانلود صدا را برای پخش شروع کند.
مرورگر طبق مشخصات مجبور به پیروی از مقدار این ویژگی نیست؛ این فقط یک اشاره است.
src
آدرس اینترنتی صوتی که باید جاسازی شود. این موضوع تابع کنترلهای دسترسی HTTP است. این اختیاری است؛ در عوض میتوانید از عنصر
در بلوک audio برای مشخص کردن صوتی که باید جاسازی شود استفاده کنید.
