如何获取未激活的AudioTracks属性？页面加载时无法获取length的原因及解决

页面加载时执行(A)行代码得到video.audioTracks.length = 0，但点击按钮执行(B)行代码能得到正确值2，请问原因是什么？如何在页面加载阶段获取正确的AudioTracks.length？

示例代码 #

<!DOCTYPE html>
<html>
    <body>
        <h3>请使用支持AudioTracks属性的浏览器，详见[说明]部分</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>

原因分析 #

页面加载时执行(A)行代码的时机，视频的元数据（包括音轨信息）还未加载完成。浏览器解析HTML后会立即执行<script>里的同步代码，但此时<video>元素只是被创建，视频文件的音轨、时长等元数据还没从服务器获取并解析，所以audioTracks集合是空的，长度为0。

而点击按钮时，视频已经完成了元数据加载（甚至可能已经开始播放），音轨信息已经被浏览器解析并添加到audioTracks集合中，因此能获取到正确的长度。

解决方法：监听loadedmetadata事件 #

要在页面加载阶段获取正确的AudioTracks.length，需要监听视频的loadedmetadata事件——这个事件会在视频的元数据加载完成后触发，此时音轨信息已经可用。修改代码如下：

<!DOCTYPE html>
<html>
    <body>
        <h3>请使用支持AudioTracks属性的浏览器，详见[说明]部分</h3>
        <video id="video" controls>
            <source src="https://www.w3schools.com/tags/mov_bbb.mp4"></source >
        </video>
        <button onclick="myFunction()">Click (myFunction)</button>
        <script>
            // 监听元数据加载完成事件
            video.addEventListener('loadedmetadata', function() {
                console.log("(A修正后) = " + video.audioTracks.length );// 此时会输出2
            });
            
            function myFunction() {
                console.log("(B) = " + video.audioTracks.length );// (B) = 2
            }
        </script>
    </body>
</html>

浏览器支持说明 #

AudioTracks属性目前未被主流浏览器广泛支持，可通过以下方式在Chrome Beta中启用该特性：

• 下载Chrome Beta 107版本；
• 在地址栏输入chrome://flags/进入实验功能页面；
• 启用#enable-experimental-web-platform-features选项。

该属性仅在部分实验性浏览器环境中可用，正式环境支持度极低。

内容的提问来源于stack exchange，提问作者Rio