音声ファイルを保存、再生、ダウンロード機能を実装。【Ruby】

目的

音声ファイルをアップロードし保存ができ、再生やダウンロードができるように実装します。
以下の画像のようなオーディオプレーヤーが実装されるのがゴールです。

手順

オーディオファイルを保存したいモデルにカラムを追加。

ターミナル.

% rails generate migration AddFileToモデル名 file:string

ターミナル.

% rails db:migrate

ストロングパラメータの修正

songs_controller.rb

 # 省略

  private

  def song_params 
    params.require(:song).permit(:file, :title)　　#　permit()の中に:fileを追加
  end

gemの追加

Gemfile.

gem 'carrierwave'

ターミナル.

% bundle install

アップローダーの作成

ターミナル.

% rails generate uploader Audiofile

モデルに追加

app/models/song.rb

class Song < ApplicationRecord
# ここから追記
  mount_uploader :file, AudiofileUploader
# ここまで追記
end

viewに追加

app/views/songs/new.html.erb

<%= form_with model: @song, class: 'registration-main', local: true do |f|%>
# 省略
# ここから追記
  <%= f.file_field :file , :size => 140 %>
# ここまで追記

音声ファイルの再生とダウンロード機能のgem追加

Gemfile.

gem 'audiojs-rails'

ターミナル.

% bundle install

app/javascript/packs/application.js

#省略
#ここから追記
//= require audiojs
#ここまで追記

viewに追加

app/views/songs/show.html.erb

# 省略

<div class="song_body">
# ここから追記
  <audio src= "<%= "#{@song.file}" %>" controls="">
    <a src="<%= "#{@song.file}" %>">ダウンロード</a>
  </audio>
# ここまで追記
</div>

以上で完成です。
ぜひ試してみてください。