Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@whitia

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

More than 1 year has passed since last update.

はじめに

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

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

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
whitia
Webアプリ開発全般に興味があります。Rails/Laravel/Nuxt.js/CSS/JavaScript/WordPress

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?