はじめに

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

<%= audio_tag 'sample.mp3' %>

audiojs-railsの導入

gem 'audiojs-rails'

audiojsの読み込み

//= require audiojs

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

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

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

assetsパスの追加

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

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

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

/*　プレイヤー（再生バー）の高さ、幅、背景色の指定　*/
.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 を使ってみる