Question

我正在使用选择输入（一个元素将一直被“选择”）。现在，当用户按下demoPlay按钮时，应该播放当前选择的声音，请参阅我的代码。

<select class="form-control" id="notificationSounds" name="notificationSound">
  <option value="1">Beep sound</option>
  <audio id="demoSound1">
    <source src="/sounds/beep.ogg" type="audio/ogg">
    Playing audio elements is not supported by your browser
  </audio>

  <option value="2" selected>Funny sound</option>
  <audio id="demoSound2">
    <source src="/sounds/frog.ogg" type="audio/ogg">
    Playing audio elements is not supported by your browser
  </audio>
</select>

<button type="button" id="demoPlay" class="btn btn-success">Play sound</button>

<script type="text/javascript">
  $(document).ready(function() {
    $("#demoPlay").click(function() {
      selected_element = "notificationDemo_" + $('#notificationSounds').find(":selected").val();
      $("#selected_element").play()
    })
  })
</script>

由于某种原因它返回：

返回：未捕获的TypeError：$（...）。play不是函数

Answer 1

您在这里遇到几个问题。首先，您不能将audio个元素放置在select内内，而只能放置option个元素。将它们移到外面。

第二，您使用字符串文字'#selected_element'作为jQuery选择器，而selected_element是一个变量，需要将其 value 连接到选择器，即。 $('#' + selected_element)。

当#notificationDemo_N实际上具有audio的{{1}}时，您也在寻找id元素。

最后，demoSoundN不是jQuery方法。您要么需要play()元素上的基础事件，要么直接调用Element对象上的trigger()。

话虽如此，请尝试以下操作：

play()

<select class="form-control" id="notificationSounds" name="notificationSound">
  <option value="1">Beep sound</option>
  <option value="2" selected>Funny sound</option>
</select>

<audio id="demoSound1">
  <source src="/sounds/beep.ogg" type="audio/ogg">
  Playing audio elements is not supported by your browser
</audio>

<audio id="demoSound2">
  <source src="/sounds/frog.ogg" type="audio/ogg">
  Playing audio elements is not supported by your browser
</audio>

<button type="button" id="demoPlay" class="btn btn-success">Play sound</button>

Answer 2

play()不是jQuery函数，因此您需要访问基础DOM对象才能使用它。

 $("#selected_element").get(0).play()

单击JS播放声音

2 个答案: