HTML | DOM Audio seekable Property

Last Updated : 05 Aug, 2019

The DOM Audio seekable property is used for returning a TimeRanges object. The TimeRanges object is used for representing the ranges of the audio which are available for seeking by the user.
The time-range of audio which is available for seeking i.e. moving playback position is called a seekable range.
It is often possible to seek anywhere in the audio even before it has been buffered if its a non-streaming audio.
The Audio seekable property is a read-only property.

The time ranges object properties are:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

length: It is used to get the number of seekable ranges in the audio.
start(index): It is used to get the position of a seekable range.
end(index): It is used to get the end position of a seekable range.

Syntax:

audioObject.seekable

Below program illustrates the Audio seekable Property:
Example: Getting the first seekable range of the audio in seconds.

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Audio seekable Property
    </title>
</head>
  
<body style="text-align:center">
  
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
    <h2 style="font-family: Impact">
      Audio seekable Property
    </h2>
    <br>
  
    <audio id="Test_Audio" controls>
        <source src="sample1.ogg" 
                type="audio/ogg">
        
        <source src="sample1.mp3"
                type="audio/mpeg">
    </audio>
  
    <p>To get the first seekable range of the audio,
      double click the "Return Seekable Range" button.
    </p>
    <br>
  
    <button ondblclick="MyAudio()" 
            type="button"> 
      Return Seekable Range 
    </button>
  
    <p id="test"></p>
  
    <script>
        function MyAudio() {
            var a = document.getElementById("Test_Audio");
            document.getElementById("test").innerHTML = 
              "Start time: " + a.seekable.start(0) + 
              " End time: " + a.seekable.end(0);
        }
    </script>
  
</body>
  
</html>