Audio Player: Responsive and Touch-Friendly

サイト上で音楽を流したいという場合に便利なjQueryオーディオプレーヤー用のプラグインです。

今や、スマホやタブレットなどタッチパネルでウェブをみるのは当たり前。

当然、レスポンシブでタッチフレンドリーなオーディオプレイヤーも必要になる場合がでてくるはずです。

HTML5から新しく追加された<audio>タグを使えば、サイト上で音楽を鳴らすのは簡単ですが、下のような感じでちょっと味気ない。

スクリーンショット 2014-10-15 10.48.47

それを、レスポンシブでタッチフレンドリーでお洒落にと三拍子あわせてくれるjQueryプラグインがこの「Audio Player: Responsive and Touch-Friendly」です。

サンプルを作ってみました。ぜひスマホでも確認してみて下さい。

⇒ audioタグをスマホフレンドリーでレスポンシブにカスタマイズする「Audio Player: Responsive and Touch-Friendly」jQueryプラグインサンプル

サンプルではコントロールバーをページの上部に設置していますが、下に設置してあげるとスマホとかだといい感じかなと思います。

設置方法も簡単なので、おすすめです。

導入方法

まずはこちらのサイトからjQueryプラグインをダウンロードしましょう。サイトの下の方にあります。ダウンロード出来ない場合は、リンクを右クリックして対象を保存で。

jQueryはこちらからダウンロードできます。
http://jquery.com/download/

または、

とGoogleホストライブラリーから直接利用してもOKです。

次に音楽ファイルを用意します。HTML5 Audioはブラウザーによって対応する再生フォーマットがバラバラなので、現状ではSafari、Firefox、Opera、Google Chromeのすべてに対応しているフォーマットはありません。

そこで、1曲あたりmp3形式とogg形式の両方を用意します。wave形式もあればなおさらよいです。

mp3→oggやwaveファイルの変換にとても便利なのがコチラのサイト。
Zamzar – Free online file conversion

使い方は、
1,WEB上で変換したいファイルを選択
2.変換したい形式を選択(ここではogg,wav)
3.メールアドレスを入力
4.convertボタンを押すの4ステップです。

変換が終了するとメールが届きますので、そのメールにあるアドレスから変換後のファイルをDownloadすることができます。

では、jQueryを読み込ませます。HTMLを記述はこれだけ。パスに注意してファイルを設定して下さい。

スタイルは以下のとおりです。

このままコピペして利用すれば簡単ですし、cssがわかる人なら、自分の好きなようにカスタマイズも出来ると思います。

ちなみに、自動再生させたり、曲をループさせたいときは次のようにautoplay、loopのコマンドを追記してあげます。

最後にサンプルのソースを書いておきます。コピペで簡単に使えると思います。どうぞご参考まで。

この記事と関連してると思われる記事: