導入

当方の音楽素材サイトで、フッター固定型の簡易なオーディオプレイヤーを実装しました。

このプレイヤーは、そのページにあるaudio要素とタイトルを取得し、順次再生します。プレイヤーの表示・非表示、また、スマホやタブレット等に向けてレスポンシブに対応しています。現在のところオプションは、PC向けに、音量調整・連続再生・リピート再生が可能です。

対応ブラウザ

最新の主要なブラウザで動作を確認しています。Internet Explorer（以下IE）について、IE9では、プレイヤーで使用している、input要素のtype="range"属性と、CSS3のflexboxに対応していないので、プレイヤーの表示はされませんが、曲の再生はできます。IE8以下では、HTML5のaudio要素に対応していないため、曲の再生自体ができません。

ライブラリ

プレイヤー作成にあたって、Bootstrap3とJQueryを使用しています。再生や停止等のアイコンは、Bootstrapに組み込まれているGlyphiconです。

概要は以上です。コード等の詳細は、改めて記事にしていきたいと思います。