gpt4 book ai didi

javascript - 在Safari或iOS上不会触发onended()

转载 作者:行者123 更新时间:2023-12-01 21:57:05 27 4
gpt4 key购买 nike

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

最佳答案

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

buffSource.connect(ctx.destination);

在调用 start()之前执行此行应使其工作。

关于javascript - 在Safari或iOS上不会触发onended(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61101474/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com