MP3ファイルの再生〜御隠居のポッドキャスティング入門

５. MP3ファイルの再生

ポッドキャスティングをするためには、音データであるMP3ファイルが必要ですが、これは各自用意してください。ここではサンプルのデータを使って説明します。

MP3ファイルを再生するためには、いくつかの方法があります。ここでは、それらの中で代表的な方法を取り上げています。また、すでにポッドキャスティングに対応したブログを持っている場合は、この説明を読み飛ばしてもらってもかまいませんが、より深くポッドキャスティングとRSSの関係を学ぶためには、ぜひとも一読ください。

リンクを使った再生

最も単純な再生方法はリンク（aタグ）を利用することです。つまり、次のように記述します。

<a href="audio/demo1.mp3">クリックすると再生</a>

実際に、以下のリンクをクリックしてみてください。MP3を再生するためのプレイヤーに切り替わります。なお、ここに戻るためには、ブラウザの戻るボタンで戻ってください（あるいはプレイヤーを終了させます）。

クリックすると再生

組込み再生

リンクを使用した場合の再生では、プレイヤー画面に切り替わるため、気の利いたWebページを書くことができません。そこで、Webページにプレイヤーを組込む方法が用意されています。これにはobjectタグを使用します。

以下にobject要素の一般的な記述方法を示します。

<object width="幅" height="高さ" data="MP3ファイルへのURL" type="audio/mpeg">
    param要素
</object>

幅: width属性で指定します。再生プレイヤーの横幅をピクセル単位で指定します。通常、320ピクセルぐらいが丁度いいでしょう。なお、QuickTime Playerの場合は、自由な大きさが指定できます。
高さ: height属性で指定します。再生プレイヤーの高さをピクセル単位で指定します。通常、QuickTime Playerの場合なら16〜24ピクセルぐらいが丁度いいでしょう。また、Windows Media Playerの場合なら44〜45ピクセルぐらいがいいでしょう。
MP3ファイルへのURL: data属性で指定します。再生させたいMP3ファイルへのURLを指定します。
メディアタイプの指定: type属性で指定します。MP3ファイルの場合は、「audio/mpeg」と記述します。

次にparam要素は、以下の書式で再生プレイヤーを制御するためのパラメータを記述します。

<param name="パラメータ名" value="パラメータ値">

name="src" value="MP3ファイルへのURL": name属性にsrcを指定し、value属性にMP3ファイルへのURLを指定します。これは、object要素のdata属性が有効にならないブラウザへの対策となります。
name="autoplay" value="true または false": ページを表示したときに自動再生するかどうかを、true、falseで指定します。指定を省略した場合は、trueの意味になります。
name="loop" value="true または false": ループ再生するかどうかを、true、falseで指定します。指定を省略した場合は、falseの意味になります。
name="controller" value="true または false": ページを表示したときにプレイヤーを表示するかどうかを、true、falseで指定します。指定を省略し多場合は、trueの意味になります。

実際のコードは次のようになります。

<object width="320" height="45" data="audio/demo1.mp3" type="audio/mpeg">
    <param name="src" value="audio/demo1.mp3">
    <param name="autoplay" value="false">
    <param name="loop" value="false">
    <param name="controller" value="true">
</object>

実際に、以下のプレイヤーを使ってMP3ファイルを再生してみてください。なお、ブラウザによっては、再生できない、あるいはプレイヤーが表示されない場合があります。

うまく再生できない場合の対処

ブラウザのバージョンや種類によっては、うまく再生できない場合があります。その対処方法にはブラウザや再生プレイヤーに応じた対処方法が様々ありますが、ここでは最も単純なリンクを使用した方法について説明します。

これはMP3ファイルへのリンクをobject要素の中に記述します。

<object width="320" height="45" data="audio/demo1.mp3" type="audio/mpeg">
    <param name="src" value="audio/demo1.mp3">
    <param name="autoplay" value="false">
    <param name="loop" value="false">
    <param name="controller" value="true">
    <p><a href="audio/demo1.mp3">クリックすると再生</a></p>
</object>

このようにリンクを記述すると、うまく再生できない場合だけ、リンク部分が表示され、再生ができる場合には、再生プレイヤーが表示されます。

先頭に戻る