Question 165785 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can I add a playback speed button to my WordPress html audio player?

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>
Tags:

2

Answers


  1. 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)

    Login or Signup to reply.
  2. 0

    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)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search