HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>onratechange — speed buttons</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}.speeds{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.speeds button{padding:.5rem 1rem;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer;font-size:.875rem}.speeds button.is-active{background:#2563eb;border-color:#2563eb;color:#fff}#status{padding:.75rem 1rem;border-radius:8px;font-size:.875rem;font-weight:600;max-width:420px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af}</style>

</head>

<body>

  <h1>Custom speed controls</h1>

  <p>Click a speed button — <code>ratechange</code> fires even when you set <code>playbackRate</code> in code.</p>

  <audio controls id=media>

    <source src=/audio/count.mp3 type=audio/mpeg>

  </audio>

  <div class=speeds>

    <button type=button data-rate=0.5>0.5&times;</button>

    <button type=button data-rate=1 class=is-active>1&times;</button>

    <button type=button data-rate=1.5>1.5&times;</button>

    <button type=button data-rate=2>2&times;</button>

  </div>

  <p id=status aria-live=polite>Playback speed: 1&times;</p>



  <script>var media=document.getElementById("media"),status=document.getElementById("status"),buttons=document.querySelectorAll(".speeds button");function highlightActive(t){buttons.forEach((function(e){e.classList.toggle("is-active",parseFloat(e.dataset.rate)===t)}))}document.querySelector(".speeds").addEventListener("click",(function(t){var e=t.target.closest("button[data-rate]");e&&(media.playbackRate=parseFloat(e.dataset.rate))})),media.addEventListener("ratechange",(function(){status.textContent="Playback speed: "+media.playbackRate+"×",highlightActive(media.playbackRate)}))</script>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML onratechange Attribute — custom speed buttons
