kushty

Joined

50 Experience
0 Lessons Completed
0 Questions Solved

Activity

Posted in 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