1

多くのオーディオ要素を含む html5 サイトを作成しています。一度に 1 つずつ再生したいので、jQuery を使用して曲を一時停止して再生しました。

それを可能にするコードをここで見つけましたが、スレッドは2年間死んでいます。

問題は、曲を再生するときに発生します。それをsong1と呼び、一時停止してからsong1を再度再生しようとすると、song1が再生を開始しません。song1を再度再生するには、他の曲を再生してからクリックする必要があります再生を開始できるように、song1 をもう一度再生します。これを修正する方法がわかりません。これを行わずにプレイするにはどうすればよいですか？

よろしくお願いします。

HTML:

<div id="song">
    <a class="playback">
        <img class="play" src="./MusicPlayer/base.png" />
    </a>
    <audio><source src="./MusicPlayer/avicii.mp3" type="audio/mpeg" /></audio>
</div>
<div id="song2" >
    <a class="playback">
        <img class="play" src="./MusicPlayer/base.png" />
    </a>
    <audio><source src="./MusicPlayer/harlem.mp3" type="audio/mpeg" /></audio>
</div>

Javascript:

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
       e.preventDefault();
       var song = $(this).next('audio')[0];
       if (song.paused) {
           song.play();
           if (curPlaying) {
               $("audio", "#" + curPlaying)[0].pause();
           }
       } else {
           song.pause();
       }
       curPlaying = $(this).parent()[0].id;
    });
});
4

1 に答える 1

1

これを試して：

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
       e.preventDefault();
       var song = $(this).next('audio')[0];
       if (song.paused) {
           if (curPlaying) {
               $("audio", "#" + curPlaying)[0].pause();
           }
           song.play();
           curPlaying = $(this).parent()[0].id;
       } else {
           song.pause();
           curPlaying = null;
       }
    });
});

問題は次の流れでした。

1) 曲 1 を再生 (curPlaying == song1)

2) song1 を一時停止します (curPlaying はまだsong1に設定されています)。

3) song1 を再生します (curPlaying はまだ true であるため、song1 はすぐに一時停止されます)。

とにかく、かなり遅く、私は疲れ果てているので、私のコードは実際には機能しないかもしれません (おっと)。しかし、うまくいけば、答えの残りの部分が正しい軌道に乗るでしょう.

于 2013-03-22T02:10:35.817 に答える