Player audio with pjax

player.html.erb

<div>
  <audio id="audio_player" controls="control">
    <source id="audio_source_mp3" src="/data/ndt-1.mp3" type="audio/mp3" />
    <source id="audio_source_mp2" src="/data/ndt-2.mp2" type="audio/mp2" />
    <source id="audio_source_ogg" src="/data/ndt-3.ogg" type="audio/ogg" />
    Pas d'audio !
  </audio>
</div>

<button id="button_play">Play</button>
<button id="button_pause" style="display: none;">Pause</button>


<button class="change-sound" data-source-src="/data/ndt-3.ogg">Met son 1</button>
<button class="change-sound" data-source-src="/data/ndt-4.ogg">Met son 2</button>

player.js

$(document).ready(function() {
  console.log("Callback on Load");

  var player = $("#audio_player")[0];
  player.volume = 0.5;

  var button_play = $("#button_play");
  var button_pause = $("#button_pause");
  var playPromise;

  var toggleButtons = function(showPlay) {
    button_play.toggle(showPlay);
    button_pause.toggle(!showPlay);
  }

  var onPlayFulfilled = function() {
    button_pause.one("click", function() {
      console.log("Pause");
      player.pause();

      toggleButtons(true);
      bindPlayButton();
    });
  };

  var onPlayRejected = function() {
    button_pause.off("click");
  };


  var play = function() {
    console.log("Play !");

    playPromise = player.play();
    playPromise.then(onPlayFulfilled, onPlayRejected);

    console.log("Promise play : ");
    console.dir(playPromise);

    toggleButtons(false);
  };

  var bindPlayButton = function() {
    button_play.one("click", function() {
      play();
    });
  };

  $(document).on("player.change", function(event, sounds) {
    console.log("Player sounds change : ");
    console.dir(sounds);


    $("#audio_source_ogg").attr("src", sounds.ogg);
    $("#audio_source_mp3").attr("src", sounds.mp3);
    $("#audio_source_mp2").attr("src", sounds.mp2);


    player.load();
    play();
  });

  bindPlayButton();
});

ui.js

$(document).pjax('a', '#pjax-container', {
  fragment: "#pjax-container",
  timeout: 2000
});

$(document).ready(function() {
  $(document).on("click", ".change-sound", function() {
    var src = $(this).data("source-src");
    console.log("new src : " + src);

    var sounds = {
      ogg: src
    };

    $(document).trigger("player.change", sounds);
  });
});