Search code examples
javascripthtml5-audio

Interacting with HTML audio object using JavaScript function

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?

Solution

  • 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.