1

アップロードされたいくつかの曲を再生するために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();
    });
});

おそらく非常に新しい問題ですが、どこが間違っているのか誰にもわかりますか? よろしくお願いします。

4

1 に答える 1

0

#play-button同じIDの再生ボタンがいくつかあるようですよね？

私が間違っているかもしれませんが、私が知る限り、セレクターが ID の場合、jQuery セレクターは最初に一致する要素のみを検索します。つまり、トラック 2、3...n のセレクターはまったく機能しません。

.play-buttonクラスの jQuery セレクターは一致するすべての要素に対してトリガーされるため、toggle() アクションをトリガーするのに似たクラスを使用できるはずです。ただし、個々のトラックを区別する方法も必要になる場合があります。それらがすべて呼び出されている場合、mySoundSoundManager はどのトラックを再生するかをどのように認識できるのでしょうか? これは私も扱っている問題であり、最初にこの質問にたどり着きました。

于 2014-12-06T14:49:17.783 に答える