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

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

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

<audio src="mp3ファイルのURL" controls>
    <p>音楽を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

の形でHTMLに埋め込んだ場合で、非常に簡単だが、Google Chrome Ver.53 は背景色が白に近いためHTMLの背景色が白の場合は変なデザインになってしまう。
また、Internet Explorer Ver.11 の場合は、他のブラウザより大きく表示される。

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

1. 自己紹介

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