onended() 不会在 Safari 或 iOS 中触发

Question

以下代码适用于 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>

Answer 1

如果 AudioBufferSourceNode 未连接，Safari 不会触发 ended 事件。

buffSource.connect(ctx.destination);

在调用 start() 之前执行此行应该可以正常工作。

onended() 不会在 Safari 或 iOS 中触发

onended() does not fire in Safari or on iOS

javascript

safari

webkit

ios

web-audio-api