[メモ] mp3ファイルを自サイトからストリーミング再生させずにダウンロードしてもらう方法

mp3などの音源ファイルを自分のサイトからダウンロード配信したい場合のメモです。

最初にこの記事を書いた当時は苦労したのですが、気づいたらHTMLのaタグに「ダウンロード属性」というとてつもなく便利な機能が追加されていました。せっかくなので旧記事を残しつつaタグのダウンロード属性について追記しました。（2021年10月）

HTMLからサーバ上のmp3ファイルに直リンク したときの挙動

HTMLからサーバ上のmp3ファイルに直リンクすると、クリックしたときの挙動はユーザーのブラウザや環境によって異なる動作をします。

• ストリーミング再生が始まる
• 関連付けられたプログラムでファイルが開かれる
• ダウンロードダイアログが開く

大抵のブラウザで右クリックのメニューからダウンロードできたりドラッグ＆ドロップでダウンロードできたりするので直リンクでもmp3配布サイトは成立しますが、ユーザーにとっては何かと不便だと思います。

理想はストリーミング再生ボタンを試聴のために設置しつつ、更に別ボタンでダウンロードできるという形ではないでしょうか。

そして、そのダウンロードボタンは上記のように動作が安定しないものではなく「必ずダウンロードが始まる」動作でないといけません。
つまり、mp3直リンクで必ずダウンロードしてもらう必要があるわけです。
（mp3ファイルをzipにしておけばいいのですが、サイト管理者としてはストリーミング用のmp3とzipの両方を用意するのは面倒ですし、サーバの負担も心配です）

（2019年12月追記：MusMusは結局このzip併用方式を選びましたw）

実際の方法

調べてみると、mp3に直リンクする形でHTMLを書いても動作を強制的にダウンロードに固定する方法はいくつかありそうです。
その中でも.htaccessでMIMEタイプを変更するというのが最もお手軽かな、と感じました。

.htaccessの記述

ForceType application/octet-stream
Header set Content-Disposition attachment

参考：http://blog.livedoor.jp/kumagai_nori/archives/52221265.html

apatchではmp3のMIMEタイプは
「audio/x-mp3 .mp3」
が通常のようですが、これを

「application/octet-stream」
としています。

この「application/octet-stream」というのは、「どのソフトで開けば良いかわからない謎のバイナリファイル」という意味。

mp3ファイルに対してこんな指定をして副作用がないのか心配ですが、実際にやってみるとばっちりストリーミング回避＆ダウンロードできるようになります。

サイトのルートに設定したところ、mp3ファイルをサブフォルダに置いておいてもきちんと動作しました。

スマートフォン

スマホでも動作しました。ですが、古いAppleのデバイス（iPhoneやiPadなど）ではファイルのダウンロードに強い制限があり動作しないものもあるようです。

弱点

あくまでMIMEタイプの設定なので、ブラウザがちゃんと判断してくれるのかというところが弱点になってきそうです。
ブラウザの中にはMIMEタイプと実際のファイルに齟齬がある場合、ヘッダなんかから勝手にファイル形式を判断して訂正してくれるといういらぬお節介親切なものもあるようで、こういった場合はダウンロードダイアログが開くとは限らないと思われます。

aタグのダウンロード属性

ここまではaタグにダウンロード属性が追加される前のお話でした。

もはや.htaccessなど触ることなく、HTMLコードだけでファイルをダウンロードするよう指定できるようになっています。便利！

<a "hoge.mp3" download>hoge</a>
<a "hoge.mp3" download="hogehoge.mp3">hoge</a>

方法はaタグの中に「download」と書くだけ。doenload=”●●”とすることでダウンロードした際のファイル名を指定することもできます。簡単～