3

ラジオ局の HTML5 オーディオ ストリームを再生する Web アプリがあります。jQuery を使用してオーディオを再生/一時停止し、再生/一時停止ボタンを次のように切り替えます。

var playerStream = document.getElementById('player-stream');
$('section.player').hammer().on('tap','button.toggle-stream', function(event){
    if (playerStream.paused) {
        playerStream.play();
        $('button.toggle-stream').attr('data-icon','s');
    }   
    else {
        playerStream.pause();
        $('button.toggle-stream').attr('data-icon','p');
    }
});

これはすべてうまくいきます。ただし、iPhone や iPad などのデバイスでは、Web ページの外部からオーディオの再生を制御できます (たとえば、ホーム画面をダブルクリックして、再生/一時停止をクリックします)。オーディオが再生されていて、アプリの外部からストリームを一時停止するとします。実際の Web アプリに戻ると、「一時停止」ボタンがまだ表示されており、ストリームを再開するために 2 回タップするまで効果的に何もしません。実際に起こるべきことは、一時停止ボタンが「再生」に戻ることなので、当然のことのように思えます。

オーディオの再生/一時停止状態の変化を検出し、アプリに反映するにはどうすればよいですか?

4

3 に答える 3

6

HTML5 ビデオの W3C のデモ/テスト ページは次のとおりですが、オーディオhttp://www.w3.org/2010/05/video/mediaevents.htmlの相対的なイベントは同じであるはずです。

したがって、次のようなことができます。

$('audioplayer').on('pause', function() {
    if (playerStream.paused) {
        playerStream.play();
        $('button.toggle-stream').attr('data-icon','s');
    }   
    else {
        playerStream.pause();
        $('button.toggle-stream').attr('data-icon','p');
    }
}

次に、play イベントについても同じことを行います。

それが役立つことを願っています

于 2013-07-05T02:04:02.793 に答える
0

プライベート インターネット ストリームに使用しているスクリプトは次のとおりです。

$(document).ready(function() {

    var player = "#webplayer";
    var button = "#webplayer_button";

    $(button).click(function() {
        if ($(player)[0].paused) {
            $(player).attr('src', 'http://www.whateverurl.com/stream.mp3');
            $(player)[0].play();
        } else {
            $(player)[0].pause();
            $(player).attr('src', 'media/silence.ogg');
        }
    });    
});

このスクリプトの追加機能はOGG、プレーヤーを一時停止するときに無音のみを含む小さなファイルをロードすることです。その後、プレーヤーが後で起動されたときにリロードされURL、プレーヤーのバッファがクリアされます。

于 2016-08-14T18:46:31.290 に答える