HTML অডিও উপাদান (The HTML Audio element)

<audio>: HTML অডিও উপাদান (The HTML Audio element)

<audio> HTML উপাদান অডিও হল, যেমন সঙ্গীত বা শব্দ প্রভাব সরাসরি একটি ওয়েব পৃষ্ঠায় এম্বেড করতে ব্যবহৃত হয়। এটি ওয়েব ডেভেলপারদের আলাদাভাবে অডিও ফাইল ডাউনলোড করার প্রয়োজন ছাড়াই ব্যবহারকারীদের জন্য একটি অডিও প্লেব্যাক অভিজ্ঞতা প্রদান করতে দেয়। অডিও ফাইল ওয়েব পেজ বা ওয়েব সাইট এর সঙ্গে ব্যবহার করার জন্যে এই এইচটিএমএল ট্যাগ ব্যবহার করা হয়।

<audio>: HTML অডিও উপাদান (The HTML Audio element) এর কিছু attribute হল –

Autoplay
Controls
Loop
Muted
Src
Preload

Autoplay

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
  <!--Autoplay: This means all selected audio file will play autometicly-->
    <audio controls autoplay>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
</body>
</html

Controls

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
<!--Audio contorl keywords below-->
    <!--Controls: Controls keywords for contorl any audio-->
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

Loop

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
<!--Loop: You need to add two or more audio file here. When all video will finish to play this will back to first -->
    <audio controls loop>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

Muted

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
<!--Muted: This will mute the audio when load the web page-->
    <audio controls muted>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>

</body>
</html>

Src

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
<!--Src: you can use any video link to use src keywords-->
    <audio src="audio.mp3" controls>
    </audio>

</body>
</html>

Preload

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>

<!--Preload: This keyword will help to preload any audio -->
    <audio src="audio.mp3" preload="auto"></audio>
</body>
</html>

সম্পূর্ণ কোডঃ

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML MASTER JHUTANDA</title>
    <!--https://jhutanda.com-->
    <!--https://github.com/jhutanda-->
</head>

<body>
    <!--Simple Example-->
    <audio src="audio.mp3">
    </audio>
    <!--Example: Here is different types of extention name audio file-->
    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        <source src="audio.ogg" type="audio/ogg">
        <source src="audio.mpeg" type="audio/mpeg">
    </audio>
    <!--Audio contorl keywords below-->
    <!--Controls: Controls keywords for contorl any audio-->
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
    <!--Autoplay: This means all selected audio file will play autometicly-->
    <audio controls autoplay>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
    <!--Loop: You need to add two or more audio file here. When all video will finish to play this will back to first -->
    <audio controls loop>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
    <!--Muted: This will mute the audio when load the web page-->
    <audio controls muted>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
    <!--Src: you can use any video link to use src keywords-->
    <audio src="audio.mp3" controls>
    </audio>
    <!--Preload: This keyword will help to preload any audio -->
    <audio src="audio.mp3" preload="auto"></audio>

</body>

</html>