JS властивість Event.loadedmetadata

HTML

<header>
  <h2 class="title">Подія "loadedmetadata"</h2>
  <p class="description">Спрацьовує, коли метадані медіафайлу завантажені, наприклад, тривалість або розміри.</p>
</header>
<main>
  <div class="result">
    <button id="loadVideoBtn">Завантажити запис</button>
    <p id="statusMessage">Натисніть на кнопку, щоб завантажити запис.</p>
    <p id="metadataInfo"></p>
    <audio id="mediaPlayer" controls style="display: none; width: 100%; max-width: 500px;">
      Ваш браузер не підтримує аудіо.
    </audio>
  </div>
</main>

CSS

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#statusMessage {
  margin-top: 15px;
  font-weight: bold;
}

#metadataInfo {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

audio {
  margin-top: 15px;
}

JS

document.getElementById('loadVideoBtn').addEventListener('click', function () {
  const media = document.getElementById('mediaPlayer');
  const statusMessage = document.getElementById('statusMessage');
  const metadataInfo = document.getElementById('metadataInfo');

  // Очищення статусу і ховання плеєра перед завантаженням
  statusMessage.textContent = 'Завантаження…';
  media.style.display = 'none';
  metadataInfo.textContent = '';

  // Прив'язка події loadedmetadata до медіаелемента
  media.addEventListener('loadedmetadata', function () {
    statusMessage.textContent = 'Запис завантажено!';
    media.style.display = 'block';
    // Виведення інформації про метадані
    metadataInfo.textContent = `Тривалість: ${media.duration.toFixed(2)} сек`;
  }, { once: true });

  // Завантаження запису
  media.src = silentWav(7);
  media.load();
});

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}

HTML

<video id="videoElement" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='138' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eлише звук%3C/text%3E%3C/svg%3E">
    Ваш браузер не відтворює відео.
</video>
<p id="videoInfo">Тривалість поки невідома</p>

JS

const video = document.getElementById('videoElement');
const info = document.getElementById('videoInfo');

video.addEventListener('loadedmetadata', function() {
  info.textContent = `Тривалість відео: ${video.duration.toFixed(2)} секунд`;
});

video.src = silentWav(5);
video.load();

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}

HTML

<audio id="audioElement" controls></audio>
<p id="audioDuration">Тривалість поки невідома</p>

JS

const audio = document.getElementById('audioElement');
const displayDuration = document.getElementById('audioDuration');

audio.addEventListener('loadedmetadata', function() {
  displayDuration.textContent = `Аудіо триває: ${audio.duration.toFixed(2)} секунд`;
});

audio.src = silentWav(5);
audio.load();

// — службове: беззвучний WAV замість медіафайла, збирається просто тут —
function silentWav(seconds = 3, rate = 8000) {
  const size = seconds * rate;  // 8-бітний моно PCM: один байт на семпл
  const le = (value, bytes) => String.fromCharCode(...Array.from({ length: bytes }, (_, i) => value >> 8 * i & 255));
  const head = `RIFF${le(36 + size, 4)}WAVEfmt ${le(16, 4)}${le(1, 2)}${le(1, 2)}${le(rate, 4)}${le(rate, 4)}${le(1, 2)}${le(8, 2)}data${le(size, 4)}`;

  return `data:audio/wav;base64,${btoa(head + '\u0080'.repeat(size))}`;
}