动态更改源后加载音频元素 [英] Loading Audio Element After Dynamically Changing the Source
问题描述
我的页面正文中有几个音频元素。它们看起来像这样。
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>
当用户将鼠标悬停在某些div上时播放音频。这是触发它的代码。
The audio plays when a user mouses over certain divs. Here's the code that triggers it.
var audio = $("#sound1")[0];
$("#ChoiceA").mouseenter(function () {
audio.play();
});
var audio2 = $("#sound2")[0];
$("#ChoiceB").mouseenter(function () {
audio2.play();
});
以上所有内容均可正常使用。当我尝试在进行ajax调用后动态更改源元素时,会出现问题。这是我的javascript实现的。
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.
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调用后检查页面以更改音频元素的源路径时,我看到源已更新。没问题。问题是新路径所指向的音频没有播放。
When I inspect the page after triggering the ajax call to change the source path for the audio elements, I see that the source is updated. No problem there. The problem is that the audio that the new paths point to does not play.
在打猎之后,我在 w3.org 当元素已插入视频或音频元素时,动态修改源元素及其属性将要改变正在播放的内容,要么直接在媒体元素上使用src属性,要么在操作源元素后调用media元素上的load()方法。
w3.org上的评论似乎是相关的所以我试着调用$('#sound1')。load()以及$('#sound1source')。load()。也没有解决我的问题。
The comment on w3.org seems to be related so I tried calling $('#sound1').load() and also $('#sound1source').load(). Neither solved my problem.
有人能告诉我我做错了什么吗?如果我需要在动态更改src后再次加载音频元素,我该怎么做?
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?
------------ -UPDATE -------------
-------------UPDATE-------------
基于Swatkins建议我创建了以下函数来创建音频标签,当用户将鼠标悬停在目标div。不幸的是,这也没有解决问题。
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.
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();
});
};
推荐答案
你应该像这样调用load:
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();
});
这对我有用吗?
编辑:添加小提琴,也许这可以帮助您解决这个问题?
Adding a fiddle, maybe that will help you figure this out?
< a href =http://jsfiddle.net/Z3VrV/ =noreferrer> http://jsfiddle.net/Z3VrV/
这篇关于动态更改源后加载音频元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!