Audio タグを使ってみたが・・・

HTML5 に搭載されている audio タグを使ってみた。音楽再生の他にビデオ再生の video タグも用意されていて、非常に簡単に 音楽や動画をHTMLページに埋め込むことが可能になった。

ただ、プレーヤーのデザインはブラウザに依存するらしく、ブラウザによってデザインはまちまちだった。
しかも、ブラウザのバージョンによってデザインが変わるらしく、ネットで紹介されているデザイン通りに表示されない場合もあるようで、やってみないとどのように表示されるのか分からないようだ?

プレーヤーのデザインブラウザとバージョン
Mozilla Firefox Ver.48
Google Chrome Ver.53
Microsoft Edge Ver.38
Internet Explorer Ver.11
Safari Windows Ver.5

上記のデザインは audio タグを

<audio src="mp3ファイルのURL" controls>
    <p>音楽を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
の形でHTMLに埋め込んだ場合で、非常に簡単だが、Google Chrome Ver.53 は背景色が白に近いためHTMLの背景色が白の場合は変なデザインになってしまう。
また、Internet Explorer Ver.11 の場合は、他のブラウザより大きく表示される。

実際に埋め込んだページを2ページ作成してみた。

  1. 2011年4月11日 ハーモニカ演奏会
  2. メールアドレスと自己紹介

ところが、上記2番のケースでは、うまく表示できない。
最初チラッと表示されるが直ぐに消えてしまう。HTMLがHTML5 になってないのかも知れないと思って、書式を確かめてみたが、1番と2番の違いはないように思う。
たぶん簡単な間違いなのだろうと思うが、分からないまま丸2日が過ぎた。

データ
  • 2016.08.31(水)

 

アーカイブ

現在位置: ホームなんでも日記メニュー > このページ