embedタグからaudioタグに変更


MP3 前回、久々に配信したわけですが、以前にどなたかから指摘されていた問題を思い出しました。ChromeでPodcastの音声が貼ってあるページを開くと、勝手に音声ファイルがダウンロードされち...

Posted by  on

embedタグからaudioタグに変更


MP3

前回、久々に配信したわけですが、以前にどなたかから指摘されていた問題を思い出しました。ChromeでPodcastの音声が貼ってあるページを開くと、勝手に音声ファイルがダウンロードされちゃうんです。Safariとかではそんなことないのですが。

原因は、音声ファイルをブラウザ上で再生できるようにembedタグというもので貼り付けてプレイヤーを表示していたのですが、それがいけないようです。

このPodcastは、Movable TypeというCMSにEasyPodcastingプラグインというものを入れて配信してます。デフォルトの状態では、音声ファイルをアップロードすると自動的にFlashプレーヤーが表示されて音声の再生ができるのですが、iPhoneやiPadではFlashプレーヤーが表示されないので、少し改造して、embedタグで埋め込むようにしてiPhoneとかでもブラウザ上で再生できるようにしていました。

結局、このembedタグをaudioタグに変更して解消した感じです。

audioタグは、HTML5から追加された新しめのタグでして、ブラウザにプラグインなどが必要なく音声の再生ができるもので、動画の場合はvideoタグになります。

iPhoneなどでも問題なく表示されますし、audioタグにすることに落ち着いたのですが、問題はIE8で表示されないこと。以前は、その問題があったので見送っていたのですが、MicrosoftさんもIE8のサポートを2016年1月で終了するようですし、そろそろいいかなと。Chromeの最新版で不具合がある方がいいかなという判断です。どちらにしても、iTunesには問題なく配信はされます。

embedタグでも書き方によっては大丈夫かもしれませんが、audioタグの方がスマートでしたので。

ちなみに、audioタグではMP3以外のフォーマットも対応しているのですが、ブラウザによって再生できないフォーマットもあり、MP3が一番無難です。下記のサイトによると、IE8以下とOpera mini以外は対応しているようです。

Can I use… Support tables for HTML5, CSS3, etc

Music:


Posted On
  • Podcastで聴く
  • Google Podcasts
  • Listen to Stitcher