How to force the browser to download only part of an audio/video element?

Question

I have an audio element that I control through JavaScript:

<audio preload="metadata" src="myfile.mp3" />

<button type="button">Play/Pause</button>

// JS logic not relevant to the question

Let's say myfile.mp3 is a 5-minute audio and after I play the first 10 seconds of it, I call pause() to prevent the rest of it from being played. It seems like the browser continues downloading the rest of the file. How can I prevent this from happening and download only a specific chunk of the file?

Answer 1

Try this:

const mediaElement = document.querySelector("#myMediaElementID");
mediaElement.removeAttribute("src");
mediaElement.load();

By removing the media element's src attribute and invoking the load() method, you release the resources associated with the audio/video, which stops the network download. You must call load() after removing the attribute, because just removing the src attribute does not invoke the load algorithm.

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery