javascript - 在元素的悬停状态下播放声音时出现多个 AudioContext 错误

Question

当我悬停一个项目时，我正在尝试播放声音并可视化频率（通过 D3.js）。问题是当我从一个项目跳转到另一个项目时出现此错误：

main.js:94 Uncaught NotSupportedError: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6)

这是我的代码：

    $('.item').on('mouseenter', function(){
    itemId = $(this).attr('data-id');
    $(itemId).trigger("play");

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var audioElement = document.getElementById(itemId);
    var audioSrc = audioCtx.createMediaElementSource(audioElement);
    var analyser = audioCtx.createAnalyser();

    // Bind our analyser to the media element source.
    audioSrc.connect(analyser);
    audioSrc.connect(audioCtx.destination);

    var frequencyData = new Uint8Array(50);

    //D3.JS Stuffs here
});
$('.item').on('mouseleave', function(){
    itemId = $(this).attr('data-id');

    $('#' + coverId).trigger("pause");
});

我已经尝试了很多东西，但没有任何效果，非常感谢任何帮助！谢谢！

Answer 1

AudioContext应该是唯一的。mouseenter尝试只在函数之外声明一次。