@if ($audioUrl)
<div class="row">
  <div class="col-xs-12">
    <div class="audio-wrapper">
      <audio id="call-audio" controls>
        <source src="{{ $audioUrl }}" type="audio/mpeg">
        Your browser does not support the audio tag.
      </audio>

      <!-- Speed Control -->
      <div class="speed-control" role="group" aria-label="Speed controls">
        <button id="speedDown" class="btn-speed" type="button" title="Decrease speed">−</button>
        <button id="currentSpeed" class="btn-speed current" type="button" disabled>1x</button>
        <button id="speedUp" class="btn-speed" type="button" title="Increase speed">+</button>
      </div>
    </div>
  </div>
</div>

<script>
(function() {
  function ready(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  ready(function() {
    const audio = document.getElementById('call-audio');
    const up = document.getElementById('speedUp');
    const down = document.getElementById('speedDown');
    const current = document.getElementById('currentSpeed');

    if (!audio) return;

    function setRate(rate) {
      rate = Math.min(2, Math.max(0.5, parseFloat(rate) || 1));
      audio.playbackRate = rate;
      current.textContent = rate.toFixed(2).replace(/\.00$/, '') + 'x';
    }

    // Set initial rate
    audio.addEventListener('loadedmetadata', () => setRate(1), { once: true });

    up.addEventListener('click', () => setRate(audio.playbackRate + 0.20));
    down.addEventListener('click', () => setRate(audio.playbackRate - 0.20));
    audio.addEventListener('ratechange', () => {
      current.textContent = audio.playbackRate.toFixed(2).replace(/\.00$/, '') + 'x';
    });
  });
})();
</script>
@endif