--- id: 587d7789367417b2b2512aa4 title: Improve Accessibility of Audio Content with the audio Element challengeType: 0 videoUrl: '' localeTitle: تحسين إمكانية الوصول إلى المحتوى الصوتي باستخدام عنصر الصوت --- ## Description

يمنح عنصر HTML5 audio معنىً دلاليًا عندما يلف محتوى دفق الصوت أو الصوت في الترميز. يحتاج المحتوى الصوتي أيضًا إلى بديل نصي ليكون متاحًا للأشخاص الصم أو ضعاف السمع. يمكن إجراء ذلك باستخدام نص مجاور على الصفحة أو رابط إلى نص. تدعم علامة audio سمة controls . يعرض هذا التشغيل الافتراضي للمتصفح والإيقاف المؤقت وعناصر التحكم الأخرى ، ويدعم وظيفة لوحة المفاتيح. هذه سمة منطقية ، بمعنى أنها لا تحتاج إلى قيمة ، حيث يؤدي وجودها على العلامة إلى تشغيل الإعداد. إليك مثال على ذلك:

<audio id = "meowClip" controls>
<source src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" type = "audio / ogg" />
</ الصوت>

ملحوظة
عادةً ما يحتوي محتوى الوسائط المتعددة على مكونات مرئية وسمعية. يحتاج إلى تسميات توضيحية متزامنة وملف نصي حتى يتمكن المستخدمون الذين يعانون من إعاقات بصرية و / أو سمعية من الوصول إليه. بشكل عام ، لا يتحمل مطور الويب مسؤولية إنشاء التسميات التوضيحية أو النص ، ولكن يجب أن يعرف كيفية تضمينها.

## Instructions

حان الوقت للاستراحة من Camper Cat ومقابلة زميل Zperiax (zersiax) ، وهو بطل إمكانية الوصول ومستخدم قارئ الشاشة. للاستماع إلى مقطع قارئ الشاشة الخاص به أثناء العمل ، أضف عنصرًا audio بعد p . قم بتضمين سمة controls . ثم ضع علامة source داخل علامات audio مع تعيين سمة src إلى "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type تعيين السمة على "audio / mpeg". ملحوظة
قد يبدو المقطع الصوتي سريعًا ويصعب فهمه ، ولكن هذه سرعة عادية لمستخدمي قارئ الشاشة.

## Tests

```yml tests: - text: يجب أن تحتوي شفرتك على علامة audio واحدة. testString: 'assert($("audio").length === 1, "Your code should have one audio tag.");' - text: تأكد من أن عنصر audio الخاص بك يحتوي على علامة إغلاق. testString: 'assert(code.match(/<\/audio>/g).length === 1 && code.match(/[\s\S]*<\/audio>/g), "Make sure your audio element has a closing tag.");' - text: يجب أن تحتوي علامة audio سمة controls . testString: 'assert($("audio").attr("controls"), "The audio tag should have the controls attribute.");' - text: يجب أن تحتوي الشفرة على علامة source واحدة. testString: 'assert($("source").length === 1, "Your code should have one source tag.");' - text: يجب أن تكون علامة source الخاصة بك داخل علامات audio . testString: 'assert($("audio").children("source").length === 1, "Your source tag should be inside the audio tags.");' - text: يجب أن تتطابق قيمة السمة src على العلامة source مع الارتباط الموجود في الإرشادات بالضبط. testString: 'assert($("source").attr("src") === "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3", "The value for the src attribute on the source tag should match the link in the instructions exactly.");' - text: يجب أن تحتوي شفرتك على سمة type على العلامة source بقيمة صوت / mpeg. testString: 'assert($("source").attr("type") === "audio/mpeg", "Your code should include a type attribute on the source tag with a value of audio/mpeg.");' ```

## Challenge Seed

```html

Real Coding Ninjas

A sound clip of Zersiax's screen reader in action.

```

## Solution

```js // solution required ```