Comment détecter si le HTML5 audio play/pause de l'état a été modifié en dehors de la page web?

J'ai une application web qui joue un HTML5 flux Audio d'une station de radio. J'utilise jQuery pour lire/mettre en pause l'audio et de basculer le bouton play/pause de la sorte:

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');
    }
});

Tout cela fonctionne très bien. Cependant, sur des appareils comme l'iPhone et l'iPad, vous pouvez contrôler la lecture audio à partir de l'extérieur de la page web (par exemple en double-cliquant sur l'écran d'accueil et en cliquant sur play/pause). Disons que l'audio est en cours de lecture et de l'extérieur de l'application, j'ai décider d'interrompre le flux de données. Quand je retourne à la web app le bouton "pause" s'affiche encore et efficacement ne fait rien jusqu'à ce que vous appuyez sur deux fois pour reprendre la lecture du flux. Ce qu'il faut bien arriver, c'est le bouton pause renvoie à "jouer" ainsi il semble comme une chose naturelle.

Comment puis-je détecter le changement de audio play/pause et de réfléchir de nouveau à l'application?

OriginalL'auteur Jody Heavener | 2013-07-05

  1. 6

    Voici la démo/page de test à partir du W3C pour la vidéo HTML5, mais je crois que la relative événements pour vous devrait être le même pour l'audio http://www.w3.org/2010/05/video/mediaevents.html

    De sorte que vous pourriez faire quelque chose comme:

    $('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');
    }
}

    et puis faire de même pour l'événement de lecture.

    Espère que ça aide

    OriginalL'auteur HJ05

  2. 0

    Voici un script que j'ai utilisé pour mon privé des flux internet:

    $(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');
        }
    });    
});

    De la fonctionnalité de ce script est qu'il charge un petit OGG fichier qui contient seulement le silence quand il met le joueur à la pause. Il sera alors recharger le URL lorsque le joueur est commencé plus tard, la compensation de la mémoire tampon du lecteur.

    OriginalL'auteur Denniz