使用 JavaScript 函数与 HTML 音频对象交互答案

【问题标题】：Interacting with HTML audio object using JavaScript function使用 JavaScript 函数与 HTML 音频对象交互
【发布时间】：2021-02-02 21:05:52
【问题描述】：

我想与 HTML DOM 音频对象中的垂直省略号进行交互。这是一个示例音频对象：（来源：w3schools，原始 HTML 取自 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_controller）

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio" controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
</body>
</html>

我已经成功实现了暂停/播放控件、返回歌曲的持续时间并获得了 SRC。这里我创建了一个按钮，执行 myFunction() 来点击播放按钮：

<!DOCTYPE html>
<html>
<body>

<audio id="myAudio" controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var x = document.getElementById("myAudio");
  x.play();
}
</script>

</body>
</html>

我想做的是点击垂直椭圆

然后再次单击以下载歌曲。

我的问题是：点击音频对象中垂直椭圆的 JavaScript 代码是什么？

【问题讨论】：

标签： javascript html5-audio

【解决方案1】：

你不能。事实上，播放器的 UI 不一定是标准的。它可能因平台而异。

您可以使用.src 获取媒体元素的src 属性并通过Fetch API 或类似方法自行下载。

【讨论】：

感谢您的回复。我确实读到每个浏览器都有自己的一组默认音频控件，所以这是有道理的。你能详细说明一下 Fetch API 吗？经过一番搜索，我找不到太多东西。 This 看起来很有希望，但我无法为我的案子做任何事情。它似乎也更关注 download.js 而不是 fetch
@AlexW 我不知道 download.js 是什么，但这个具体的答案似乎很清楚：stackoverflow.com/a/59940621/362536。或：developer.mozilla.org/en-US/docs/Web/API/Fetch_API