ホームページ上で音声ファイルを公開する

音声ファイルをWebサーバにアップロードします。ファイル名は分かりやすい名前が良いでしょう。英数字で管理するならば
2014-03-05.mp3
2014-03-05-1030.mp3
このように日付もしくは日付+時刻表記で管理すると、後々整理がしやすくなります。このとき
2014-3-5.mp3
ではなく
2014-03-05.mp3
と、頭に0を付けて桁数を揃えるように心掛けてください。こうすることで並び替えが正しく行われるようになります。

さて再生方法です。最も簡単なのは
「再生するならこちらをクリック」
とハイパーリンクを設定してしまう方法です。HTMLならば
<a href="2014-03-05.mp3">音声を再生</a>
と記述します。ダウンロードのための設定は特にありません。mp3やzipファイルのようにブラウザで処理できないものは、ブラウザが勝手に「ダウンロードしますか?」と聞いてくれます。
リンクをクリックするとダウンロードが始まりますが、どれくらい待たされるか分かりませんので、
「ここをクリック(12MB 34分)」
というように、データサイズや再生時間を併記しておくと良いでしょう。

ページ内にプレイヤーを表示させる方法です。audioタグを使います。audioはHTML5になって、新たに導入された要素です。使い方は下記のとおり。

<audio src="2014-03-05.mp3" controls="controls"></audio>

「controls」属性を記述するとブラウザにプレイヤーが表示されます。controlsを省略したり、つづりを間違えたりすると何も表示されませんので注意してください。audioタグには便利なオプションがいくつか用意されています。役立ちそうなものをいくつか紹介しておきましょう。

例1:先読みを行う場合
<audio src="2014-03-05.mp3" preload="auto"></audio>
ページを開いたらすぐにバックグラウンドで音声データの読み込み始めます。音声データの容量が大きく、読み込みに時間を要する場合に有効です。ただしユーザーが再生するつもりが無くとも、勝手にダウンロードが始まるのが難点です。キリストへの時間では「文章を読むだけ」という方も多いので、この設定は見送ることになりました。

例2:先読みをしない場合
<audio src="2014-03-05.mp3" preload="none"></audio>
ページを開いても音声データは読み込まれません。通信量は低く抑えられます。

例3:音声ファイルのメタデータのみ先読みする場合
<audio src="2014-03-05.mp3" preload="metadata"></audio>
ページを開くと音声データにアクセスし、音声ファイルのメタデータ(容量、再生時間など情報)のみ取得します。通信量が少なく、かつ必要最低限な情報は取得できるオススメの設定です。

例4:ページを開いた時点で自動再生する場合
<audio src="2014-03-05.mp3" controls="controls" autoplay="true"></audio>
ページを開いたら自動で再生が始まります。予期せず大音量で再生してしまうこともありますので、おすすめしません。これを使用するなら、リンク元に
「再生するならこちらのページ」
「自動で再生されますので御注意ください」
などの記述をしておくべきでしょう。
ちなみに下記のようにプレイヤーを非表示にしてしまうと、BGMとして音楽を流すことも出来ます。
<audio src="2014-03-05.mp3" autoplay="true"></audio>

コントローラーの横幅はなるべく長めに表示されるようにしましょう。横幅が長ければ、それだけ再生・一時停止・頭出しがしやすくなります。CSSで記述するなら
audio {
　width:100%;
}
となります。