Bonjour à tous
Je suis en train d'inclure turbolinks sur un de mes projets. Cette librairie jquery permet d'ajaxer et de faire un rendu plus accélérer du site.
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.

J'ai donc mis en place mon lecteur html pour le son:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

Et pour lancer la lecture du son (de cette webradio):
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
....
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();
    ......
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.

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.

Merci d'avance.