Adding Background Audio to Webpage Using Only HTML & CSS | 2 Methods

yotube
0



Hello Guys, In this article or video we will see Adding Background Audio to Webpage Using HTML & CSS. You will use this Adding Background Audio to Webpage on your website freely. If you learn How to create this Adding Background Audio to Webpage so watch my video from YouTube or below. And you wish to learn more amazing HTML, CSS, and JavaScript Effect or Tutorial so Subscribe to my YouTube Channel Pure Coding and Stay with this website.

Watch Video

--------------------

 

Source Code

--------------------

First add this code on index.html file:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewportcontent="width=device-width, initial-scale=1.0">

    <link rel="stylesheettype="text/csshref="style.css">

    <title>Background Audio in Webpage - Pure Coding</title>

    <audio>
        <source src="audio.mp3type="audio/mpeg">
    </audio>
</head>
<body>
    <div class="wrapper">
        <h1>Background Audio in Webpage - Pure Coding</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis dolor
        harum ex fugit voluptas. Consequatur dolores doloribus, amet aperiam sint
        aliquid sit quisquam libero explicabo, cum dolorum itaque! Distinctio at,
        numquam dicta asperiores harum porro est veritatis quibusdam, dignissimos
        in temporibus dolorum aliquid quas perferendis iure ut sapiente dolores
        eligendi sunt fugit maiores voluptates. Assumenda esse voluptatem aut
        maxime repellat eveniet doloribus nobis quam hic eaque necessitatibus qui,
        quos itaque officia consequatur, soluta molestias beatae quod veritatis
        aspernatur tempora modi? Vitae dolores cum temporibus? Modi tempore et
        eveniet consequatur autem eligendi nam quo ut expedita. Ullam enim quas
        commodi neque.</p>
    </div>
</body>
</html>
 
 
Then add this code on the style.css file:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;
1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #000;
}

.wrapper {
    margin: 20px;
}

.wrapper h1 {
    color: #FFF;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
}

.wrapper p {
    color: #FFF;
    font-weight: 500;
    text-align: justify;
    margin: 20px 0;
}

.wrapper p:last-child {
    margin-bottom: 0;
}

.audio {
    position: absolute;
    left: -999px;
    top: -999px;
}

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top