کمیته علمی کامپیوتر و فناوری اطلاعات آموزشکده فنی ابن حسام

رئیس آموزشکده فنی و حرفه ای پسران بیرجند در نشست خبر : دانشگاه فنی و حرفه ای نیرهای متخصص و آگاه از فنون آکادمی را تحویل جامعه می دهد .

مسئولان ساخت نمازخانه و کتابخانه دانشکده ابن حسام بیرجند را پیگیری کنند

افتتاح سردرب ورودی ساختمان آموزشی ، اداری شماره 1 دانشکده فنی و حرفه ای ابن حسام با حضور مسئولین ارشد مرکز استان

عنصر Audio

عنصر <audio> کاملاً مشابه عنصر video است. با این حال، تنها تفاوت اصلی این است که هیچ بخش دیداری ندارد. می‌توان از عنصر audio برای پخش یک فایل صوتی مانند فایل mp3 در صفحه وب استفاده کرد.

اکنون همانند تگ ویدئو، دو روش مختلف برای انجام این کار وجود دارد:

استفاده از یک تگ منفرد برای نمایش کل عنصر audio
استفاده از تگ باز کردن و بستن با عناصر فرزند در میان آن دو.

در کد زیر شاهد یک تگ audio یا تگ‌های باز و بسته هستیم و سپس عنصر source را میان این دو تگ اضافه خواهیم کرد:

ساختار پوشه می‌تواند مانند زیر باشد:

1
2
3
4
5
6
7
8

|-- project
    |-- audio
      |-- sample.mp3
      |-- sample.ogg
    |-- css
      |-- main.css
      |-- normalize.css
    index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <audio>
        <source src="audio/sample.mp3"type="audio/mpeg">
      </audio>
    </body>
</html>

همان‌طور که می‌بینید در مثال فوق هیچ خصوصیت کنترلی به عنصر <audio> داده نشده است و از این رو عنصر <audio> در سند HTML نمایش نمی‌یابد.

اکنون می‌توانیم ببینیم که تنها چند تفاوت جزئی وجود دارند. مقدار خصوصیت type از “video/mp4” به “audio/mp3” تغییر یافته است. در خصوصیت src از پسوند فایل ویدئویی mp4. به یک پسوند فایل صوتی mp3. تغییر داده‌ایم.

همانند عنصر ویدئو ما در عمل نمی‌توانیم قطعه صوتی را بدون وجود کنترل آغاز یا متوقف سازیم. از این رو خصوصیت controls را نیز به عنصر audio اضافه می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"content="width=device-width, initial-scale=1.0">
        <title>Video</title>
        <link rel="stylesheet"href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700"rel="stylesheet">
        <link rel="stylesheet"href="css/main.css">
    </head>
    <body>
      <audio controls>
        <source src="audio/sample.mp3"type="audio/mpeg">
        <source src="audio/sample.ogg"type="audio/ogg">
      </audio>
    </body>
</html>