我正在使用具有以下ASPX代码的 ASP.NET Webform:
<asp:GridView ID="gvWordsInLessons"
runat="server"
AllowSorting="True"
AutoGenerateColumns="False"
<Columns>
<asp:TemplateField>
<img runat="server" src="https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/kpackage.png" onclick="return PlaySoundDonoV2(this);" data-audio-index='<%# CType(Container, GridViewRow).RowIndex %>' />
<audio
class="audio-file"
style="display:none;"
data-row-index="<%# CType(Container, GridViewRow).RowIndex %>"
src="<%# Eval("VoiceOver") %>"
autostart="false">
</audio>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
最终生成以下内容的 HTML:
function PlaySoundDonoV2(aSelectedImg) {
var rowIndex = $(aSelectedImg).attr('data-audio-index');
var sound = $(".audio-file[data-row-index='" + rowIndex + "']");
sound.play();
//Prevent post-back
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-condensed table-hover table-striped" cellspacing="0" rules="all" border="1" id="cphContainerWithoutUpdatePanel_gvWordsInLessons" style="border-collapse:collapse;">
<tr>
<td>
<img src="https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/kpackage.png" onclick="return PlaySoundDonoV2(this);" data-audio-index="0" />
<audio class="audio-file" style="display:none;" data-row-index="0" src="/Chinese/words/begin.mp3"
autostart="false"></audio></td>
</tr>
<tr>
<td>
<img src="https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/kpackage.png" onclick="return PlaySoundDonoV2(this);" data-audio-index="1" />
<audio class="audio-file" style="display:none;" data-row-index="1" src="/Chinese/words/buy.mp3"
autostart="false"></audio></td>
</tr>
</table>
现在,当我每次尝试播放音频标签时都会找到它时,出现以下错误:
{
"message": "Uncaught TypeError: sound.play is not a function",
}
在普通 HTML 页面上对此进行测试是有效的。所以我猜测即使我找到了音频标签,它也不再被识别为音频?或者ASPX渲染引擎可能把事情搞砸了,因为音频标签有一个runat="server"。
有人可以帮助我玩这个吗>
jQuery
选择器返回一个jQuery
对象。您需要访问 DOM 元素才能访问 WebAudio API。您可以使用.get()
来获取 DOM 元素。
// use .get(0) to the DOM element.
var sound = $(".audio-file[data-row-index='" + rowIndex + "']").get(0);
sound.play();
function PlaySoundDonoV2(aSelectedImg) {
var rowIndex = $(aSelectedImg).attr('data-audio-index');
var sound = $(".audio-file[data-row-index='" + rowIndex + "']").get(0);
console.log(sound);
sound.play();
//Prevent post-back
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-condensed table-hover table-striped" cellspacing="0" rules="all" border="1" id="cphContainerWithoutUpdatePanel_gvWordsInLessons" style="border-collapse:collapse;">
<tr>
<td>
<img src="https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/kpackage.png" onclick="return PlaySoundDonoV2(this);" data-audio-index="0" />
<audio class="audio-file" style="display:none;" data-row-index="0" src="https://actions.google.com/sounds/v1/cartoon/cartoon_boing.ogg" autostart="false"></audio></td>
</tr>
<tr>
<td>
<img src="https://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/apps/kpackage.png" onclick="return PlaySoundDonoV2(this);" data-audio-index="1" />
<audio class="audio-file" style="display:none;" data-row-index="1" src="https://actions.google.com/sounds/v1/alarms/alarm_clock.ogg" autostart="false"></audio></td>
</tr>
</table>