Task: when you switch the page the audio should be still playing like here https://www.rework.fm/


  • obviously you should store the audio partial in a layout file that is shared across pages:


    <%= render 'shared/audio' %>
  • just wrap it into a div with an id and data-turbo-permanent
<!-- app/views/shared/_persistent.html.erb -->
<div id='hello' data-turbo-permanent="true">
  <%= audio_tag 'sample-audio-15s', controls: true %>
  <%= video_tag 'sample-video-5s', controls: true, width: '500px' %>

<div id="player1" data-turbo-permanent>
  <audio src="<%= audio_path 'song.mp3'%>" type="audio/mp3" controls>

<div id="player2" data-turbo-permanent="">
  <audio controls="">
    <source src="https://media.transistor.fm/9283b16f.mp3" type="audio/mp3">

In this case song.mp3 is sourced from #app/assets/images/song.mp3

Another example of using data-turbo-permanent on superails.com - search form and results are persisted across pages:


Bonus: Open video picture-in-picture when navigating to another page #

  function pictureOpen() {
    // if you are a prick, you can hide the source so that the video is harder to dismiss!
    // document.getElementById('myvideo').style.display = 'none';
  <%= link_to 'Home', root_path, onclick: 'pictureOpen()' %>

<div id='myvideo' data-turbo-permanent="true">
  <%= video_tag 'sample-video-5s', controls: true, width: '500px' %>