firefoxでaudioエレメントを動的に作成したい

audio - HTML5 Microphone capture stops after 5 seconds in Firefox - Stack Overflow

下記のようなエレメントを動的にjavascript でつくりたいのですが、うまくできない。

以下のようにajaxのsuccessに記述しておいて、動的に audio要素を生成している。

    success: function(data){
      console.log(data.id);
      var url = "/audio/" + data.id + ".wav";
      var li = document.createElement('li');
      var au = document.createElement('audio');
      au.setAttribute("controls",true);
      au.setAttribute("src",url);
      au.setAttribute("type","audio/wav");
      li.appendChild(au);
      var recordingslist = document.getElementById("recordingslist");
      recordingslist.appendChild(li);
    },

どうも、audioのurlに対してGETでとりに行ってしまうからと思われる？！ でも、同じくgetでとりに行くchromeでは動くのですが？！

コンソールにこんなワーニングが表示されるし。

こちらのリンクのデモはfirefoxでうごくしなぁ。

Introduction to the HTML5 audio tag javascript manipulation « Position Absolute - Waves of front-end, product and entrepreneurship articles

配信側のContent-Typeに問題か？

結局Mojoliciousでwavファイルを配信するときのContent-Typeがtext/plainとなってしまうのが 問題のようです。mp3にしたらちゃんと表示された。mp3だとMojoliciousはContent-typeをaudio/mpegで返します。

Mojolicious::Typesというモジュールにwavは切られていないのでそのせいなのか？ https://metacpan.org/pod/Mojolicious: なぜ、wavが設定されていないのだろうか？

MojoliciousのChangeLog

5.31  2014-08-19
  - Improved Mojolicious::Static to allow custom content types.
  - Improved url_for performance.

どうも、Content-Typeがカスタマイズ可能なように5.31に変更になっているようで。 その設定方法を調べればよろしそうです。

http://mojolicio.us/perldoc/Mojolicious

# Add custom MIME type
$app->types->type(wav => 'audio/wav');

結局、上記のように変更したらうまくできました。