Naat Website Script 2024

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
  <div class="container">
    <h1 class="logo">Asad Raza Attari Naat</h1>
  </div>
</header>

<main>
  <div class="container">
    <div id="music-player" class="music-player hidden">
      <audio id="audioPlayer" controls>
        Your browser does not support the audio element.
      </audio>
    </div>

<div id="music-list" class="music-list">
      <h2>Music List</h2>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Artist</th>
            <th>Duration</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <td>Sallallahu Alaa Muhammad</td>
            <td>Asad Raza Attari</td>
            <td>4:20</td>
            <td><button onclick="playMusic('https://www.naatsharif.com/download-mp3/asad-raza-attari/sallallahu-alaa-muhammad.mp3')">Play</button></td>
          </tr>
 
          
        </tbody>
      </table>
    </div>
  </div>
</main>

<footer>
  <div class="container">
    <p>© 2024 My Naat Website</p>
  </div>
</footer>

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.logo {
  margin: 0;
  padding: 0;
  font-size: 24px;
}

main {
  padding: 20px 0;
}

.music-player {
  text-align: center;
}

.music-player.hidden {
  display: none;
}

.music-list table {
  width: 100%;
  border-collapse: collapse;
}

.music-list th, .music-list td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.music-list th {
  background-color: #f2f2f2;
}

.music-list tbody tr:hover {
  background-color: #f9f9f9;
}

.music-list td button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.music-list td button:hover {
  background-color: #0056b3;
}
</style>
<script>
function playMusic(filename) {
  var audioPlayer = document.getElementById('audioPlayer');
  var musicPlayer = document.getElementById('music-player');
  
  audioPlayer.src = filename;
  audioPlayer.play();
  
  musicPlayer.classList.remove('hidden');
}
</script>

Dipankar Gamer 2

Advertisement

Ad code

Naat Website Script 2024

Posted by PicLinks

Post a Comment

0 Comments

Comments

Most Popular

Free Hosting 2024

Snake Game Html5 Code

nickname generator stylish text -Privacy Policy

Random Posts

Subscribe Us

Facebook

Tags

Menu Footer Widget

Contact form

Dipankar Gamer 2

Advertisement

Ad code

Naat Website Script 2024

Posted by PicLinks

You may like these posts

Post a Comment

0 Comments

Comments

Social Plugin

Most Popular

Free Hosting 2024

Snake Game Html5 Code

nickname generator stylish text -Privacy Policy

Random Posts

Subscribe Us

Facebook

Tags

Menu Footer Widget

Contact form