Javascript 每次按Play时播放不同的音频

我正在尝试制作一个音频按钮，每次按下时都会播放不同的声音。现在，我有播放按钮，第一个声音很好，但是在第一次播放后，声音不会更新为第二个声音

    function update(audioElement) {
        audioElement.remove(); //get rid of old audio obj
        var audioElement = document.createElement('audio');
        audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3'); //add new sound file
        $.get();
        audioElement.addEventListener("load", function() {
            audioElement.play(); //bind new sound file
        }, true);
    }

我做错了什么？谢谢

这是一把小提琴： 您可以这样做：

 $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
            $.get();
            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);

            $('.play').click(function() {
                audioElement.play();
                audioElement = update(audioElement);
            });

        function update(audioElement) {
            audioElement.remove();
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');
            return audioElement;    
        }

    });

---

您必须使用结束事件捕获来更改src url

audioElement.addEventListener("ended")



  $(document).ready(function() {
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
            $.get();
            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);
    audioElement.addEventListener("ended", function() {
        audioElement.setAttribute('src', 'http://www.w3schools.com/html/horse.ogg');
                audioElement.play();
            }, true);
            $('.play').click(function() {
                audioElement.play();

            });

        function update(audioElement) {
            audioElement.remove();
            var audioElement = document.createElement('audio');
            audioElement.setAttribute('src', 'http://www.uscis.gov/files/nativedocuments/Track%2093.mp3');
            $.get();
            audioElement.addEventListener("load", function() {
                audioElement.play();
            }, true);
        }

    });

---

您不需要重新创建

元素

您也不必加载该文件。一旦您将文件设置为

如果使用src属性创建媒体元素，则用户代理必须立即调用媒体元素的资源选择算法

如果设置或更改了媒体元素的src属性，则用户代理必须调用媒体元素的媒体元素加载算法。（即使存在源元素，删除src属性也不能做到这一点。）

下面是一个你可以做的例子。只要看看评论，我相信你会明白的


var audioFiles=[”http://www.w3schools.com/html/horse.ogg",
“foo/bar”，
"http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
]，//要播放的文件。
$playBtn=$（'.play'），//播放按钮。
$audioElem=$（''）；//音频元素。
//将音频元素附加到主体，仅一次。
$（'body'）。追加（$audioElem）；
//将音频元素的src属性设置为列表中的下一个文件。
函数playNextAudioFile（）{
//让我们使用当前src属性值获取当前文件索引。
var crntFile=$.inArray（$audioElem.attr（'src'），audioFiles）；
//如果没有，或者如果我们在列表的末尾，播放列表中的第一个文件。
如果（crntFile==-1 | | crntFile===audioFiles.length-1）{
$audioElem.attr（'src'，audioFiles[0]）；
//否则播放下一个文件。
}否则{
$audioElem.attr（'src'，音频文件[crntFile+1]）；
}
}
//收听播放按钮上的单击事件。
$playBtn.on（'click'，playNextAudioFile）；
//收听canplay事件并开始播放。
$audioElem.on（'canplay'，function（）{
$audioElem[0]。播放（）；
});
//如果上一个文件已结束，则开始播放下一个文件。
$audioElem.on（'end'，function（）{
$playBtn.click（）；
});
//如果发生错误，开始播放下一个文件。
$audioElem.on（'error'，function（））{
$playBtn.click（）；
});

播放
为什么不使用AudioSprite？我想问题是更新音频src，这需要时间来加载。。不过不确定！除此之外，它只是mp3。。我认为Firefox需要ogg。。尝试添加两个源。。检查音频标记的文档是否每次都需要销毁并创建新的音频元素？另外，在您尝试绑定到加载事件之前，加载事件可能已经发生，所以您可以先这样做。“
childNode.remove（）
从它所属的树中删除对象”，在这里，它不在任何树中，并且没有任何效果。此外，您可能只想在他的
结束
事件中删除它