Javascript 仅使用 soundmanager2 播放第一首歌曲

Question

我正在使用 soundmanager2 播放一些已上传的歌曲。但是，只播放第一首歌曲。除了第一首歌曲之外，播放按钮对任何其他歌曲都不起作用。

Javascript/html:

<% @tracks.each do |track| %>
  <tr>
    <td id="tracktitle"><%= track.title %></td>
    <td id="trackartist"><%= track.artist %></td>
    <td id="trackplayer"><%= image_tag 'play-button.gif', :id=>'play-button' %>
<%= image_tag 'stop-button.gif', :id=>'stop-button' %>


<script>
soundManager.setup({
  url: '/swf/',
  flashVersion: 9, // optional: shiny features (default = 8)
  // optional: ignore Flash where possible, use 100% HTML5 mode
  // preferFlash: false,
  onready: function() {
    soundManager.createSound({
      id: 'mySound',
      url: '<%= track.track_file %>',
      autoLoad: true,
      autoPlay: false,
      onload: function() {
        //alert('The sound '+this.id+' loaded!');
      },
      volume: 50
    });
  }
});
</script>

Tracks.js:

$(document).ready(function () {
    $('#play-button').click(function() {
        soundManager.play('mySound');
        $(this).toggle();
        $('#stop-button').toggle();
    });

    $('#stop-button').click(function() {
        soundManager.stop('mySound');
        $(this).toggle();
        $('#play-button').toggle();
    });
});

可能是一个非常新的问题，但是有人能发现我哪里出错了吗？提前谢谢了。

Answer 1

似乎有多个播放按钮具有相同的 #play-button id，对吗？

我可能是错的，但据我所知，如果选择器是一个 id，jQuery 选择器只会查找第一个匹配元素。这意味着对于轨道 2、3...n，选择器根本不起作用。

您应该能够使用像.play-button这样的类来触发toggle()操作，因为每个匹配元素都会触发类上的jQuery选择器。然而，您可能还需要一种方法来区分各个轨道 - 如果它们都称为 mySound，SoundManager 如何知道要播放哪个轨道？这也是我正在处理的一个问题，这最初导致我提出这个问题。