This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The HTMLMediaElement.networkState property indicates the current state of the fetching of media over the network.
An unsigned short. Possible values are:
| Constant | Value | Description |
|---|---|---|
NETWORK_EMPTY | 0 | There is no data yet. Also, readyState is HAVE_NOTHING. |
NETWORK_IDLE | 1 | HTMLMediaElement is active and has selected a resource, but is not using the network. |
NETWORK_LOADING | 2 | The browser is downloading HTMLMediaElement data. |
NETWORK_NO_SOURCE | 3 | No HTMLMediaElement src found. |
This example will listen for the audio element to begin playing and then check if it is still loading data.
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio>
const obj = document.getElementById("example");
obj.addEventListener("playing", () => {
if (obj.networkState === 2) {
// Still loading…
}
});
| Specification |
|---|
| HTML> # dom-media-networkstate-dev> |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | WebView on iOS | |
networkState |
3 | 12 | 3.5TheNETWORK_LOADED state was removed to align with the HTML spec in Firefox 4. |
≤12.1 | 3.1 | 18 | 4 | ≤12.1 | 3 | 1.0 | 4.4 | 3 |
HTMLMediaElement: Interface used to define the HTMLMediaElement.networkState property
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/networkState