2017-08-15 1 views
1

J'ai écrit du code Jquery qui lit un son quand un élément div est cliqué pour plusieurs éléments audio. Le code semble fonctionner (probablement pas de la manière la plus sophistiquée) mais j'obtiens l'erreur suivante dans la console. "App.js: 152 DOMException: La requête play() a été interrompue par une nouvelle demande de chargement."éléments audio html5 multiples Erreur Jquery

Je me demandais juste quels problèmes potentiels cela pourrait causer et des conseils sur la façon de se débarrasser de cette erreur?

JS

$('.speaker').on("click", function() { 
    var speakertriggered = $(this); 
    var speakerdata = speakertriggered.data('speaker'); 
    var audioelement = $('#' + speakerdata); 
    var getaudio = $(audioelement)[0]; 

    $(speakertriggered).addClass('speakerplay'); 
    getaudio.load(); 
    getaudio.play(); 

    $(audioelement).on('ended', function() { 
     $(speakertriggered).removeClass('speakerplay'); 
    }); 
}); 

HTML

<div class="speaker" data-speaker="left-player"></div> 

<audio id="left-player"> 
    <source src="assets/sounds/left.mp3" type="audio/mp3" /> 
    <source src="assets/sounds/left.mp3" type="audio/ogg" /> 
</audio> 



<div class="speaker" data-speaker="right-player"></div> 

<audio id="right-player"> 
    <source src="assets/sounds/right.mp3" type="audio/mp3" /> 
    <source src="assets/sounds/right.mp3" type="audio/ogg" /> 
</audio> 

Répondre