0

I'm trying to play sounds and visualize the frequency (via D3.js) when I'm hovering an item. The problem is that I get this error when I jump from one item to another:

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)

Here's my code:

    $('.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");
});

I've tried a lot of stuff but nothing works, any help would be very very appreciated! Thanks!

user990463
  • 439
  • 1
  • 7
  • 27

1 Answers1

0

AudioContext should be unique. Try to declare it only once, outside of your mouseenter function.

TGrif
  • 5,725
  • 9
  • 31
  • 52
  • Already tried that but it throws an error on the createMediaElementSource() and says that the HTMLelement is already bounded :/ – user990463 May 09 '16 at 09:01