コンソールで画像関係のエラー、undefinedplayer-graphics.gif 404 (Not Found)と出てしまう。

Question

現在ポートフォリオサイトに音楽再生機能を実装中です。

https://qiita.com/whitia/items/3e533c64ce6b6badfb63

こちらのqiitaの記事を参考に実装しました。
ローカルで一応動作はするのですが、
コンソールで

jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:6719
GET http://localhost:3000/undefinedplayer-graphics.gif 404 (Not Found)

というエラーが出てしまうので、本番環境では動かないものかと思われます。
一応画面上では音楽の再生はできますし、プレイヤーも表示はされているのですが、gifの画像だけおそらく反映されていないといった感じです。

やったこととしましては記事の通りに、
gem 'audiojs-rails'
bundle installして、gem install audiojs-rails を実行。

//= require audiojsを//= require_tree .の手前に追加。

= audio_tag 'menuettm.mp3'
タグをビューに配置。

:script
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

こちらをビューに配置して初期化して読み込みました。

Rails.application.config.assets.paths << Rails.root.join('node_modules')
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "audios")
assetsのパスはこのような形で追加しました。
コンソールcで動作確認済みです。

assets/audios/menuettm.mp3といった形でミュージックを配置しました。
音楽は正常に流れております。

改善のために試したこととしましては、
画像の位置が悪いかと思ったので、player-graphics.gifをimagesの中、audiosの中、assetsの中、いろんなところに配置する画像を変更してみたのですが、全てダメでした。

念の為、audio.min.jsの記述の中に画像を呼び出す記述があったので、そちらを消すなどして試してみてもダメでした。
八方塞がりです。

他に何か試した方がいいことはありますでしょうか。
ご教授いただけると助かります。

Comments

[winterboum]

音楽機能ではなく画像関係での問題なので、タイトルを変えたほうが回答が集まりやすいかも、です。
で、
1) undefinedplayer-graphics.gif　はどこに置きましたか
2) その呼び出しは　view にどのように書きましたか

[saitou311099]

ご指摘ありがとうございます。
タイトルを画像関係のエラーに変更しました。
player-graphics.gifははじめにimageの中に入れていたのですが、位置がダメだと思ったので、いたるところに配置を変えました。audiosの中,assetsの下、javascriptの中など。色々配置を変更してみましたが、どれも同じエラーが出てダメでした。
ビューでは、タグを一行配置しただけです。

= audio_tag 'menuettm.mp3'

検証ツールで確認したところ、

<div class="audiojs " classname="audiojs" id="audiojs_wrapper0">
<audio src="/assets/menuettm-1d638718d5926a88dc9f4364ea2e77bc7957af2981b116c5c61d4804462cbed4.mp3"></audio> <div class="play-pause"> <p class="play"></p> <p class="pause"></p> <p class="loading"></p> <p class="error"></p> </div> <div class="scrubber"> <div class="progress" style="width: 0px;"></div> <div class="loaded" style="width: 16.6445px;"></div> </div> <div class="time"> <em class="played">00:00</em>/<strong class="duration">02:17</strong> </div> <div class="error-message"></div></div>

[saitou311099]

コードをカットしたらわかりにくいかと思ったので、画像を取り込んで貼り付けさせていただきました。

[winterboum]

audioの方は音が出ているのですからそちらではなく、player-graphics.gif の方です。
viewにどう記述しましたか

[saitou311099]

= audio_tag 'menuettm.mp3'

ビューにはこの一行と

:javascript
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

初期化するためのこの文書のみを記述しました。
他に、ビューの方で記述している部分はありません。

[winterboum]

よくわからないのですが、それで　player-graphics.gif　が表示されるはずなのですね？

[saitou311099]

= audio_tag 'menuettm.mp3'
のタグを配置すると、ビューの方で　<div class="audojs">以下の文章が表示されます。

play-pauseクラスのした下の階層にある

play　
pause
loading
error

この四つのタグがバックグランドURLの指定で
player-graphics.gif
gifの画像を呼び出しているようなのですが、undefindと出てきてしまいます。
再生するボタンを表示する部分がうまくいってない気がしました。

[winterboum]

このfileを読みに行く辺りのlogを見たいです。
この画面を表示させるリクエストの所からください。

[saitou311099]

すみません。
デバックの方が少し不慣れなものでこれでいいのかよくわからなかったのですが、こちらに追加させて頂いた二枚の画像でよろしいでしょうか。

[saitou311099]

すみません。
画像を追加させて頂いたのですが、
urlを呼び出す部分のCSSを強引に

player-graphics.gif

に変更したらエラーがコンソールで表示されなくなりました。
なぜ呼び出す画像のURLにundefindが勝手についてしまったのかは、正直よくわかりませんが。

[winterboum]

log/development.log と言うのがあると思います。
サーバを止めて、このlogを削除かrenameしてサーバを起動して
で、画面を表示させると、logに書きだされます。

[saitou311099]

勉強になりました。ありがとうございます。
今はもうエラーが表示されていないのですが、ログを消して無理やりまたエラー起こしてみたら、その部分のエラーのログだけ表示されるようになりました。

[winterboum]

それを見せてください

[saitou311099]

エラーが起きている前の状態に戻してサーバーを立ち上げて、ログを出力しました。

[winterboum]

すみません、画像だと見難いのでtextで貼っていただけませんか

[saitou311099]

ActionController::RoutingError (No route matches [GET] "/undefinedplayer-graphics.gif"):

actionpack (5.2.3) lib/action_dispatch/middleware/debug_exceptions.rb:65:in `call'
web-console (3.7.0) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.7.0) lib/web_console/middleware.rb:30:in `block in call'
web-console (3.7.0) lib/web_console/middleware.rb:20:in `catch'
web-console (3.7.0) lib/web_console/middleware.rb:20:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
railties (5.2.3) lib/rails/rack/logger.rb:38:in `call_app'
railties (5.2.3) lib/rails/rack/logger.rb:26:in `block in call'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `block in tagged'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:28:in `tagged'
activesupport (5.2.3) lib/active_support/tagged_logging.rb:71:in `tagged'
railties (5.2.3) lib/rails/rack/logger.rb:26:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/request_id.rb:27:in `call'
rack (2.0.7) lib/rack/method_override.rb:22:in `call'
rack (2.0.7) lib/rack/runtime.rb:22:in `call'
activesupport (5.2.3) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/executor.rb:14:in `call'
actionpack (5.2.3) lib/action_dispatch/middleware/static.rb:127:in `call'
rack (2.0.7) lib/rack/sendfile.rb:111:in `call'
railties (5.2.3) lib/rails/engine.rb:524:in `call'
puma (3.12.1) lib/puma/configuration.rb:227:in `call'
puma (3.12.1) lib/puma/server.rb:660:in `handle_request'
puma (3.12.1) lib/puma/server.rb:474:in `process_client'
puma (3.12.1) lib/puma/server.rb:334:in `block in run'
puma (3.12.1) lib/puma/thread_pool.rb:135:in `block in spawn_thread'

コピペして貼り付けました。こちらでよろしいでしょうか。

[saitou311099]

Started GET "/undefinedplayer-graphics.gif" for ::1 at 2019-12-17 17:07:01 +0900

こちら貼り忘れてました。

Answer 1

Started GET "/undefinedplayer-graphics.gif

このリクエストからすると、Rails.rootの　publicに "undefinedplayer-graphics.gif"　がなければなりません。
そこに　undefinedplayer-graphics.gif　を置いて試したことはありますか？

Comments

[saitou311099]

すみません。試しに

publicに "undefinedplayer-graphics.gif"

に画像を配置したところエラーがでなくなりました。
こちらには画像を配置したことはなかったです。
imageの中に入れるものだと思い込んでおりました。

[winterboum]

エラーをきちんと読みましょう

[saitou311099]

ありがとうございました！