0

I am trying to implement a music player on my page. I have a table with each row representing a song with the first element being a button whose id is the url of the song.

        <tbody>
        {% for e in entries %}
            <tr>
                <td><button class="song btn" id="{{ e.url }}"><i class="icon-play-circle"></i></button></td>
                <td>{{ e.title }}</td>
                <td>{{ e.artist }}</td> 
                <td>{{ e.features }}</td>
                <td>{{ e.genre }}</td>
                <td><a href="/myapp/editsong/{{ e.id }}">Edit</a></td>
            </tr>
        {% endfor %}
        </tbody>

I am trying to implement some javascript to change the src of a HTML5 audio element on the page when a button is clicked to its id:

$("button.song").on("click", function(event){
    if (audio.src != event.target.id)
    {
      audio.src = event.target.id;
      play.className = 'btn btn-success';
      pause.className = 'btn';
      audio.play();
  }
});

This implementation works somewhat, but is very buggy. Sometimes clicking a button will change the audio element src to blank and I will have to click the button multiple times.

4

2 に答える 2

1

本当によくわかりませんが、他の属性を使用して、実行しようとしている曲への URL を保存する必要があります。私の記憶が失敗しない場合は、 ID属性

おそらく、value 属性にはこの制限がありません。オブジェクト/配列への参照として、より「英数字のみ」のものを使用し、それを使用して値を取得します。

ご挨拶！ゴンサロ G.

于 2012-05-31T22:30:45.013 に答える
0

デバッグ用の JavaScript アラートを使用して、パラメーター event.target.id を確認します。ボタンをクリックして、各オーディオの値を確認します。

if (audio.src != event.target.id)
...
于 2012-05-31T22:22:48.340 に答える