Audio with speed control

audio-with-speed-control.markdown

Audio with speed control

A Pen by Christian Heilmann on CodePen.

License.

index.html

<div class="speedcontrolcontainer">
  <audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_2MG.mp3" controls></audio>
  <div>
    <label for="pbrate">Speed:</label>
    <input type="range" id="pbrate" min=.5 max=3 value=1 step=.1>
    <span></span>
  </div>
</div>

script.js

const audio = document.querySelector('.speedcontrolcontainer  audio');
const playbackrate = document.querySelector('.speedcontrolcontainer input');
const display = document.querySelector('.speedcontrolcontainer span');
const displayvalue = val => {
  return parseInt(val * 100, 10) + '%'
}
if (window.localStorage.pbspeed) {
  audio.playbackRate = window.localStorage.pbspeed;
  playbackrate.value = window.localStorage.pbspeed;
}
display.innerText = displayvalue(audio.playbackRate);
playbackrate.addEventListener('change', e => {
  audio.playbackRate = playbackrate.value;
  display.innerText = displayvalue(playbackrate.value);
  window.localStorage.pbspeed = playbackrate.value;
});

style.css

.speedcontrolcontainer {
  max-width: 30em;
  display: block;
  border: 1px solid #000;
  padding: 10px;
  font-family: Sans-serif;
}
.speedcontrolcontainer audio {
  width: 100%;
  display: block;
}
.speedcontrolcontainer div {
  display: flex;
  padding: .5em 0;
  gap: 5px;
}
.speedcontrolcontainer label {
  flex: 1
}
.speedcontrolcontainer input[type="range"] {
  flex: 5
}
.speedcontrolcontainer span {
  flex: 1;
  text-align: center;
}