I am using ASP.NET Webforms with the following ASPX code:
<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>
which ultimately produces HTML of the following:
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>
Now while I am finding the audio tag whenever I attempt to play it I get the following error:
{
"message": "Uncaught TypeError: sound.play is not a function",
}
Testing this on a vanilla HTML page works. So I am guessing that even though I am finding the audio tag it is no longer recognised as audio? Or perhaps the ASPX render engine is getting things messed up because the audio tag has a runat="server".
Can someone help me out in terms of getting this to play>
jQuery
selector returns a jQuery
object. You need to access the DOM element in order to access WebAudio APIs. You can use .get()
to get the DOM element.
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.