0

I would like to interact with the vertical ellipses in an HTML DOM Audio Object. Here is an example audio object: (credit: w3schools, original HTML taken from 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>

I've had success with implementing the pause/play controls, returning the duration of the song and getting the SRC. Here I create a button that executes myFunction() to click the play button:

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

What I would like to do is to click on the vertical ellipses Audio Ellipses

then click again to download the song. enter image description here

My question is: what is the JavaScript code to click on the vertical ellipses in the audio object?

Alex W
  • 449
  • 4
  • 10

1 Answers1

2

You can't. In fact, the UI of the player is not necessarily standard. It can vary from platform to platform.

You can use .src to get the src attribute of the media element and download it yourself via the Fetch API or similar.

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Thanks for your response. I did read that each browser has its own set of default audio controls, so that makes sense. Could you elaborate a little bit on the Fetch API? I couldn't find much after some searching. [This](https://stackoverflow.com/questions/32545632/how-can-i-download-a-file-using-window-fetch) looked promising, but I wasn't able to get anything to work for my case. It also seemed to focus more on download.js than fetch – Alex W Oct 25 '20 at 01:57
  • @AlexW I don't know what download.js is, but this specific answer seems pretty clear: https://stackoverflow.com/a/59940621/362536. Or: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API – Brad Oct 25 '20 at 02:06