Подскажите, пожалуйста, я что-то в тупик зашел.
Делаю простой тест: две картинки, вопрос в виде звука. Что-то типа "выбери лошадку". И нужно щелкнуть верную картинку. После этого появляются новые картинки и новый звук вопроса.
Все неплохо вроде, но вот проблема: если уже идет звук вопроса, а я уже щелкнул на одну из картинок, то звук от предыдущего вопроса, зараза, все равно идет, пока не закончится, и к нему параллельно добавляется звук от следующего вопроса.
Звук для следующих картинок создаю при клике на картинки текущего вопроса (идея такая, что если кликнул на картинку, то выбор ты уже сделал и надо выводить следующие картинки со звуком вопроса).
Что-то типа такого:
$("#pictures").on('click', '.kartinka', function(event) {
...
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'sound/'+window.test[window.test_id][5]);
audioElement.setAttribute('autoplay', 'autoplay');
audioElement.setAttribute('id', 'question-sound');
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
...
}
Тег id создал специально, чтобы можно было грохнуть все текущие звуки и только после этого создавать новый:
var elems = document.getElementById("question-sound");
for(var i=0; i<elems.length; i++) {
console.log(elems[i].id);
elems[i].remove();
}
Или так:
$("audio").remove();
Или так:
$('audio').each(function(){
this.remove();
})
И еще как только не пытался отловить id звука (audio). Звук, зараза, проигрывается, а document.getElementById("question-sound") его не видит. В консоли тишина...
Насколько я могу судить, при создании звукового блока создается лисенер, который ждет загрузки звука и начинает его проигрывать. Т.е. это событие конкретного звука над ним же. Ну типа, как клик на элементе.
Ок. Раз не могу отловить звук по id или имени тега, подумалось с горя, а нельзя ли при создании звука создать ему какой-то лисенер, который будет ждать события не над объектом audio, а скажем, клика на картинке.
Весь бред ситуации в том, что я не могу в обработчике клика по картинке обратиться к объекту audio - пример как пытался (и еще как только не пытался
) выше. Т.е. по моему представлению, каждый создаваемый объект audio должен сам отлавливать все клики мышкой на картинках и при клике самоуничтожаться, чтобы дать новому звуку заполнить эфир. Как это сделать? Можете дать совет? Ну или покажите мне, в чем я затупил.