Ask A Question
Notifications
You’re not receiving notifications from this thread.
Persistent audio via stimulus change audio on click
Hi, I have set up Plyr with stimulus and I have also got the sessions working with application.html.erb so I can have the player on every page in the app via the id params thanks to help here on Reddit.
for example, I click day one on index page, it will go to show and the player is pulled in from applications.html.erb shows the player and corresponding audio file and plays.
the problem I have is if I go back to the index and then click on day 2 I can't replace the audio playing in the player, it keeps playing the day one audio.
i know I need to add some code to stimulus to be able to grab the new audio file based on the params but I cant work it out.
Stimulus controller
import { Controller } from "@hotwired/stimulus"
import Plyr from 'plyr';
// Connects to data-controller="plyr"
export default class extends Controller {
connect() {
const player = new Plyr('#player');
}
play() {
player.play();
}
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Meditation</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.2/plyr.css" />
</head>
<body>
<%= yield %>
<%= @meditation.title %>
<div class="absolute bottom-0 left-0 ">
<% if @meditation.audio_file %>
<div data-controller="plyr" data-turbo-permanent id="player2">
<%= audio_tag(url_for(@meditation.audio_file), data-turbo-permanent controls: "", id: "player") %>
</div>
<% end %>
</div>
</body>
</html>
Thanks for any help