عنصر Audio

          ابن حسام 
            بازدید : 270
          شنبه 02 شهریور 1398
           نظرات (0)
        

عنصر <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>