All threads / Persistent audio via stimulus change audio on click
Ask A Question

Notifications

You’re not receiving notifications from this thread.

Persistent audio via stimulus change audio on click

kushty asked in Rails

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

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 64,380+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.