加载音频后运行函数

Question

我想在检查是否下载了音频文件后运行一个函数。

我的js：

// https://freesound.org/people/jefftbyrd/sounds/486445/
var audioFile = "https://raw.githubusercontent.com/hitoribot/my-room/master/audio/test/test.mp3";

var audioElem = document.querySelector("audio");
var startElem = document.querySelector("button");
var resultScreen = document.querySelector("p");

function checkAudio() {
    audioElem.setAttribute("src", audioFile);
    if (audioElem.complete) {
        resultScreen.innerHTML = "loaded audio";
        }
    }

startElem.addEventListener("click", function(){
    checkAudio();
});

Codepen：https://codepen.io/carpenumidium/pen/KKPjRLR?editors=0011

我希望在音频文件下载完成后显示“加载的音频”文本。检查文件是否已完成下载的代码可能完全是 bs，所以请放轻松。

感谢您的帮助！

Answer 1

您甚至没有使用正确的检查加载状态。请参阅下面将执行此操作的 sn-p。

你需要使用canplaythrough事件，这意味着

浏览器估计它可以在没有 停止内容缓冲。

你使用complete的事件实际上是在什么时候触发的

OfflineAudioContext 的呈现被终止。

// https://freesound.org/people/jefftbyrd/sounds/486445/
var audioFile = "https://raw.githubusercontent.com/hitoribot/my-room/master/audio/test/test.mp3";

var audioElem = document.querySelector("audio");
var startElem = document.querySelector("button");
var resultScreen = document.querySelector("p");

function checkAudio() {
  audioElem.setAttribute("src", audioFile);
  audioElem.addEventListener('canplaythrough', (event) => {
    resultScreen.innerHTML = "loaded audio";
  });
}

startElem.addEventListener("click", function() {
  checkAudio();
});

<audio controls="controls" src=""></audio>

<button>load audio</button>

<div class="result">
  <h1>Audio file status:</h1>
  <p></p>
</div>

有关音频元素的更多信息，请参阅MDN Docs

希望这会有所帮助:)

Answer 2

您可以使用onload 事件在加载完整音频时收到通知：

function checkAudio() {
    audioElem.setAttribute("src", audioFile);
    audioElem.onload= ()=>{
        resultScreen.innerHTML = "loaded audio";
    }
}

startElem.addEventListener("click", function(){
    checkAudio();
});