Удалить объекты audio или создать лисенер по которому они сами себя грохнут
 

Подскажите, пожалуйста, я что-то в тупик зашел.

Делаю простой тест: две картинки, вопрос в виде звука. Что-то типа "выбери лошадку". И нужно щелкнуть верную картинку. После этого появляются новые картинки и новый звук вопроса.

Все неплохо вроде, но вот проблема: если уже идет звук вопроса, а я уже щелкнул на одну из картинок, то звук от предыдущего вопроса, зараза, все равно идет, пока не закончится, и к нему параллельно добавляется звук от следующего вопроса.

Звук для следующих картинок создаю при клике на картинки текущего вопроса (идея такая, что если кликнул на картинку, то выбор ты уже сделал и надо выводить следующие картинки со звуком вопроса).

Что-то типа такого:

$("#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 должен сам отлавливать все клики мышкой на картинках и при клике самоуничтожаться, чтобы дать новому звуку заполнить эфир. Как это сделать? Можете дать совет? Ну или покажите мне, в чем я затупил.

Нет у audio события "load", есть метод .load() который переинициализирует audio после изменения свойств.
Рисуешь один элемент

<audio id="audio"></audio>

Функция воспроизведения

function playAudio(src) {
	var audio = document.getElementById('audio');
		audio.src = src;
		audio.load();
		audio.play();
}

Вызываешь в нужном месте с нужным источником

playAudio('sound/' + test[test_id][5]);

Супер :) Только зашел сюда, чтобы отписаться, что именно так и сделал, а вы уже успели. Спасибо за ответ!

Если кому-то пригодится, мне помогла вот эта статейка: https://msdn.microsoft.com/library/g...(v=vs.85).aspx

Эдуард Суровый посылает на MSDN. Неисповедимы пути поиска. )

Это да, сам удивился, если честно. Всегда msdn считал уделом крутых программеров, а вот и я что-то нашел там. И да, я суров! Очень суров!
(c) молоко - пойло лохов! Кефир есть?