index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Music Wesbite</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="navbar">
            <img src="media/logo1.png" class="logo" alt="logo">
            <ul>
                <li><a href="#">Again by Yui <span> (Fullmetal Alchemist Brotherhood's Opening Song)</span> </a></li>
                <!-- <li><a href="#">ABOUT</a></li>
                <li><a href="#">SPECIFICATIONS</a></li>
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">CONNECT</a></li> -->
            </ul>
        </div>

        <div class="content">
            <div class="left-col">
                
            </div>
            <div class="right-col">
                <p>Click Here To Listen</p>
                <img src="media/play5.png" alt="" id="icon">
            </div>
        </div>
    
    </div>

    <audio id="mysong">

        <source src="media/Again.mp3" type="audio/mp3">
    </audio>

    <script>
        var mysong = document.getElementById("mysong");
        var icon = document.getElementById("icon");

        icon.onclick = function(){
            if(mysong.paused){
                mysong.play();
                icon.src = "media/pause5.png";
            }else{
                mysong.pause();
                icon.src = "media/play5.png";
            }
            
        }



    </script>
    
    
</body>
</html>