Bonjour,

Je suis en train d'inclure turbolinks sur un de mes projets. Hors, on m'a demandé, et biensur au dernier moment un lecteur audio qui doit persister entre les pages.
Je me suis orienté vers jPlayer afin de gagner du temps. Hors, je n'arrive pas à persister ce lecteur entre les pages.

Ce que je fais

Si dessous l'intégration de mon lecteur

<div id="audio_player" data-turbolinks-permanent>
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <div class="jp-controls">
                    <button class="jp-play" role="button" tabindex="0">play</button>
                    <button class="jp-stop" role="button" tabindex="0">stop</button>
                </div>
                <div class="jp-progress">
                    <div class="jp-seek-bar" style="width: 100%;">
                        <div class="jp-play-bar" style="width: 0.162782%;"></div>
                    </div>
                </div>
                <div class="jp-volume-controls">
                    <button class="jp-mute" role="button" tabindex="0">mute</button>
                    <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value" style="width: 50%;"></div>
                    </div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time" role="timer" aria-label="time">00:00</div>
                    <div class="jp-duration" role="timer" aria-label="duration">00:00</div>
                </div>
            </div>
            <div class="jp-details">
                <div class="jp-title" aria-label="title">Bubble</div>
            </div>
            <div class="jp-no-solution" style="display: none;">
                <span>Une mise à jour est requise.</span>
                Pour lancer la lecture de cette musique, merci de mettre à jour le  <a href="http://get.adobe.com/flashplayer/" target="_blank">lecteur flash de votre navigateur.</a>.
            </div>
        </div>
    </div>
</div>

L'inclut le fichier js de jplayer et je l'appelle de cette manière:

....
function player() {
        $player = $("#jquery_jplayer_1");
            $player.attr('data-appended', 'true');
            var stream = {
                    title: "Fréquence Country: la Web-Radio",
                    mp3: "Mon flux m3u"
                },
                ready = false;
            $player.jPlayer({
                ready: function (event) {
                    ready = true;
                    $(this).jPlayer("setMedia", stream);
                },
                play: function() { // To avoid both jPlayers playing together.
                    $(this).jPlayer("play");
                },
                pause: function () {
                    $(this).jPlayer("clearMedia");
                },
                error: function (event) {
                    if (ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                        // Setup the media stream again and play it.
                        $(this).jPlayer("setMedia", stream).jPlayer("play");
                    }
                },
                swfPath: "js/",
                supplied: "mp3",
                preload: "auto",
                volume: 0.2,
                wmode: "window",
                useStateClassSkin: true,
                autoBlur: false,
                keyEnabled: true
            });
    }
    document.addEventListener("turbolinks:load", function() {
        player();
    });
    player();
    ......

Ce que je veux

Je voudrais que mon lecteur audio persiste entre les pages, au niveau des ancres, pas de soucis, j'ai trouvé. Par contre, pas entre les pages

Ce que j'obtiens

Le lecteur se lance bien entre les pages, mais le comportement est aléatoire, je m'explique. Défois le son se double, dans d'autres cas, il s'éteind ou même ne se charge pas. J'ai du mal à voir comment inclure ce type de lecteur en mode persistant.
Si vous voulez voir dans le monde web, je vous met le lien pour voir en live: https://goo.gl/R0Ditz

Merci d'avance.

leknoppix

1 réponse


leknoppix
Auteur
Réponse acceptée

Finalement, avec l'aide de @Lambirou sur le chan discord, j'ai résolu le soucis.
L'astuce consiste à mettre un "data-turbolinks-eval" à false au niveau du script player (qui gère la lecture) et le tour est joué (enfin pour firefox). Par contre, toujours pas pour chrome.