Railsアプリで音楽を再生する方法 - keishiprogramming’s diary

前置き

本日のお題は、Railsアプリで音楽を再生する方法です。

御多分に洩れず、自分用のメモです。

audioタグの使い方

音楽を再生する場合には、HTML要素であるaudioタグを使います。

使い方は以下

<p>この音源はお使いのブラウザに対応していません</p>

</audio>

ポイントは以下の3点ですね。

src属性で音声のパスを指定する。
ブラウザに対応していないなどの理由で音声が再生できない場合には、<p></p>で囲まれた部分が表示される(imgタグのalt属性のようなもの)。
閉じタグがある。

audio_tagヘルパーの使い方

audioタグ自体のことがわかったところで、Railsで用意されているaudio_tagヘルパーについてみていきます。

使用例）
<%= audio_tag("sample.mp3", id: "sample") %>

注意点は、

audio_tagで呼び出したい音源は、assets/audiosディレクトリに配置する。
audio_tagの第一引数で、呼び出したい音源のファイル名を指定する。
第二引数はid。省略も可能。audioタグは基本的にJavaScript系統で操作するので、先にidを付与しておくのが一般的。

audioタグの音の再生・停止

再生・停止はそれぞれplay(), stop()で可能。

$('#sample').play()

$('#sample').stop()

コンパイル経路の設定

最後に、app/assets/audiosがアセットパイプラインのコンパイル経路に乗るようにしておきます。

これをしておかないと、「"sample.mp3"というファイルがアセットパイプラインに存在しません」というエラーになります。

やるべきことは２つで、

.mp3という拡張子を扱えるようにする
audiosディレクトリが読み込まれるようにする

これだけです。

順番にみていきます。

.mp3という拡張子を扱えるようにする

webpacker.ymlに以下を追記

static_assets_extensions:

..... 省略......

- .mp3

...省略....の部分には元々.jpgなどの拡張子がデフォルトで記載されており、それによってRailsアプリが画像を扱えるようになっています。

そこにmp3を追加するというわけですね。

audioディレクトリが読み込まれるようにする

次に、audioディレクトリを読み込みます。

// app/assets/config/manifest.jsを以下のように編集

-----この部分はデフォルトで記載あり-----

//= link_tree ../images

//= link_directory ../stylesheets .css

-----デフォルト記載部分終了------

-----以下を追記-------------------

//= link_tree ../audios

このファイルのデフォルト記載部分が、imagesやstylesheetsの読み込み定義箇所です。

そこにaudiosディレクトリを追加するというわけですね。

前置き

目次

audioタグの使い方

audio_tagヘルパーの使い方

audioタグの音の再生・停止

コンパイル経路の設定