Ways to rouse a dormant AudioTracks feature

Question

Ways to rouse a dormant AudioTracks feature

When I click a button, I am able to get the correct value of AudioTracks.length. However, without clicking the button, I am unable to retrieve this value. Take a look at my code below. It works at line (B) but not at (A). Can you help me understand why and how I can make it work at (A)? I have a feeling that there's some basic concept I'm missing here, so any assistance would be greatly appreciated. Thank you!

[My code]

<!DOCTYPE html>
<html>
    <body>
        <h3>Please use a browser supporting AudioTracks property. See [Note] for details.</h3>
        <video id="video" controls>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
        </video>
        <button onclick="myFunction()">Click (myFunction)</button>
        <script>
            console.log("(A) = " + video.audioTracks.length );// (A) = 0
            function myFunction() {
                console.log("(B) = " + video.audioTracks.length );// (B) = 2
            }
        </script>
    </body>
</html>

[Note] The audioTracks property is not supported in any major browsers. It is supported in Chrome beta by enabling "enable-experimental-web-platform-features" in chrome:flags.

Download Chrome beta Version 107.
Type "chrome://flags/" in the address bar to see "Experiments" page.
Enable "#enable-experimental-web-platform-features".

[Reference] https://caniuse.com/audiotracks

javascript audiotrack

Answer 1

Answer №1

In order to access any information from a resource, such as audioTracks or .duration, you must wait for the resource to be preloaded first.

This can be achieved by waiting for either the loadedmetadata event or the canplay event.

const vid = document.querySelector("video");
vid.onloadedmetadata = (evt) => {
  console.log(vid.audioTracks);
};

<video controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4">
</video>

Answer 2

In order to access any information from a resource, such as audioTracks or .duration, you must wait for the resource to be preloaded first.

This can be achieved by waiting for either the loadedmetadata event or the canplay event.

const vid = document.querySelector("video");
vid.onloadedmetadata = (evt) => {
  console.log(vid.audioTracks);
};

<video controls>
  <source src="https://www.w3schools.com/tags/mov_bbb.mp4">
</video>

Answer 3

Answer №2

After reviewing your code, I decided to test it out by running the following:

<!DOCTYPE html>
<html>
    <body>
        <h3>Please use a browser supporting AudioTracks property. See [Note] for details.</h3>
        <video id="video" controls>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
        </video>
        <button onclick="myFunction()">Click (myFunction)</button>
        <script> 
            console.log("(A)"+document.getElementById("video").audioTracks);// (A) = 0
            function myFunction() {
                console.log("(B) = " + video.audioTracks.length );// (B) = 2
            }
        </script>
    </body>
</html>

Note: I overlooked the need to restart my browser in order to see the effect

@Kaiido's advice is accurate - simply waiting for the metadata to load is sufficient.

I made a slight adjustment to your video element like this:

<video id="video" onloadedmetadata="myFunction()" controls=true>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
</video>

Upon loading the video, it displayed (B) = 2 without needing me to click the button.

If you want to run code only after everything has loaded, you can utilize the onloadedmetadata attribute. Alternatively, if there are multiple elements to load, consider using

window.requestNewAnimationFrame(runningFunc)

to ensure all elements are loaded before proceeding.

I hope this explanation resolves any doubts and corrects any errors I may have made.

Answer 4

After reviewing your code, I decided to test it out by running the following:

<!DOCTYPE html>
<html>
    <body>
        <h3>Please use a browser supporting AudioTracks property. See [Note] for details.</h3>
        <video id="video" controls>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
        </video>
        <button onclick="myFunction()">Click (myFunction)</button>
        <script> 
            console.log("(A)"+document.getElementById("video").audioTracks);// (A) = 0
            function myFunction() {
                console.log("(B) = " + video.audioTracks.length );// (B) = 2
            }
        </script>
    </body>
</html>

Note: I overlooked the need to restart my browser in order to see the effect

@Kaiido's advice is accurate - simply waiting for the metadata to load is sufficient.

I made a slight adjustment to your video element like this:

<video id="video" onloadedmetadata="myFunction()" controls=true>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
</video>

Upon loading the video, it displayed (B) = 2 without needing me to click the button.

If you want to run code only after everything has loaded, you can utilize the onloadedmetadata attribute. Alternatively, if there are multiple elements to load, consider using

window.requestNewAnimationFrame(runningFunc)

to ensure all elements are loaded before proceeding.

I hope this explanation resolves any doubts and corrects any errors I may have made.

Ways to rouse a dormant AudioTracks feature

Answer №1

Answer №2

Similar questions

Using a wildcard (*) to select elements with JQuery

Is it necessary for a component to disconnect from the socket io server upon unmounting?

The Jade variable assignment variable is altered by the Ajax result

Is there a way to make the checkbox and corresponding text display on a single line within my code snippet?

Alert: Zone.js has identified that the ZoneAwarePromise '(window|global).Promise' has been replaced with polyfills. Kindly address this issue

sending data from an AngularJS application to an MVC controller in JSON format containing multiple arrays

Clear a variable that was sent through the post method in an ajax call

Ajax request terminates once PHP has looped for a specific duration of time (2 minutes)

[Error: hex is not recognized as a valid function]

AntD Functional Component with Row Selection Feature

Does the modularization of code impact the performance of the react-app?

Troubleshooting the issue: React Native Redux not navigating correctly using API IDs

The UTF-8 data sent by JQuery AJAX is not being correctly processed by my server, but only in Internet Explorer

Express server experiences empty body when using the Fetch POST method

Is it possible to generate an array of all matches found by a regular expression

Code functions properly on local host but encounters errors when deployed to live server

Using JavaScript to override a specifically declared CSS style

What is the method for obtaining the worldwide location of a vertex on a skinned mesh in Three.js?

Issue in React: Unable to choose options from a dropdown menu once a value attribute has been assigned to the component's state

Having trouble with the Document.createElement function not functioning properly when trying to download a