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

【问题标题】：How to add playback speed button to my html audio player如何将播放速度按钮添加到我的 html 音频播放器
【发布时间】：2021-06-19 22:10:49
【问题描述】：

这是我当前的代码，它从谷歌驱动器获取链接，我在我的 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>

【问题讨论】：

这能回答你的问题吗？ Controlling audio speed of a mp3 file
我看不到任何尝试实现 “我想要的” 部分。既不提供反映您的图像的最小 HTML。请阅读How to Ask，而不是edit 和minimal reproducible example

标签： html wordpress

【解决方案1】：

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

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

(reference)

【讨论】：

另一个问题我怎样才能在我的主帖中获得像图片中的那些按钮并将它们绑定到播放速度。
通过学习基本的 HTML 和 JavaScript。回答这些问题超出了这种格式的范围。

【解决方案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)

【讨论】：

谢谢，这段代码在编译器上工作得很好，但是当我把这段代码放在后期播放速度中时，它在 wordpress post 中不起作用没有任何帮助？
我已经更新了主帖检查代码！
在 WordPress 中将自定义 JavaScript 添加到您的站点中我认为您应该使用这个plugin（安装guide）