Question

这是我当前的代码，它从谷歌驱动器获取链接，我在我的 wordpress 中使用它来播放 mp3。

此代码在编译器中运行良好，甚至播放速度也运行良好，但是当我将此代码放入 wordpress 帖子时，它不起作用即使点击它也不会提高播放速度。帮助！

<!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>

Answer 1

您的 HTML5 媒体元素有一个属性 playbackRate，您可以将该整数修改为您想要的速度。

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

(reference)

Answer 2

我认为这应该可以！

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)

如何将播放速度按钮添加到我的 html 音频播放器

2 个答案: