Функция запуска после загрузки звука - PullRequest
Новая
       11

Функция запуска после загрузки звука

0 голосов
/ 01 октября 2019

Я хочу запустить функцию после проверки, загружен ли аудиофайл.

Мои 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, поэтому, пожалуйста, будьте осторожны со мной.

Спасибо за вашу помощь!

Ответы [ 2 ]

2 голосов
/ 01 октября 2019

Вы не используете правильный даже для проверки загруженного статуса. Смотрите ниже фрагмент, который сделает это.

Вам необходимо использовать событие 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

Надеюсь, это поможет:)

2 голосов
/ 01 октября 2019

Вы можете использовать событие onload, чтобы получать уведомления, когда загружено полное аудио: 

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

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