Загрузка аудиоэлемента после динамического изменения источника

Question

У меня есть пара аудио элементов, которые появляются в теле моей страницы.Они выглядят так:

      <audio id="sound1" preload="auto">
      <source id="sound1source" src="../../Content/Audio/gau.mp3">
      //add .ogg here later
      </audio>
      <audio id="sound2" preload="auto">
      <source id="sound2source" src="../../Content/Audio/mah.mp3">
      //add .ogg here later
      </audio>

Звук воспроизводится, когда пользователь наводит курсор на определенные элементы div.Вот код, который его запускает.

var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
    audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
    audio2.play();
});

Все выше работает нормально.Моя проблема возникает, когда я пытаюсь динамически изменить исходный элемент после выполнения вызова ajax.Вот мой javascript, который выполняет это.

var src1 = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
var src2 = "../../Content/Audio/" + data.nouns[1].Audio1 + ".mp3";

$("#sound1source").attr("src", src1);
$("#sound2source").attr("src", src2);

Когда я проверяю страницу после запуска вызова ajax, чтобы изменить исходный путь для аудиоэлементов, я вижу, что источник обновлен .Нет проблем там.Проблема в том, что звук, на который указывают новые пути, не воспроизводится.

После поиска я нашел эту заметку на w3.org "Динамическое изменение элемента источника и егоатрибут, когда элемент уже вставлен в элемент видео или аудио, не будет иметь никакого эффекта. Чтобы изменить то, что воспроизводится, либо просто используйте атрибут src для медиа-элемента напрямую, либо вызовите метод load () для медиа-элемента после манипулированияисходные элементы. "

Комментарий к w3.org, похоже, связан, поэтому я попытался вызвать $ ('# sound1'). load () и также $ ('# sound1source'). load ().Ни один из них не решил мою проблему.

Может кто-нибудь сказать мне, что я сделал не так?Если мне нужно, чтобы аудио элемент снова загружался после динамического изменения src, как мне это сделать?

------------- ОБНОВЛЕНИЕ -------------

Основываясь на предложении Swatkins, я создал следующую функцию для создания звукового тега, когда пользователь наводит курсор на целевой div.К сожалению, это не решило проблему.

    function attachAudio1(src) {

        $('#audio1').remove();
        var audio = $('<audio>');
        audio.attr("src", src);
        audio.attr("id", "audio1");
        audio.appendTo('body');
        attachPlayAction();
    };

    function attachPlayAction() {
        var audio = $("#audio1")[0];
        $('#ChoiceA').live('mouseenter', function () {
            audio.play();
        });


    };

Answer 1

Вы должны вызывать load следующим образом:

var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
   audio.load();
   audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
   audio.load();
   audio2.play();
});

Не тестировали, как это делалось выше, но ранее проверяли это с помощью отдельной функции, выглядящей примерно так:

<audio id="sound1" preload="auto" src="../../Content/Audio/gau.mp3">

function changeAudio(){
    audio = document.getElementById("sound1");
    audio.src = "../../Content/Audio/" + data.nouns[0].Audio1 + ".mp3";
    audio.load();
    audio.play();
}

$("#ChoiceA").mouseenter(function () {
    changeAudio();
});

и это прекрасно сработало для меня?

---

РЕДАКТИРОВАТЬ: Добавление скрипки, может быть, это поможет вам понять это?

http://jsfiddle.net/Z3VrV/

Answer 2

load () и сразу же play () приводят к проблемам.Попытка прослушивания события canplay перед попыткой воспроизвести аудио, как предложено в https://stackoverflow.com/a/8705478/1374208

Answer 3

Это сложно.Я бы попробовал заменить весь элемент <audio> вместо простого изменения его источника.Таким образом, новый аудио-элемент не был добавлен на страницу, поэтому он будет вынужден загрузить файл.