آموزش CSS - رسانه شنیداری

در CSS2، مفهوم " Aural Media" به استفاده از برگه‌های استایل (style sheets) جهت کنترل و تنظیم خصوصیات صوتی در حین اجرای یک محتوا توسط ترکیب‌کننده گفتار اشاره دارد. این برگه‌های استایل به نام "Aural Style Sheets" نیز شناخته می‌شوند. با استفاده از CSS2، شما می‌توانید ویژگی‌های صوتی را به عناصر مختلف سند HTML متصل کرده و ترتیب و نحوه ارائه صوت را تعیین کنید.
 
 نمایش دادن سند به صورت صوتی برای افراد نابینا کاربرد بیشتری دارد. برخی از مواردی که یک سند می‌تواند به وسیله نمایش صوتی و نه بصری دسترسی داشته باشد عبارتند از:

• یادگیری خواندن
• آموزش
• دسترسی وب در خودروها
• سرگرمی در خانه
• مستند سازی صنعتی
• مستند سازی پزشکی

برخی از ویژگی‌های مربوط به CSS Aural Media عبارتند از:

• خاصیتِ زاویه‌ی‌صدا(َAzimuth) : ویژگی azimuth در CSS Aural Media تعیین کننده محل افقی (زاویه افقی) از جایی است که صدا باید از آنجا بیاید. این ویژگی به شما اجازه می‌دهد جهت تعیین کنید که صدا از چه سمتی به گوش کاربر برسد.
• خاصیتِ ارتفاع (Elevation) :خاصیت elevation در CSS Aural Media محل عمودی (زاویه عمودی) از جایی که صدا باید از آنجا بیاید را تعیین می‌کند. این ویژگی به شما امکان می‌دهد تا جهت عمودی صدا را نسبت به کاربر مشخص کنید.
• Cue-after(نشانه-پس-از) : خاصیت cue-after در CSS Aural Media برای تعیین صدایی که پس از خواندن محتوای یک عنصر مشخص از صفحه نمایش پخش می‌شود، استفاده می‌شود. این صدا به عنوان نشانه (cue) برای جداسازی محتوای عنصر از محتوای دیگر صفحه استفاده می‌شود.به عبارت دیگر، می‌توانید با استفاده از cue-after یک صدا یا نشانه تعیین کنید که پس از خواندن محتوای یک عنصر، به عنوان نشانه‌ای از انتهای آن محتوا، پخش شود. 
• Cue-before(نشانه-پیش-از): خاصیت cue-before در CSS Aural Media برای تعیین صدایی که باید قبل از خواندن محتوای عنصر  پخش شود ،را مشخص می‌کند. این خاصیت به شما این امکان را می‌دهد که صداهایی را  قبل از شروع خواندن یک عنصر به کار ببرید تا جلب توجه یا ارائه اطلاعات مرتبط با محتوای آینده را داشته باشد.
• Cue(نشانه) : خاصیت cue در CSS Aural Media یک شارژ (shorthand) است که برای تعیین همزمان cue-before و cue-after به کار می‌رود. این خاصیت به شما این امکان را می‌دهد که صداهایی را همزمان قبل و بعد از خواندن محتوای عنصر مشخص کنید.
• Pause-after(توقف-پس-از): خاصیت pause-after در CSS Aural Media برای تعیین مدت زمان وقفه (توقف) بعد از خواندن محتوای عنصر مشخص می‌شود. این ویژگی به شما این امکان را می‌دهد که مشخص کنید چقدر زمانی باید بگذرد پس از پایان خواندن محتوا تا متن بعدی یا عنصر بیاید.
• Pause-before(توقف-پیش-از):خاصیت pause-before در CSS Aural Media برای تعیین مدت زمان وقفه (توقف) قبل از خواندن محتوای عنصر مشخص می‌شود. این ویژگی به شما این امکان را می‌دهد که مشخص کنید چقدر زمانی باید بگذرد پیش از شروع خواندن محتوا تا کاربر زمینه برای دریافت اطلاعات آماده شود.
• توقف (Pause): شامل تنظیم‌های توقف-قبل و توقف-بعد می‌ باشد.
• تنظیم (Pitch): ویژگی pitch در CSS Aural Media برای تعیین میانگین تنظیم صدای صحبت کننده (فرکانس) مشخص می‌شود. این ویژگی به شما این امکان را می‌دهد که فرکانس میانگین صدای خواننده را تنظیم کنید، که تأثیر مستقیمی بر احساس و تجربه کاربر دارد.
• محدوده‌ی تنظیم (Pitch-range):  ویژگی pitch-range در CSS Aural Media برای تعیین محدوده تغییرات در تنظیم (فرکانس) صدا مشخص می‌شود. این ویژگی به شما این امکان را می‌دهد که تغییرات متنوعی را در تنظیم صدای خواننده اعمال کنید.
• پخش-در-حین (Play-during): ویدئو یا صدایی که در حین نمایش عنصر به عنوان پس زمینه پخش شود.
• کیفیت صدا (Richness): در CSS Aural Media، ویژگی "richness" واقعاً وجود دارد و برای تنظیم "richness" یا "brightness" ،صدای صحبت کننده مشخص می‌باشد .این ویژگی به عنوان یک اعداد اعشاری یا عدد صحیح مشخص می‌شود و مقادیر بین 0 و 100 را می‌پذیرد. افزایش "richness" منجر به افزایش brightness یا کیفیت صدا می‌شود.
• صحبت کردن (Speak):در CSS Aural Media، ویژگی "speak" برای مشخص کردن نحوه رندر (پخش) متن به صورت شنیداری استفاده می‌شود. این ویژگی به شما این امکان را می‌دهد که تعیین کنید متن چگونه باید به صورت صوتی پخش شود. مقادیر مختلفی برای این ویژگی وجود دارد که هر کدام نحوه متفاوتی از پخش کردن متن را تعیین می‌کنند.
• گفتار-عددی (Speak-numeral): روش تلفظ اعداد را کنترل می‌کند.
• گفتار-علامت‌گذاری (Speak-punctuation): روش تلفظ علامت‌گذاری را مشخص می‌کند.
• نرخ گفتار (Speech-rate): ویژگی "speech-rate" در CSS Aural Media برای مشخص کردن نرخ گفتار یا سرعت صوتی استفاده می‌شود. این ویژگی به شما این امکان را می‌دهد که سرعت گفتار متن را تنظیم کنید.

این ویژگی‌ها به ترتیب به عناصر HTML اختصاص می‌یابند و توسط ترکیب‌کننده گفتار برای ارائه صوتی به کاربر استفاده می‌شوند. برای مثال، می‌توانید با استفاده از این ویژگی‌ها، یک عنصر صفحه وب را به گونه‌ای تنظیم کنید که در حین نمایش، صداها با جهت و خصوصیات مختلف پخش شوند.

 مثال :

<html>
   <head>
      <style type = "text/css">
         h1, h2, h3, h4, h5, h6 {
            voice-family: paul;
            stress: 20;
            richness: 90;
            cue-before: url("../audio/pop.au");
         }
         p {
            azimuth:center-right;
         }
      </style>
   </head>

   <body>
   
      <h1>example.com</h1>
      <h2>example.com</h2>
      <h3>example.com</h3>
      <h4>example.com</h4>
      <h5>example.com</h5>
      <h6>example.com</h6>
      <p>example.com</p>
      
   </body>
</html> 

این کد صدای هدر ها را با صدایی به نام "پل"(paul) با تن صاف ولی با صدای غنی خوانده خواهد شد. قبل از خواندن هدر ها ، یک نمونه صوتی از URL داده‌شده پخش خواهد شد.

خاصیت Elevation 

خاصیت elevation در CSS Aural Media محل عمودی (زاویه عمودی) از جایی که صدا باید از آنجا بیاید را تعیین می‌کند. این ویژگی به شما امکان می‌دهد تا جهت عمودی صدا را نسبت به کاربر مشخص کنید.

• angle - موقعیت بر حسب زاویه ای در محدوده -90 درجه تا 90 درجه توصیف می شود. مقدار 0deg به معنای مستقیما جلوتر در مرکز صحنه صدا است. 90 درجه مستقیماً در بالا و -90 درجه مستقیماً زیر است.

• left-side − با 'behind'، '270deg' برابر است.

• far-left − با 'behind'، '240deg' برابر است.

• left − با 'behind'، '220deg' برابر است.

• center-left − با 'behind'، '200deg' برابر است.

• center − با 'behind'، '180deg' برابر است.

• center-right − با 'behind'، '160deg' برابر است.

• right − با 'behind'، '140deg' برابر است.

• far-right − با 'behind'، '120deg' برابر است.

• right-side − با 'behind'، '90deg' برابر است.

• leftwards − صدا را به سمت چپ و نسبت به زاویه فعلی حرکت می‌دهد. دقیق‌تر، ۲۰ درجه کم می‌کند.

• rightwards − صدا را به سمت راست و نسبت به زاویه فعلی حرکت می‌دهد. دقیق‌تر، ۲۰ درجه اضافه می‌کند.

<style type = "text/css">
   <!--
      h1   { azimuth: 30deg }
      td.a { azimuth: far-right }          /*  60deg */
      #12  { azimuth: behind far-right }   /* 120deg */
      p.comment { azimuth: behind }        /* 180deg */
   -->
</style>

 خاصیت بلندای صوتی (elevation Property)

خاصیت بلندای صوتی مشخص می کند صدا از کجا به صورت عمودی پخش شود. مقادیر ممکن عبارتند از:

• زاویه (angle) − مقدار بلندای صوتی را به صورت یک زاویه بین -90deg و 90deg مشخص می کند. 0deg به معنی افق پیشین است که به طور کلی به معنی هم‌ارتفاع با شنونده است. 90deg به معنی به طور مستقیم بالای سر و -90deg به معنی به طور مستقیم زیر پا است.

• زیر (below) − همان مقدار '-90deg' است.

• هم‌ارتفاع (level) − همان مقدار '0deg' است.

• بالایی (above) − همان مقدار '90deg' است.

• بالاتر (higher) − 10 درجه به بلندای صوتی فعلی اضافه می کند.

• پایین‌تر (lower) − 10 درجه از بلندای صوتی فعلی کم می‌کند.

مثال:

<style type = "text/css">
   <!--
      h1   { elevation: above }
      tr.a { elevation: 60deg }
      tr.b { elevation: 30deg }
      tr.c { elevation: level }
   -->
</style>

خاصیت cue-after

 خاصیت cue-after در CSS Aural Media برای تعیین صدایی که پس از خواندن محتوای یک عنصر مشخص از صفحه نمایش پخش می‌شود، استفاده می‌شود. این صدا به عنوان نشانه (cue) برای جداسازی محتوای عنصر از محتوای دیگر صفحه استفاده می‌شود.به عبارت دیگر، می‌توانید با استفاده از cue-after یک صدا یا نشانه تعیین کنید که پس از خواندن محتوای یک عنصر، به عنوان نشانه‌ای از انتهای آن محتوا، پخش شود.مقادیر ممکن عبارتند از:

• url − آدرس فایل صوتی که باید پخش شود.

• none − هیچ صدایی پخش نمی‌شود.

<style type = "text/css">
   <!--
      a {cue-after: url("dong.wav");}
      h1 {cue-after: url("pop.au"); }
   -->
</style>

خاصیت cue-before

اخاصیت cue-after در CSS Aural Media برای تعیین صدایی که پس از خواندن محتوای یک عنصر مشخص از صفحه نمایش پخش می‌شود، استفاده می‌شود. این صدا به عنوان نشانه (cue) برای جداسازی محتوای عنصر از محتوای دیگر صفحه استفاده می‌شود.به عبارت دیگر، می‌توانید با استفاده از cue-after یک صدا یا نشانه تعیین کنید که پس از خواندن محتوای یک عنصر، به عنوان نشانه‌ای از انتهای آن محتوا، پخش شود. . مقادیر ممکن عبارتند از:

• url − آدرس فایل صوتی که باید پخش شود.

• none − هیچ صدایی پخش نمی‌شود.

اینجا یک مثال آمده است −

<style type = "text/css">
   <!--
      a {cue-before: url("bell.aiff");}
      h1 {cue-before: url("pop.au"); }
   -->
</style>

خاصیت cue

خاصیت cue در CSS Aural Media یک شارژ (shorthand) است که برای تعیین همزمان cue-before و cue-after به کار می‌رود. این خاصیت به شما این امکان را می‌دهد که صداهایی را همزمان قبل و بعد از خواندن محتوای عنصر مشخص کنید.

به عنوان مثال، دو قانون زیر معادل هم هستند −

<style type = "text/css">
   <!--
      h1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
      h1 {cue: url("pop.au") }
   -->
</style>

Regenerate response Send a message... ChatGPT Mar 23 Version. Free Research Preview. ChatGPT may produce inaccurate information about people, places, or facts

خاصیت pause-before

این ویژگی یک توقف را قبل از خواندن محتوای عنصر مشخص می‌کند. مقادیر ممکن عبارتند از:

• time (زمان) − این مقدار میزان توقف را با استفاده از واحد زمانی (ثانیه و میلی ثانیه) مشخص می‌کند.

• درصد − به معکوس مقدار ویژگی speech-rate ارجاع دارد. به عنوان مثال، اگر سرعت گفتار 120 کلمه در دقیقه باشد (یعنی یک کلمه نیم ثانیه یا 500 میلی ثانیه طول می کشد)، آنگاه یک pause-before به اندازه 100٪ به معنای توقف 500 میلی ثانیه و یک pause-before به اندازه 20٪ به معنای 100 میلی ثانیه است.

خاصیت pause

این ویژگی یک مخفف برای تنظیم pause-before و pause-after است. اگر دو مقدار داده شود، مقدار اول pause-before و مقدار دوم pause-after است.

اینجا یک مثال آورده شده است −

<style type = "text/css">
   <!--
      /* pause-before: 20ms; pause-after: 20ms */
      h1 { pause : 20ms }  
	
      /* pause-before: 30ms; pause-after: 40ms */
      h2{ pause : 30ms 40ms }  
	
      /* pause-before: ?; pause-after: 10ms */
      h3 { pause-after : 10ms }
   -->
</style>

خاصیت Pitch

این ویژگی میانگین زمانبندی (فرکانس) صدای گفتار را مشخص می کند. میانگین زمانبندی یک صدای گفتاری به خانواده صدا بستگی دارد. به عنوان مثال، میانگین زمانبندی برای یک صدای مرد عادی حدود ۱۲۰ هرتز است، اما برای یک صدای زن، حدود ۲۱۰ هرتز است. مقادیر ممکن عبارتند از −

• فرکانس (frequency) − میانگین زمانبندی صدای گفتاری را به هرتز (Hz) مشخص می کند.

• کم (low)، متوسط (medium)، زیاد (high)، خیلی زیاد (x-high)، خیلی کم (x-low) − این مقادیر به فرکانس‌های مطلق نمی‌مانند زیرا بستگی به خانواده صدا دارند.

خاصیت pitch-range

این ویژگی متغیریت در پیچیدگی متوسط صدای متوسط را مشخص می‌کند. مقادیر ممکن عبارتند از −

• عدد − یک مقدار بین '0' و '100'. پیچیدگی پیچ با مقدار '0' صدای تک‌نتون و بدون تنوعی تولید می‌کند. پیچیدگی پیچ با مقدار 50 صدای طبیعی دارای تنوع معمولی را تولید می‌کند. پیچیدگی پیچ با مقادیر بیشتر از 50 صداهای پویا و انیمیشنی را تولید می‌کند.

خاصیت play-during

این ویژگی یک صدا را به عنوان پس زمینه در حالت تلفظ محتوای یک عنصر مشخص می‌کند. مقادیر ممکن عبارتند از هر کدام از موارد زیر −

• آدرس اینترنتی (URI) − صدای مشخص شده توسط این <uri> به عنوان پس زمینه در حالت تلفظ محتوای عنصر پخش می‌شود.

• mix − وقتی این کلمه کلیدی موجود است، به معنی این است که صدای به ارث برده شده از ویژگی play-during عنصر والد به پخش ادامه می‌دهد و صدای مشخص شده توسط uri با آن ترکیب می‌شود. اگر mix مشخص نشده باشد، صدای پس زمینه عنصر جایگزین پس زمینه عنصر والد می‌شود.

• تکرار (repeat) − وقتی این کلمه کلیدی موجود است، به معنی این است که صدا در صورتی که کوتاه باشد و برای پر کردن مدت زمان عنصر کافی نباشد، تکرار خواهد شد. در غیر این صورت، صدا یکبار پخش می‌شود و سپس متوقف می‌شود.

• خودکار (auto) − صدای عنصر والد ادامه پخش می‌دهد.

• هیچ (none) − این کلمه کلیدی به معنای خاموشی است.

اینجا مثالی آورده شده است −

<style type = "text/css">
   <!--
      blockquote.sad { play-during: url("violins.aiff") }
      blockquote q   { play-during: url("harp.wav") mix }
      span.quiet     { play-during: none }
   -->
</style>

خاصیت richness

این خاصیت شدت یا روشنایی صدای گفتار را مشخص می‌کند. مقادیر ممکن عبارتند از −

• number − مقداری بین '0' و '100'. هر چه مقدار بیشتر باشد، صدای بلندتری ایجاد خواهد شد. مقدار کمتر به صدای نرم و شیرینتری منجر می‌شود.

خاصیت speak

این خاصیت مشخص می‌کند که آیا متن به صورت صوتی پخش می‌شود و اگر بله، به چه شکلی. مقادیر ممکن عبارتند از −

• none (هیچ) − سبک صدایی را بدون نمایش صوتی پایه می‌گذارد تا عنصر نیازی به زمان برای نمایش دادن نداشته باشد.

• normal (نرمال) − برای نمایش یک عنصر و فرزندانش از قواعد تلفظ وابسته به زبان استفاده می‌کند.

• spell-out (تلفظ شده) − متن را با حرف به حرف املای می‌کند.

تفاوت بین یک عنصری که ویژگی 'volume' آن مقدار 'silent' دارد و یک عنصری که ویژگی 'speak' آن مقدار 'none' دارد را توجه کنید. عنصر اول به همان مدت زمانی که باید صحبت شده باشد شامل هر توقفی قبل و بعد از عنصر است، اما هیچ صدایی تولید نمی شود. عنصر دوم هیچ زمانی را نیاز ندارد و رندر نمی شود.

خاصیت speak-numeral

این ویژگی کنترل می کند که اعداد چگونه خوانده می شوند. مقادیر ممکن عبارتند از −

• digits (اعداد) − اعداد به عنوان رقم های جداگانه خوانده می شوند. بنابراین، "237" به عنوان "دو سه هفت" خوانده می شود.

• continuous (پیوسته) − اعداد به صورت یک عدد کامل خوانده می شوند. بنابراین، "237" به عنوان "دویست و سی و هفت" خوانده می شود. نمایش کلمات به زبان وابسته است.

خاصیت speak-punctuation

این ویژگی نحوه تلفظ علائم نگارشی را مشخص می‌کند. مقادیر ممکن عبارتند از −

• code (کد) − علائم نگارشی مانند نقطه ویرگول، پرانتز، و غیره با صورت کلمه به صورت متناظر تلفظ می‌شوند.

• none (هیچ کدام) − علائم نگارشی تلفظ نمی‌شوند، بلکه به صورت طبیعی به شکل مکث‌های مختلف پخش می‌شوند.

خاصیت speech-rate

این ویژگی نرخ تلفظ را مشخص می‌کند. توجه کنید که هر دو مقدار کلمه کلیدی نسبی و مطلق مجاز هستند. مقادیر ممکن عبارتند از −

• شماره − نرخ تلفظ را در واژگان در دقیقه مشخص می کند. (number)

• خیلی کند − همانند 80 واژه در دقیقه است. (x-slow)

• کند − همانند 120 واژه در دقیقه است. (slow)

• متوسط − همانند 180 - 200 واژه در دقیقه است. (medium)

• سریع − همانند 300 واژه در دقیقه است. (fast)

• خیلی سریع − همانند 500 واژه در دقیقه است. (x-fast)

• سریعتر − 40 واژه به نرخ تلفظ کنونی اضافه می کند. (faster)

• کندتر − 40 واژه از نرخ تلفظ کنونی کم می کند. (slower)

خاصیت استرس (stress)

این ویژگی ارتفاع "قله های محلی" در تلفظ صدای گفتار را مشخص می کند. زبان انگلیسی یک زبان استرسی است و بخش های مختلف جمله به استرس اولیه، ثانویه و سومیه تخصیص داده می شود. مقادیر ممکن عبارتند از −

• شماره − یک مقدار بین '0' و '100' است. معنای مقادیر بستگی به زبان صحبت شده دارد. به عنوان مثال، سطح '50' برای یک صدای مرد متوسط بلندگوی انگلیسی (فرکانس متوسط = 122 هرتز) که با تلفظ و تاکید معمول صحبت می کند، معنای متفاوتی نسبت به '50' برای یک صدای ایتالیایی خواهد داشت.

خاصیت خانواده صدا (voice-family)

مقدار یک لیست جدا شده با کاما از نام های خانواده صدا است. مقادیر زیر ممکن است −

• صدای عمومی (generic-voice) − مقادیر خانواده های صدا هستند. مقادیر ممکن عبارتند از 'مرد'، 'زن' و 'کودک'.

• صدای خاص (specific-voice) − مقادیر نمونه های خاصی هستند (به عنوان مثال، کمدین، ترینوئید، کارلوس، لانی).

در ادامه مثالی آورده شده است −

<style type = "text/css">
   <!--
      h1 { voice-family: announcer, male }
      p.part.romeo  { voice-family: romeo, male }
      p.part.juliet { voice-family: juliet, female }
   -->
</style>

خاصیت صدا (خروجی صوتی)

ویژگی صدا حجم میانگین صدای صوت را مشخص می‌کند. می‌تواند ارزش‌های زیر را داشته باشد:

• numbers (اعداد) − هر عددی بین '0' تا '100'. عدد '0' نشان‌دهنده حداقل سطح صدای قابل شنیدن و 100 بیانگر سطح مطلوب حداکثر صدای قابل تحمل است.

خاصیت Volume

Volume به میانگین صدای صدای صدا اشاره دارد. می تواند مقادیر زیر را داشته باشد −

• numbers − هر عددی بین '0' و '100'. عدد '0' میزان حداقل قابل شنیدن را نشان می دهد و 100 با میزان حداکثر راحتی مطابقت دارد.

• percentage − این مقادیر نسبت به مقدار وراثت شده محاسبه می شوند و سپس در محدوده '0' تا '100' قرار می گیرند.

• silent − هیچ صدایی ندارد. مقدار '0' همان معنای 'silent' را ندارد.

• x-soft − همانند '0' است.

• soft − همانند '25' است.

• medium − همانند '50' است.

• loud − همانند '75' است.

• x-loud − همانند '100' است.

مثال

<style type = "text/css">
   <!--
      P.goat  { volume: x-soft }
   -->
</style>

پاراگراف‌های دارای کلاس goat  خواهند بود.