How to add playback speed button to my html audio player

Question

This is my current code in which it takes link from google drive which i use in my wordpress for playing mp3.

This code works fine in compiler and even playbackspeed works fine but when i put this code in wordpress post it does not work It will not increase playback speed even after clicking on it. Help!

<!DOCTYPE html>
<html>


<body>
<style>
body {
  display: grid;
  justify-items: center;
  grid-row-gap: 10px;
}

#actions {
  background: white;
}

#actions button {
  outline: none;
  background-color: #555555;
  border-radius: 12px;
   
  border: none;
  color: white;
  padding: 10px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>


  <button onclick="getPlaySpeed()" type="button">What is the playback speed?</button>

  <audio id="audio" controls="controls">
  <source src="https://drive.google.com/uc?export=download&id=1bDkkNlMt2TIrwBLtgjFoL5odO7rbGS06">
</audio>


  <p>Audiobook Speed</p>
  <div id="actions">
    <button onclick="setPlaySpeed(1.00)" type="button">1.00x</button>
    <button onclick="setPlaySpeed(1.25)" type="button">1.25x</button>
    <button onclick="setPlaySpeed(1.50)" type="button">1.50x</button>
    <button onclick="setPlaySpeed(1.75)" type="button">1.75x</button>
    <button onclick="setPlaySpeed(2.0)" type="button">2.0x</button>
    
  </div>

<script>

var audio = document.getElementById("audio");



function setPlaySpeed(speed) {
  audio.playbackRate = speed;
}

</script>

</body>

</html>

Does this answer your question? [Controlling audio speed of a mp3 file](https://stackoverflow.com/questions/23618845/controlling-audio-speed-of-a-mp3-file) — Ivar, Jun 19 '21 at 22:16
I see no attempt at all at achieving the *"what I want"* part. Neither in providing a minimal HTML that reflects your image. Please read [ask], than [edit] with a [mcve] — Roko C. Buljan, Jun 19 '21 at 22:22

score 0 · Answer 1 · answered Jun 19 '21 at 22:16

0

Your HTML5 media element has an attribut playbackRate, you could modify that integer to the speed you want.

var vid = document.getElementById("myVideo");
vid.playbackRate = 0.5;

(reference)

answered Jun 19 '21 at 22:16

ethergeist

599
4
14

another question how can i get those buttons like in picture in my main post and bind them to playbackspeed. – mp96 Jun 19 '21 at 22:42
Through learning basic HTML and JavaScript. Answering these questions will be out of scope for a format like this. – ethergeist Jun 19 '21 at 22:45

score 0 · Answer 2 · answered Jun 19 '21 at 22:42

I think this should do the job!

var audio = document.getElementById("audio");

function getPlaySpeed() {
  alert(audio.playbackRate);
}

function setPlaySpeed(speed) {
  audio.playbackRate = speed;
}

body {
  display: grid;
  justify-items: center;
  grid-row-gap: 10px;
}

#actions {
  background: gray;
}

#actions button {
  outline: none;
  background: transparent;
}

<!DOCTYPE html>
<html>


<body>

  <button onclick="getPlaySpeed()" type="button">What is the playback speed?</button>
  <audio id="audio" controls="controls">
  <source src="https://drive.google.com/uc?export=download&id=1bDkkNlMt2TIrwBLtgjFoL5odO7rbGS06">
</audio>


  <p>audiobook Speed</p>
  <div id="actions">
    <button onclick="setPlaySpeed(0.9)" type="button">0.9x</button>
    <button onclick="setPlaySpeed(1)" type="button">1x</button>
    <button onclick="setPlaySpeed(1.2)" type="button">1.2x</button>
    <button onclick="setPlaySpeed(1.5)" type="button">1.5x</button>
    <button onclick="setPlaySpeed(1.7)" type="button">1.7x</button>
  </div>



</body>

</html>

(ref)

Thank you this code works fine with compiler but it doesnot work in wordpress post when i put this code in post playback speed doesnt work any help? — mp96, Jun 20 '21 at 00:20
in WordPress to Add Custom JavaScript into your Site I think you should use this [plugin](https://wordpress.org/plugins/insert-headers-and-footers/#description) (installation [guide](https://wordpress.org/plugins/insert-headers-and-footers/#installation)) — AbdelghanyMh, Jun 20 '21 at 08:09

How to add playback speed button to my html audio player

2 Answers2