# Terminal rails action_text:set up rails g scaffold submit title content material:rich_text rails g scaffold music title file:attachment rails g stimulus monitor rails g stimulus music_player
# app/views/musics/index.html.erb <%# audio_tag url_for(music.file), controls: true if music.file.hooked up? && music.file.audio? %> <% if music.file.hooked up? && music.file.audio? %> <div data-controller="monitor" data-track-music-player-outlet="#musicPlayer" data-audio-url="<%= url_for(music.file) %>" data-audio-title="<%= music.title %>"> <button data-action="click->monitor#play:stop" class="text-blue-600 hover:text-blue-800"> ▶ Play </button> <% finish %>
# app/views/layouts/utility.html.erb <div data-controller="music-player" id="musicPlayer" data-turbo-permanent class="mounted bottom-0 left-0 right-0 bg-gray-900 text-white p-4 flex items-center justify-between hidden"> <span data-music-player-target="title" class="text-lg font-semibold"></span> <audio data-music-player-target="audio" controls class="w-full mx-4"><audio> <div>
# app/javascript/controllers/music_player_controller.js import { Controller } from "@hotwired/stimulus" // Connects to data-controller="music-player" export default class extends Controller { static targets = ["audio", "title"] // Possibility 1 // playMusic() { // this.audioTarget.play() // this.ingredient.classList.take away("hidden") // } playMusic(supply, title) { this.audioTarget.src = supply this.titleTarget.textContent = title this.audioTarget.play() this.ingredient.classList.take away("hidden") } }
# app/javascript/controllers/track_controller.js import { Controller } from "@hotwired/stimulus" // Connects to data-controller="monitor" export default class extends Controller { static shops = ["music-player"] play() { // Possibility 1 // this.musicPlayerOutlet.audioTarget.src = this.ingredient.dataset.audioUrl // this.musicPlayerOutlet.titleTarget.textContent = this.ingredient.dataset.audioTitle // this.musicPlayerOutlet.playMusic() this.musicPlayerOutlet.playMusic( this.ingredient.dataset.audioUrl, this.ingredient.dataset.audioTitle ) } }