显示跨浏览器加载的音频标签的百分比，准确无误，以便在加载所有内容之前控件不可用

Question

我的子 iframe 中有一堆音频标签，如下所示：

<audio id='n0' preload='auto' onCanPlay='CountASampleAsLoaded();'><source src='Sounds/0.mp3' type='audio/mp3'></audio>

然后是子脚本中的 JavaScript 函数：

    // Increments the samples loaded percentage during page load, until it reaches 100%, then hides the loading message and shows Options & Display
function CountASampleAsLoaded() {
PreviewTag = parent.document.getElementById('LoadingPercentageHolder');
var LastLoaded = parseFloat(PreviewTag.innerHTML);
var CurrentlyLoaded = (LastLoaded + (100 / parent.window.InstrumentsLastSampleRanks['<?php echo $_POST['Instrument']; ?>'])).toFixed(3);
    if (CurrentlyLoaded > 100) {
    CurrentlyLoaded = 100;
    Fade(parent.document.getElementById('LoadingDiv'));
    Fade(parent.document.getElementById('OptionsMenu'),'In');
    }
PreviewTag.innerHTML = CurrentlyLoaded;
}

以及父脚本中的这个 html ：

    <!-- Loading Message displayed while the sounds load -->
<div id='LoadingDiv' class='OrangeGradientGrayText ' style='position:absolute; left:15pt; top:15pt; width:700pt; font-size:28pt;
opacity:1'>
    <span id='LoadingPercentageHolder'>
    0</span>% of <span id='InstrumentNameHolder'>Bowed</span>&nbsp;<span id='AudioFormatHolder'>.mp3</span>'s loaded...
</div>

它只在 FireFox 中工作正常，一旦 LoadingDiv 显示 100% 并消失以将位置留给选项 Div，所有声音实际上都会加载...

在 Chrome、Edge 和 Opera 中，百分比通常会增加一点时间，然后立即增加到 100%，但键盘上高音的声音尚未加载：按下时它们不会播放。

我尝试使用 onCanPlayThrough，令人惊讶的是它甚至更不可靠：甚至 FireFox 也会显示 100% 并得到之后不播放的音符...

然后我想出了一个最终的解决方法：将音频标签音量设置为 0 onPlay，给它们“自动播放”属性，并将 CountASampleAsLoaded 设置为 onEnded，整个过程带有一个布尔值，一旦页面加载，该布尔值就会变为 true，然后嵌套在 onPlay 事件处理程序中（if (!PageLoaded) {AudtioTag.volume = 0;} 和 CountASampleAsLoaded 函数。因此，页面加载后每次播放音符时，该函数都不会执行...它最终在范围内问题是，即使在加载后音量也被设置为 0，因此音符中不会发出任何声音（音量应该在 CountASampleAsLoaded 中切换回 1；无论如何......）

有什么准确的解决方法吗？

您可以在以下位置查看正在运行的代码： https://www.chord-book.com/HexKeyboard/HexKeyboard.php（这是演示版本，我仅更新到最后一个未修复的版本）

Answer 1

在这里，您将文本 (

toFixed()

) 分配给 var

CurrentlyLoaded

。

var CurrentlyLoaded = (LastLoaded + (100 / parent.window.InstrumentsLastSampleRanks['<?php echo $_POST['Instrument']; ?>'])).toFixed(3);

这里你想与文本进行数字比较：

if (CurrentlyLoaded > 100) {

那是行不通的。删除第一部分中的

toFixed(3)

并在格式化输出时使用它；

PreviewTag.innerHTML = CurrentlyLoaded.toFixed(3);