在元素的悬停状态下播放声音时出现多个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函数之外只声明一次。