#3 Turbo: Keep the audio playing after changing the page
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:
#app/views/layouts/application.html.erb
<body>
<%= render 'shared/audio' %>
</body>
- just wrap it into a
div
with anid
anddata-turbo-permanent
#app/views/shared/_audio.html.erb
<div id="player1" data-turbo-permanent>
<audio src="<%= audio_path 'song.mp3'%>" type="audio/mp3" controls>
</audio>
</div>
<div id="player2" data-turbo-permanent="">
<audio controls="">
<source src="https://media.transistor.fm/9283b16f.mp3" type="audio/mp3">
</audio>
</div>
In this case song.mp3
is sourced from #app/assets/images/song.mp3
Resources: