- audio_tagのsrc属性に`+`を含む文字列(DateTimeのタイムゾーン`+09:00`等)が入るとエラーになる
- 原因はURLの`+`が空白扱いになる仕様で、`DateTime.now`のタイムゾーン部分が直接ファイル名に含まれていることがトリガー
- 対策は`strftime('%Y-%m-%d_%H:%M:%S')`でタイムゾーンを含めずフォーマットすればaudio_tagのエラーは解消される
Railsでaudio_tagを使っていてsrc属性に+が含まれているとエラーになった時のメモです。DateTime.nowをそのままファイル名に使うと発生しがちなので、対策をまとめておきます。
【Rails】audioタグのsrc属性の値に + を含めるとエラーになる
Railsのaudio_tagはsrc属性に+が含まれるとエラー(URL上で空白扱いされる仕様)。strftimeでタイムゾーンを除去して回避できます(2026年5月時点)。
audio_tagのsrcで+が問題になる背景は？
jsで、audio_tagで出力されるaudio要素のsrc属性に値を代入していた。
値は以下のようなDateTime型の値を含んだファイル名。
[12] pry(main)> DateTime.now => Tue, 14 Jan 2020 08:02:15 +0900
が、audio要素のsrc属性でエラーになる。
値がDate.todayのようなDate型を含んだファイル名だとエラーにならない。
[11] pry(main)> Date.today => Tue, 14 Jan 2020
調査していくと、srcの値に+が含まれているとエラーになることがわかった。
DateTimeにはタイムゾーンの+09:00に+が含まれているのでエラーになる。
Dateには+が含まれていないので実行出来る。
audio_tagのsrcで+を扱う対策は？
そのため、strftimeでタイムゾーンの部分を除去することで対応しました。
DateTime.now.strftime('%Y-%m-%d_%H:%M:%S')
除去した結果を確認します。
[13] pry(main)> DateTime.now.strftime('%Y-%m-%d_%H:%M:%S')
=> "2020-01-14_08:09:11"
strftimeでフォーマットされ、+が除去できました。
この値をファイル名に入れることで、DateTime型のような値でもaudioタグのエラーが解消出来ました。
RailsやRubyを学びたい人へ
RailsやRubyを本格的に学ぶなら「RailsHack」(早期割29,800円)かUdemyの主要Rails入門3コース受講がおすすめ。Udemyは90%OFFセール頻発・30日返金保証付き(2026年5月時点)。
RailsやRubyを学びたい人は、
RailsHack(レイルズハック)という、
最近できた新しいプログラミングスクール（今なら通常価格69,800円が、早期割で29,800円！）か、
Udemy
で下記のコースを受講すると良いです★
✅1. フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座
✅2. 【はむ式】ハンズオンで学ぶRuby on Rails 6【Dockerにも触れられる】
<- おすすめ。ハムさんはReactやTypeScriptの教材も非常に丁寧。
✅3. はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう
また、
Udemy
は定期的にセールをやっていますし（90%OFFとかもザラ）、
「30日間なら返金できる」ので、
満足できなかった時でも安心です。
【公式】RailsHack(レイルズハック)
【公式】Udemyで学んでみる
よくある質問（FAQ）
Q. audio_tagのsrcに+以外で使えない文字はありますか？
- URLの一部として扱われるため、半角スペース・
#・?・&・日本語など、URLエンコードが必要な文字は同様にエラーや意図しない挙動を起こす可能性があります。安全のためファイル名はASCIIの英数字・ハイフン・アンダースコアに統一するのが無難です。
Q. strftimeのフォーマット指定子は他にどんなものがある？
A.%Y(年4桁)・%m(月)・%d(日)・%H(時24)・%M(分)・%S(秒)・%j(年内日)・%U(週)・%A(曜日)などが使えます。RailsでもRubyのTime#strftimeと同じ仕様で扱えます。
Q. URLに+を含めたい場合はどうエスケープする？
- URLエンコード
%2Bを使います。URI.encode_www_form_component(string)でRuby側からエンコードでき、+も%2Bに変換されます。
Q. audio_tag以外で同じ問題が起きるタグは？
A.image_tag・video_tag・source_tag・link_to(href属性)など、URLを扱うすべてのRails Helperで同じ問題が起き得ます。src/hrefにファイル名を直接渡すケースでは要注意です。
Q. DateTime.nowとTime.nowはファイル名用途で何が違う？
- どちらもタイムゾーン付きのオブジェクトですが、ファイル名用途では
Time.now.strftime('%Y%m%d_%H%M%S')のようにstrftimeで文字列化するのが無難です。Date.todayを使う場合はタイムゾーンを含まないので、+問題は発生しません。
