The Palos Publishing Company

Categories We Write About

Build a YouTube playlist duration calculator

Written by

Bernardo Palos

in

Here’s a simple YouTube Playlist Duration Calculator you can build using JavaScript and HTML. This tool lets users input the duration of each video in a playlist and calculates the total duration.

✅ Features:

  • Input video durations in hh:mm:ss, mm:ss, or ss format

  • Auto-calculates the total time

  • Clean, responsive UI

📜 HTML + JavaScript Code:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>YouTube Playlist Duration Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      max-width: 600px;
      margin: auto;
      background-color: #f8f9fa;
    }
    h1 {
      text-align: center;
      color: #d33c44;
    }
    textarea, input, button {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      font-size: 16px;
    }
    .output {
      font-size: 18px;
      margin-top: 15px;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

<h1>YouTube Playlist Duration Calculator</h1>

<label for="durations">Paste video durations (one per line):</label>
<textarea id="durations" rows="10" placeholder="e.g., 12:35&#10;5:02&#10;1:02:45"></textarea>

<button onclick="calculateDuration()">Calculate Total Duration</button>

<div class="output" id="result"></div>

<script>
function parseDuration(durationStr) {
  const parts = durationStr.trim().split(":").map(Number);
  if (parts.length === 3) {
    return parts[0] * 3600 + parts[1] * 60 + parts[2]; // hh:mm:ss
  } else if (parts.length === 2) {
    return parts[0] * 60 + parts[1]; // mm:ss
  } else if (parts.length === 1) {
    return parts[0]; // ss
  }
  return 0;
}

function formatSeconds(totalSeconds) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  return `${hours}h ${minutes}m ${seconds}s`;
}

function calculateDuration() {
  const input = document.getElementById("durations").value;
  const lines = input.split("n").filter(line => line.trim() !== "");
  let totalSeconds = 0;

  for (const line of lines) {
    totalSeconds += parseDuration(line);
  }

  const formatted = formatSeconds(totalSeconds);
  document.getElementById("result").textContent = `Total Playlist Duration: ${formatted}`;
}
</script>

</body>
</html>

🛠 How to Use:

  1. Copy and paste this code into an .html file.

  2. Open it in your browser.

  3. Paste YouTube video durations into the textarea (e.g., 12:35, 1:05:22, 9:04).

  4. Click the button to see total playlist duration.

Let me know if you’d like a version that fetches video durations directly from a public YouTube playlist using the YouTube Data API.

Share This Page:

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Out Our Newest Posts we wrote about

Categories We Write About