Play an audio file using js

It is now easy to add audio to media content, such as audio files, can now be easily fixed into web pages in today’s technology time. Understanding how to use HTML, JavaScript, and CSS to develop an audio player is a useful ability, whether we are building a website, sharing music samples, or just improving user experience with sound.

WORKING AND IMPLEMENTATION

audio.html

starting with the html file(audio.html) we use <audio> element to embed audio file. inside we use source file (audio.mp3) and two buttons (`play`and `pause`) are added to control playback.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>audio play</title>
    <link rel="stylesheet" href="stlyle3.css">
</head>
<body>
    <div class="audio-player">
        <audio id="audio" src="audio.mp3"></audio>
        <button id="play-button">play</button>
        <button id="pause-button">pause</button>
    </div>
    <script src="style3.js"></script>
</body>
</html>

style3.css

i name this file as (style3.css) .It visually added responsive background. Centers the audio player on the page and style the two button play and pause.

body{
    font-family: Arial,  sans-serif;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: palevioletred;
}

audio-player{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    border-radius: 10px;
}

button{
    margin: 10px;
    padding:10px 20px;
    font-size: 16px;
    border:none;
    border-radius: 5px;
    color:lightcoral;
    cursor: pointer;
    position: relative;
}

button:hover{
    background-color: black;
}

style3.js

I name this file as (style3.js ). Implementent the js functions to control playback.`playAudio()` and `pauseAudio()` use audio.play() and audio.pause() methods respectively after retrieving audio element by its id(myaudio).

document.addEventListener("DOMContentLoaded", function() {
    const audio = document.getElementById("audio");
    const playButton = document.getElementById("play-button");
    const pauseButton = document.getElementById("pause-button");

    playButton.addEventListener("click",function() {
        audio.play();
    });

     pauseButton.addEventListener("click",function() {
        audio.pause();
});

});

Output:

In this output when i click the pause button its happening that audio is not playing and when i click the play button its happening that audio is playing. In this task of audio is playing its mine voice only. the audio content” codespeedy is the platform where i am doing my internship as a web development intern for the one month”.

Conclusion:

How to create a audio file using html, css ,js. This program allow to play and pause audio files with user interaction when clicking the play and pause button in our website , also improves user interaction attractive by css styling .

Related Posts

Leave a Comment Cancel Reply