はじめに
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 { ... }
参考
- audio.js
- audiojs-rails
- Railsでhtml5で追加されたaudioタグを使う
- Rails Asset Pipelineがうまくいかないときの問題の切り分けかた
- audio.js を使ってみる
宣伝
私のポートフォリオサイト（仮）です。
こちらでも技術情報を発信していますので、よろしければご覧ください😉