はじめに

HTML5にはオーディオファイルを埋め込む専用のタグが用意されています。

<audio src="sample/sample.ogg" controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

このaudioタグをより便利にしたJavaScriptライブラリ「audio.js」を使えば、見た目のカスタマイズやプレイリストの追加が簡単に行えるようになります。
Railsアプリでは「audiojs-rails」というRuby gemsが提供されているので使います。
また、Railsにはaudioタグのヘルパーメソッドが用意されているのでこれも使います。

<%= audio_tag 'sample.mp3' %>

audiojs-railsの導入

Gemfileに以下を追加してbundle installを行います。
※rails serverを起動している場合は再起動してください。

gem 'audiojs-rails'

audiojsの読み込み

app/assets/javascripts/application.jsに以下を追加します。

//= require audiojs

audiojsの初期化・再生プレイヤー設置

Viewに以下を追加します。

<!-- 再生プレイヤー -->
<%= audio_tag 'sample.mp3' %>

<!-- audiojsの初期化 -->
<script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
  });
</script>

assetsパスの追加

上記で設置した再生プレイヤーで読み込んでいる「sample.mp3」は、app/assets/audios/に配置することにしましょう。
しかし、このままではアセットパイプラインで配信されないので、assetsパスを追加する必要があります。
config/initializers/assets.rbに以下を追加します。

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "audios")

以下のコマンドでassetsパスが追加されたかを確認します。

$ rails c
> Rails.application.config.assets.paths
=> ["Your Rails app path/app/assets/audios/", ...]
> exit

再生プレイヤーのカスタマイズ（おまけ）

audio.jsで使用しているクラスを上書きすることで、再生プレイヤーの見た目を変更することができます。

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.audiojs { ... }
/*　再生・停止ボタンの高さ、幅、パディングの指定　*/
.audiojs .play-pause { ... }
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p { ... }
/*　進行状態・ロードの状態を表示する部分　*/
.audiojs .scrubber { ... }
/*　進行状態を表示するバーの部分　*/
.audiojs .progress { ... }
/*　ロード状態を表示するバーの部分　*/
.audiojs .loaded { ... }
/*　再生時間の部分　*/
.audiojs .time { ... }
.audiojs .error-message { ... }
 /*　再生している曲の情報　*/
.track-details { ... }
.track-details:before { ... }

参考

宣伝

AUTOVICE

私のポートフォリオサイト（仮）です。
こちらでも技術情報を発信していますので、よろしければご覧ください😉

【Rails】audiojs-railsの導入からオーディオファイル再生までの手順