Railsで音楽プレイヤーを作ってみる

はじめに

知り合いがRailsで音楽プレイヤーを作りたいと言っていたので軽ーく作ってみました！
今回は、DBに音楽ファイルを保存して、そこから流す形式にしています

手順

1. プロジェクトの作成

んじゃ、さっそく作っていきましょう！

rails new music_player
cd music_player

2. Active Storageのセットアップ

rails active_storage:install
rails db:migrate

3. モデルの作成

# 曲のモデルを作成
rails g model Song title:string artist:string album:string
rails db:migrate

4. モデルの編集

app/models/song.rb

class Song < ApplicationRecord
  has_one_attached :audio_file
  
  validates :title, presence: true
  validates :audio_file, presence: true
end

5. コントローラーの作成

rails g controller Songs index show new create

6. コントローラーの実装

app/controllers/songs_controller.rb

class SongsController < ApplicationController
  def index
    @songs = Song.all
  end

  def show
    @song = Song.find(params[:id])
  end

  def new
    @song = Song.new
  end

  def create
    @song = Song.new(song_params)
    
    if @song.save
      redirect_to @song, notice: '曲が追加されました'
    else
      render :new
    end
  end

  private
  
  def song_params
    params.require(:song).permit(:title, :artist, :album, :audio_file)
  end
end

7. ルーティングの設定

config/routes.rb

Rails.application.routes.draw do
  resources :songs
  root 'songs#index'
end

8. ビューの作成

8-1 index.html.erb

app/views/songs/index.html.erb

<h1>音楽ライブラリ</h1>

<div class="song-list">
  <% @songs.each do |song| %>
    <div class="song-item">
      <h3><%= link_to song.title, song_path(song) %></h3>
      <p>アーティスト: <%= song.artist %></p>
      <p>アルバム: <%= song.album %></p>
    </div>
  <% end %>
</div>

<%= link_to '新しい曲を追加', new_song_path, class: 'btn' %>

8-2 show.html.erb

app/views/songs/show.html.erb

<h1><%= @song.title %></h1>
<p>アーティスト: <%= @song.artist %></p>
<p>アルバム: <%= @song.album %></p>

<div class="audio-player">
  <% if @song.audio_file.attached? %>
    <audio controls>
      <source src="<%= rails_blob_path(@song.audio_file) %>" type="audio/mpeg">
      お使いのブラウザは音声再生に対応していません
    </audio>
  <% else %>
    <p>音声ファイルがありません</p>
  <% end %>
</div>

<div class="actions">
  <%= link_to '戻る', songs_path %>
</div>

8-3 new.html.erb

app/views/songs/new.html.erb

<h1>新しい曲を追加</h1>

<%= form_with(model: @song, local: true) do |form| %>
  <% if @song.errors.any? %>
    <div class="error-messages">
      <ul>
        <% @song.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :title, 'タイトル' %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :artist, 'アーティスト' %>
    <%= form.text_field :artist %>
  </div>

  <div class="field">
    <%= form.label :album, 'アルバム' %>
    <%= form.text_field :album %>
  </div>

  <div class="field">
    <%= form.label :audio_file, '音楽ファイル' %>
    <%= form.file_field :audio_file %>
  </div>

  <div class="actions">
    <%= form.submit '保存する' %>
  </div>
<% end %>

<%= link_to '戻る', songs_path %>

9. CSSの追加

gemfileに追記・インストール

Gemfile

gem 'sassc-rails'

bundle install

SCSSファイルを作成

app/assets/stylesheets/songs.scss

.song-list {
  margin: 20px 0;
}

.song-item {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.audio-player {
  margin: 20px 0;
}

audio {
  width: 100%;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

10.サーバーを起動

rails s

これmp3ファイルなどを追加してもらえば、音楽が再生できるはず！！

再生画面はこんな感じです。適宜レイアウトなど修正してあげてください
（※音源はフリーの音楽サイトから拝借しました）