CODEWITHSUNDEEP
ruby-on-railsrubyhtmlasset-pipelinehtml5-audio
xeroshogun
xeroshogun

Reputation: 1092

Rails app not loading mp3 file to play in HTML 5 player

I have an mp3 file saved in my assets/audio folder and want to play it using the html 5 player. However, when I load my page I always get a 404 not found error for that resource. Wondering if I am doing this wrong.

In view.html.erb

<audio src="app/assets/audio/bensound-acousticbreeze.mp3" type="audio/mpeg" controls>
    Your browser does not support the audio element.
</audio>

I have verified multiple times that the full path is correct. Any help would be appreciated

Upvotes: 2

Views: 2741

Answers (2)

xeroshogun
xeroshogun

Reputation: 1092

Apparently all rails assets get collapsed down into the assets directory, even if they are in sub-directories. The correct path was just "assets/bensound-acousticbreeze.mp3."

To anyone having trouble like this, it helped me to compare the path of the missing asset with the one I wanted to load to see what the difference was.

Upvotes: 0

OneHoopyFrood
OneHoopyFrood

Reputation: 3969

UPDATE: Found this while looking up a few things to answer the question. Better than any other solution here is to use the built-in audio_tag. This does remove the alternate text option though, so there's that. Still, here's the doc page.

Have your tried audio_path or asset_path?

That would look like this:

<audio src="<%= audio_path 'audio/bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
    Your browser does not support the audio element.
</audio>

or

<audio src="<%= asset_path 'audio/bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
    Your browser does not support the audio element.
</audio>

You should simplify by keeping your audio in the audios dir as seen in the docs. Then it would just be:

audio_path "bensound-acousticbreeze.mp3"

All together with the html:

<audio src="<%= audio_path 'bensound-acousticbreeze.mp3'%>" type="audio/mpeg" controls>
    Your browser does not support the audio element.
</audio>

Upvotes: 3

Related Questions