Question

我正在使用带有以下ASPX代码的ASP.NET Webforms：

<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：

＆＃13;

        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;
        }

＆＃13;

<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>

＆＃13;

现在，当我尝试播放音频标签时，我收到以下错误：

{
  "message": "Uncaught TypeError: sound.play is not a function",
}

在vanilla HTML页面上进行测试可以正常工作。所以我猜，即使我找到音频标签，它也不再被识别为音频？或者ASPX渲染引擎可能搞砸了，因为音频标签有一个runat =＆＃34;服务器＆＃34;。

有人可以帮我解决这个问题＆gt;

Answer 1

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();

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

播放音频html标记无效

1 个答案: