0

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

我的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，所以请放轻松。

谢谢你的帮助！

4

2 回答 2

2

即使检查加载状态，您也没有使用正确的。请参阅下面的代码片段。

你需要使用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

希望这可以帮助 ：）

于 2019-10-01T08:08:48.307 回答
2

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

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

startElem.addEventListener("click", function(){
    checkAudio();
});
于 2019-10-01T08:08:26.287 回答