rails上で投稿されたmp３再生について

Question

前提・実現したいこと

railsを用いて作成したアプリ上でユーザーが投稿したmp３ファイルを再生したいです。
対象のmp3はActive Storageを用いて保存しています。

発生している問題・エラーメッセージ

Sprockets::Rails::Helper::AssetNotFound in Tweets#index
Showing /Users/tatsu/projects/mupician/app/views/tweets/_tweet.html.erb where line #18 raised:

The asset "" is not present in the asset pipeline.

該当のソースコード

<div class="content_post" style="background-image: url(<%= tweet.image %>);">
  <div class="more">
    <span><%= image_tag 'arrow_top.png' %></span>
    <ul class="more_list">
      <li>
        <%= link_to '詳細', tweet_path(tweet.id), method: :get %>
      </li>
      <% if user_signed_in? && current_user.id == tweet.user_id %>
        <li>
          <%= link_to '編集', edit_tweet_path(tweet.id), method: :get %>
        </li>
        <li>
          <%= link_to '削除', tweet_path(tweet.id), method: :delete %>
        </li>
      <% end %>
    </ul>
  </div>
  <p><%= tweet.musician%>  <%= tweet.music%>  <%= tweet.text %> <%= tweet.audio.inspect %></p>
  
  
  <span class="name">
    <a href="/users/<%= tweet.user.id %>">
      <span>投稿者</span><%= tweet.user.nickname %>
    </a>
  </span>
</div>

class Tweet < ApplicationRecord
  belongs_to :user
  has_many :comments
  has_one_attached :audio
  with_options presence: true do
    validates :text
    validates :musician
    validates :music
    validates :image
    validates :audio
  end  
end

<%= form_with(model: tweet, local: true) do |form| %>
      <%= form.text_field :image, placeholder: "Image Url" %>
      <div>曲</div>
      <%= form.file_field :audio %>
      <%= form.text_area :musician, placeholder: "musician"%>
      <%= form.text_area :music, placeholder: "music"%>
      <%= form.text_area :text, placeholder: "text", rows: "10" %>
      <%= form.submit "SEND" %>
    <% end %>

試したこと

sequel proを確認したところmp３の保存はできていました。
audiojs-railsも導入ずみです

補足情報（FW/ツールのバージョンなど）

HTML５　Rails 6.0.3.4を使用しています

Comments

[m.ts10806]

「tweet.audio」の型は何でしょう。
テーブル定義（マイグレーションで作ったのならマイグレーションファイル）を提示してください。

[yurayura777]

ありがとうございます。active storageのテーブルのためマイグレーションファイルはactive storageのものしかありません。型はアップロードしたものはmp３になります

[m.ts10806]

質問は編集できます。
「型」はオブジェクトの観点です。「ｍｐ３」という型はないはずです。
Tweetsテーブルのaudioカラムには何が入ってますか？
説明文や概念ではなく具体例をあげてください。

ファイルの実態なのか、パスなのか、拡張子なのか
ファイルなら形式は何なのか、
パスならどういう形なのか

で出力の仕方が全然違ってきます。

[yurayura777]

すいません、active storageで保存してTweetテーブルに、モデルで記述してあるhas_one_attachedで紐付けているためおそらくファイルの実態だと思われます

[oakbow]

エラーが出ているのは <%= audio_tag tweet.audio %> だと思うのですが、額面通り解釈すると、tweet.audio の値を取得できないのが原因です。
indexアクションなので複数のtweetをループで表示していると思うのですが、該当のtweetのaudioに値が入っているか確認できますか？
DBの中身を見るのもいいですが、ActiveStorage の構造理解していないとちゃんと入っているかどうか分かりづらいので、例えば該当の箇所を <%= tweet.audio %> に変えたりしてみるとわかるかな。
エラーの発生している該当行だけでなく、ある程度まとめて（よく分からないならそのファイル全部）ソース貼った方が回答者は理解しやすいです。

[yurayura777]

すいません、間違えました質問の方編集しておきます

[m.ts10806]

質問は編集できますので。

[yurayura777]

モデルとフォームは質問記事に書いているコードのみで１つのファイルになります

[oakbow]

`tweet.audio.inspect` は私がお願いして書いていただいたものなので、元に戻してくださいね。

[yurayura777]

はい！、消しておきます！

Answer 1

以下のように変えるとエラーが出なくならないでしょうか？

<%= audio_tag tweet.audio %>

  ↓
<% if tweet.audio.present? %><%= audio_tag tweet.audio %><% end %>

もし直ったら、 audio をきちんと添付できていない tweet がどこかにあるのが原因です。
Tweet クラスのヴァリデーション定義を見る限り必須にしてありますが、修正前に登録したとかテストデータを入れてみたとかで、そうじゃないデータがあったりするのかもしれません。

これで収束しないようでしたらまた教えてください。

---

収束しませんでしたか。残念。

<%= audio_tag tweet.audio %>
を
<%= tweet.audio.inspect %>

に変えてみて、記載される結果を教えてください。

---

audio_tag って使ったことないけど image_tag と同じノリでは使えないのかな？

<%= audio_tag tweet.audio %>

　↓

<%= audio_tag url_for(tweet.audio) %>

ではどうでしょうか。

---

もしくはこちらかな？

<%= audio_tag rails_blob_url(tweet.audio) %>

手元で試せないので手探りですいません

---

audio_tag を使わずに試すとどうでしょうか。

<audio src="<%= url_for(tweet.audio) %>" controls>

or

<audio src="<%= rails_blob_url(tweet.audio) %>" controls>

ちなみに、ActiveStorage の有効期限はデフォルトで5分なので、ページを表示してすぐじゃないと再生できないと思います。
とりあえず有効期限を伸ばす場合は以下のコードを追加します。

# config/initializers/active_storage.rb
ActiveStorage::Service.url_expires_in = 1.hour

---

単にコントロール表示してないだけだったのかな？
んじゃこちらでも動くと思います。

<%= audio_tag url_for(tweet.audio), controls: true %>

他に autoplay などのオプションもあります。

Comments

[yurayura777]

回答ありがとうございます。
```
<% if tweet.audio.present? %><%= audio_tag tweet.audio %><% end %>
```
と記述してみたところ先ほどまでと同じエラーが出ました。しかし
```
<% if tweet.audio.present? %><%= tweet.text %><% end %>
```
このように書いてみたところtweet.textは表示されたためtweet.audio自体はちゃんと保存されていると思われます。また<%= tweet.audio %> のみの記述に変更してみたところ<ActiveStorage::Attached::One:0x00007fe13530e878>という文字列が表示されました。
勉強中の身のためわからないことが多くご迷惑をおかけして申し訳ございませんが、参照していただくものとしてどちらのコードやファイルをみていただいたらよろしいでしょうか？

[oakbow]

うまくいきませんでしたか。こちらももっと調べてみます。

該当のコードの一行だけ切り取ると周りが分からないので、どこまで貼ればいいか分からないならファイル全部を貼ってください。

[yurayura777]

了解しました！、非常にありがたいです。
<%= audio_tag url_for(tweet.audio) %>こちらの記述に変更したところ
<ActiveStorage::Attached::One:0x00007fe12de4ed58 @name="audio", @record=#<Tweet id: 2, text: "a", musician: "teto", music: "pain", image: "https://imgs.ototoy.jp/feature/image.php/20180321/...", user_id: 1, created_at: "2021-02-04 09:03:23", updated_at: "2021-02-04 09:03:23">>と画面上に表記されました。
コードの方はマークダウンで記述するためコメントの方に貼らせていただきます。

[yurayura777]

<%= audio_tag url_for(tweet.audio) %>
こちらの記述に変更したところ、画面上で先ほどまで<ActiveStorage::Attached::One:0x00007fe12de4ed58 @name="audio", @record=#<Tweet id: 2, text: "a", musician: "teto", music: "pain", image: "https://imgs.ototoy.jp/feature/image.php/20180321/...", user_id: 1, created_at: "2021-02-04 09:03:23", updated_at: "2021-02-04 09:03:23">>が表示されていたところに何も表示されなくなりました

[oakbow]

オブジェクト内容の表示をやめているので消えるのはもちろん正しいんですが、エラー解消していないでしょうか？audio_tagだと音楽再生できるものだとは思うんですが。

[oakbow]

<%= url_for(tweet.audio) %> をどこかに書き出して、これの結果を教えてください

[yurayura777]

<%= audio_tag url_for(tweet.audio) %>だとエラーは解消しました。再生バー等がなくどのように音声ファイルを再生できるかわからない状態です。
<%= url_for(tweet.audio) %>だと
/rails/active_storage/blobs/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBCdz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--3e02d80cb80945e9716e9add4703afee518052ce/Pain%20Pain%20Pain%20-%20teto.mp3と出力されています

[yurayura777]

<audio src="<%= url_for(tweet.audio) %>" controls>
こちらのコードを使用したところ、再生バーが表示され再生できました。ほんとにありがとうございます！！！！

[yurayura777]

<%= audio_tag url_for(tweet.audio) controls: true %>
こちらだとなぜかシンタックスエラーになります。
ActionView::SyntaxErrorInTemplate in TweetsController#index
SyntaxError: /Users/tatsu/projects/mupician/app/views/tweets/_tweet.html.erb:18: syntax error, unexpected tLABEL, expecting ')' ... url_for(tweet.audio) controls: true );@output_buffer.safe_a... ... ^~~~~~~~~

[oakbow]

カンマを記載し忘れていたので付けてください

[yurayura777]

正常に動きました！！他の投稿でも試してみたところちゃんとその投稿に紐づいた音声ファイルが再生されました、お手数をおかけいたしました、心より感謝申し上げます！

[oakbow]

image_tag は ActiveStorageを簡単に扱えるようになっているんですが、audio_tag はそうなっていないところがハマりどころでしたね。私も知りませんでしたが、audio_tag を使っている人が全然いないのでそうした情報も見当たりませんでしたし。解決してよかったです。