onended () не срабатывает в Safari или iOS - PullRequest
Новая
       25

onended () не срабатывает в Safari или iOS

1 голос
/ 08 апреля 2020

Следующий код работает на Chrome 80.0 и Firefox 74.0 (OSX 10.14.6). Однако в OSX Safari 13.0.5 или iOS (тестирование в Chrome, Safari) элемент <div> никогда не становится синим, указывая на то, что обратный вызов onended не срабатывает. Это ошибка? 

const ctx = new (window.AudioContext || window.webkitAudioContext)();

const buff = ctx.createBuffer(1, 32, ctx.sampleRate);
const buffSource = ctx.createBufferSource();
buffSource.buffer = buff;
buffSource.loop = false;

// attempt to add an event listener to the buffer source
buffSource.addEventListener('ended', () => {
    document.getElementById('test').style.backgroundColor = 'blue';    
});

// another slight variation using the named function
function changeBackground() {
    document.getElementById('test').style.backgroundColor = 'blue';    
}
buffSource.addEventListener('ended', changeBackground);

// the documentation suggestion modifying the function directly
buffSource.onended = function(){
    document.getElementById('test').style.backgroundColor = 'blue';
};

// maybe binding would help?
buffSource.onended = function(){
    document.getElementById('test').style.backgroundColor = 'blue';
}.bind(this);

document.getElementById('button').onclick = (e) => {
    ctx.resume();
    buffSource.start();
    document.getElementById('message').innerText = "Pressed Button";
};
#test {
    background-color: red;
    width: 500px;
    height: 500px;
}
#button {
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<body>
  <button id = 'button'>Click me</button>
  <div id = 'test'></div>
  <div id = 'message'></div>
</body>
</html>

1 Ответ

1 голос
/ 08 апреля 2020

Safari не запускает событие ended, если AudioBufferSourceNode не подключено. 

buffSource.connect(ctx.destination);

Выполнение этой строки перед вызовом start() должно заставить его работать.

...