加载音频后运行函数

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();});代码笔：https ://codepen.io/carpenumidium/pen/KKPjRLR ? editors = 0011我希望在音频文件下载完成后显示“加载的音频”文本。检查文件是否已完成下载的代码可能完全是 bs，所以请放轻松。

Answer 1

您甚至没有使用正确的方法来检查加载状态。请参阅下面的代码片段，可以做到这一点。

您需要使用表示的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>

Answer 2

您可以使用该onload事件在加载完整音频时获得通知：

function checkAudio() {

    audioElem.setAttribute("src", audioFile);

    audioElem.onload= ()=>{

        resultScreen.innerHTML = "loaded audio";

    }

}

startElem.addEventListener("click", function(){

    checkAudio();

});