JavaScript Access the "controls" of the HTML audio tag?

[giomach]

In a webpage I'm using the HTML audio tag to play a sound file from a remote server.

But in some cases I don't want to play the whole of the remote file, just a part of it. It would be easy to capture the remote file and extract the bit I want to my own website, but I think the copyright will not allow this.

If the audio tag had start and end attributes, that would be perfect, but it hasn't, so I'm trying to do it with javascript, about which I know very little. After some web searching, I've got as far as this:

<audio id="sample" controls src="https://....../example.mp3" preload></audio><br><br>

<script>
var audio = document.getElementById('sample');

audio.currentTime = 120.0;
audio.play();
int = setInterval(function()
{if (audio.currentTime > 180.0) {audio.pause(); clearInterval(int); } },
10);
</script>

This will play the section from 2 mins to 3 mins (values just for demo purposes), which is what I want.

What remains to be done is to get the displayed controls to relate to the section rather than to the whole sound file. Specifically:
• show the start time as 0:00 rather than 2:00
• show the end time as 1:00 rather than 14:35 (which is the length of the whole sound file)
• make the progress slider relate to the section from 2:00 to 3:00
• after playback finishes, ensure clicking the play button restarts playing at 2:00 rather than continuing from 3:00

How can I access the "properties" of the audio.controls thing?

Any hints welcome!

 

[giomach]

Here's what the controls look like in chrome.

 

[Johna]

I doubt this is possible with the browser's built-in audio player. You'll probably have to use a custom player.

 

[giomach]

I found the following terse statement in a post to another forum from 2016:

Both audio and video media accept the #t URI Time range property

song.mp3#t=8.5

I found that it works on the chrome audio tag for setting the start of playback, but I can't find any fuller description of it. Can anyone?

 

[giomach]

I found the following terse statement in a post to another forum from 2016:

Both audio and video media accept the #t URI Time range property

song.mp3#t=8.5

I found that it works on the chrome audio tag for setting the start of playback, but I can't find any fuller description of it. Can anyone?

Had to go to archive.org to find out more about this.

Using HTML5 audio and video

HTML5 introduces built-in media support via the audio and video elements, offering the ability to easily embed media into HTML documents.

web.archive.org

When specifying the URI of media for an <audio> or <video> element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

A time range is specified using the syntax:

#t=[starttime][,endtime]

However, it doesn't do any more than my initial code above, and may not be as widely implemented. It just avoids using js to do this.