javascript 动态更改源后加载音频元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7692082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading Audio Element After Dynamically Changing the Source
提问by hughesdan
I have a couple of audio elements that appear in the body of my page. They look like this.
我有几个音频元素出现在我的页面正文中。他们看起来像这样。
<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>
The audio plays when a user mouses over certain divs. Here's the code that triggers it.
当用户将鼠标悬停在某些 div 上时会播放音频。这是触发它的代码。
var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
audio2.play();
});
Everything above works fine. My problem occurs when I attempt to dynamically change the source element after making an ajax call. Here's my javascript that accomplishes that.
以上一切正常。当我尝试在进行 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);
When I inspect the page after triggering the ajax call to change the source path for the audio elements, I see that the source isupdated. No problem there. The problem is that the audio that the new paths point to does not play.
当我在触发 ajax 调用以更改音频元素的源路径后检查页面时，我看到源已更新。没有问题。问题是新路径指向的音频无法播放。
After hunting around I found this note on w3.org"Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, either just use the src attribute on the media element directly, or call the load() method on the media element after manipulating the source elements."
在四处寻找之后，我在w3.org上发现了这个注释“当元素已经插入到视频或音频元素中时，动态修改源元素及其属性将不起作用。要更改正在播放的内容，只需使用 src 属性直接调用媒体元素，或者在操作源元素后调用媒体元素的 load() 方法。”
The comment on w3.org seems to be related so I tried calling $('#sound1').load() and also $('#sound1source').load(). Neither solved my problem.
w3.org 上的评论似乎是相关的，所以我尝试调用 $('#sound1').load() 和 $('#sound1source').load()。都没有解决我的问题。
Can someone tell me what I've done wrong? If I need to cause the audio element to load again after dynamically changing the src, how do I do that?
有人能告诉我我做错了什么吗？如果我需要在动态更改 src 后再次加载音频元素，我该怎么做？
-------------UPDATE-------------
- - - - - - -更新 - - - - - - -
Based on Swatkins suggestion I created the following function to create the audio tag when the user mouses over the target div. Unfortunately this has not solved the problem either.
根据 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();
});
};
回答by adeneo
You should call load like this:
你应该像这样调用负载：
var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
audio.load();
audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
audio.load();
audio2.play();
});
Have not tested doing it like above, but have testet this previously with a seperate function looking something like this:
没有像上面那样测试过，但是之前已经用一个单独的函数测试过这个，看起来像这样：
<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();
});
and that worked fine for me?
这对我有用吗？
EDIT:Adding a fiddle, maybe that will help you figure this out?
编辑：添加一个小提琴，也许这会帮助你解决这个问题？
回答by swatkins
This is tricky. I would try replacing the whole <audio>element instead of just changing its source. This way, the new audio element hasn't been added to the page, so it will be forced to load the file.
这很棘手。我会尝试替换整个<audio>元素，而不是仅仅更改其来源。这样，新的音频元素还没有添加到页面中，因此将强制加载文件。
回答by titicaca
load() followed by play() right away leads to trouble. Trying listening for the canplay event before attempting to play the audio as suggested in https://stackoverflow.com/a/8705478/1374208
load() 紧接着 play() 会导致麻烦。在尝试按照https://stackoverflow.com/a/8705478/1374208 中的建议播放音频之前尝试侦听 canplay 事件
