デザイン

デザイン

PR

Audio Player in jQuery, HTML5 & CSS3等Webデザインに加えて製品のアピール力をアップできるミュージックプレイヤー25選!

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、Resources • Scripts 8 minutes 25+ Free and Premium Music Players for Website and Blog
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

5,196 views

読了時間 : 約7分19秒

ブログやウェブサイトにオーディオストリームを組み込むのが近年大きな流行になっています。サイトにミュージック・プレーヤーを使うのは今やトレンドであり、将来的にはマーケティングツールとして大きな効果が期待されます。ミュージック・プレーヤーの効果は閲覧者へのインパクトだけではなく、製品やサービスの売り出しにも効果が望めます。あなたのサイトイメージに沿って活用してみませんか?沢山の音源から、ぜひあなたの好みにあわせていきましょう。

 

しかし自分にあったミュージックプレイヤーを見つけるのは難しく、仮にも膨大な時間がかかります。そこで今回私達が厳選したプレイヤーを紹介します。洗練且つアートなイメージが特徴の個性あふれるものばかりで、マーケティング効果が実感出来ます。

 

今やウェブサイトとブログは私達の生活になくてはならないものです。効果的な表現手段だけではなく、ビジネスの場においても重要です。だからこそ閲覧者を増やすために、新しいウィジェットをもとに日々カスタマイズされています。ウェブサイトを作る主な目的は、製品やサービスに効果的な印象を持たせるために独自性のあるコンテンツとデザインで沢山の閲覧者をひきつけることにあります。しかも現代のビジネスにおいて、これらウェブサイトは重要なマーケティングツールの役割を担っています。

 

ほとんどの人は閲覧者を増やすために珍しいウィジェットをポートフォリオやブログに組む傾向がありますが、それはユニークなウェブサイトやブログを作りたいからです。しかしもっと簡単に他のサイトと差別化をはかるには、ミュージックプレイヤーを組み込んで操作性の高いジュークボックスと見た目にこだわることなのです。

 

 

 

無料のミュージックプレイヤー

Audio Player in jQuery, HTML5 & CSS3

これからはプレイヤーに搭載された機能紹介していきながら進めていきたいと思います。

こちらは MediaElement.jsを基本としており、古いブラウザでも動作可能なHTML5 API の機能を備えたエナジーとミミックの要素を必要とします。
このチュートリアルでは、タイムツールチップ、プログレスバー、音量スライダー、コントロールボタン等の詳細を9つに分けて説明しています。

 

 

 

Flash MP3 Player

フラッシュプレイヤーは少し時代遅れになってしまいましたが、まだまだ需要は非常に高く、PCのアップグレードをしたくない沢山のユーザーにとってもそれは同じです。Flash MP3 Playerは日常生活で音楽を楽しむライトユーザーにとっては使いやすいものです。
こちらは何種類かのスキンと基本ツールセット内蔵のWordPressプラグインです。

 

 

 

XSPF Web Music Player (Flash)

ActionScript 2で書かれたXSPF Web Music Player (Flash)は、ブラウザの互換性に対応しています。XML共有プレイリスト・フォーマットを利用した低容量のアプリケーションです。欠点としてはカスタマイズパネルの操作性が今一つで、自分で構造とドキュメントを調べた上で必要な環境設定をしなくてはいけません。それ以外では使いやすいプレイヤーです。

 

 

 

Audio Player 2.0

Audio Player 2.0は、WordPressを基礎としたウェブサイトをシンプルかつクリーンなミュージックボックスの軽量プラグインです。管理パネルやフランス語版、アラビア語インターフェース用の RTLレイアウトを兼ね備えており、背景色のセットや透明度操作、その他機能も充実しています。

 

 

 

Flowplayer


Flowplayerは独立したミュージック・ウィジェットや操作性の高さと様々なフォーマットのメディアプレイヤーとして使用可能です。
カバーイメージやプレイリストがウェブサイトの特色に合わせてセットでき、RTMPプロコトルを使ったオーディオストリーム・ファイルも使用可能です。

 

 

 

Free Music Player

Free Music Playerは豊富なカスタマイズパネルのフラッシュ・プレイヤーで、以下の操作が可能になります。

 

・ムービーの背景色
・プレイヤーの背景色
・ボタンの色
・時間経過の色
・曲説明のディスプレイカラー
・MP3再生

 

連続再生のほかに自動再生、手動再生も定めることができます。

 

 

 

FREE Flash MP3 Player

こちらは高速かつ軽量なアプリケーションで、ウェブサイトユーザーが音楽を聴くことが出来ます。主な機能としては以下の4つです。

 

・一貫性のあるコントロール(play, pause, stop, mute)・モバイル端末でもリサイズ可能
・自動再生オプション
・自動再開オプション
・カスタマイズ可能なデザイン

 

 

 

MP3 Player

こちらのMP3 Playerはオープンソースと全体的なコンポーネントのカスタマイズ、そしてウェブサイトで曲を再生するための直観的なインターフェースは小ぶりながら人の目を引きつけるデザインです。mini, normal, maxi, multi そして jsの5つのタイプを自由に選ぶことが出来ます。

 

 

 

プレミアムのミュージックプレイヤー

Ultimate DJ Manager – WordPress plugin

Ultimate Dj Managerhaは音楽ウェブサイトやブログにぴったりの WordPressプラグインです。オススメ機能として3つのミニアプリケーション(Soundcloudプレイヤー、従来のフラッシュプレーヤー、最新のHTML5プレイヤー)のほかにプレイリスト制作、拡張機能としてショートコードの使用と同様にギグスケジューラーの制作も出来ます。

 

 

 

Fancy Music Player V2.0 – jQuery plugin


こちらは高速かつ様々な目的に対応可能なQueryプラグインです。Ultimate Dj Managerと比べるとあまり洗練されてはいませんが、HTML5を基本としたプロジェクトに最適なFlashバージョンです。HTMLツール、XML、カスタムプレイリスト、その他リンク経由で曲を追加することが出来ます。オートロードのオプション付きで、サウンド管理システム、トラック検出と2色のカラー設定(ライトかブラック)が可能です。

 

 

 

MusicBox – HTML5 Music Player

HTML5で動作するユニバーサルプレイヤーで、古いブラウザでもFlashバージョンのおかげで動作に問題ありません。
主な機能としては

 

・リストビュー
・音楽タイトルの反映
・スタイルシートを使ったカスタマイズ

 

さらにお気に入りのプレイリストの保存にローカルストレージの使用ができます。CSS3ですから負荷もかかりません。

 

 

 

MediaBox – jQuery Plugin for Audio & Video

他のオーディオフォーマットと互換性のあるパワフル且つ多目的なマルチメディア・プレイヤーです。ウェブプロジェクトとシンプルなアプリに効果的で、HTML5のプラグインと問題発生時のFlashフォールバックに優れています。より印象的にするための9つのウィジェットと組み合わせが可能です。

 

 

 

Fullscreen Music Player

大きなインパクトを備えているだけではなく、MP3ファイルリストを順序づけてプレイリストを作成します。好みに合わせた3つのモード(フルスクリーンまたは最小化、ページリスト)を選択できます。シンプルかつエレガントで、トラック操作のための全てのコントロールが可能です。IE6のフォールバックもついています。

 

 

 

Mp3 Player Resizeable Paypal Support

Mp3 Playerは基本的な音楽再生だけでなく、デジタルストアも兼ね備えておりトラックやアルバム販売には欠かせない機能です。
PayPalサポートで迅速かつ確かな支払い機能、コンポーネントのデザインと機能のカスタマイズ、ディメンション設定や通貨記号の選択まで豊富に設定可能です。

 

 

 

Background Music Button

Background Music Buttonは省スペースでありながら機能に抜かりありません。コントロールセンターとして分かりやすいボタン配置、ループオーディオのサポートの他、トラック再生時のみフラッシュを使用します。

 

 

 

ADG3 : Simple Sound Controller

先ほど紹介したプレイヤーと似て、こちらもまたシンプルを極めた外見に独立した再生ボックスです。デザイン変更、メインファイル経由で構成が可能で見る人の目をより一層楽しませることが出来ます。

 

 

 

Dark Star Mp3 Player Pro


Dark Star MP3 Player Proは、UI選ばずに統合できるバースタイルのコンポーネントです。最小サイズながらも必要な要素とナビゲーションボタンがあり、 XMLファイルを利用したMP3トラックの再生をします。
その他の主な機能は以下の通りです。

 

・シャッフルモード
・メインスキンを簡単にカスタマイズ
・操作性のあるドラッグとドロップ
・洗練したベクトルデザイン
・便利なチュートリアル

 

 

 

Volume Sound Control – fade In/Out + Cookie

ユーザーに効果的なBGMを流したい場合にオススメするのがこちらのプレイヤーです。このプラグインはボリュームレベルを備えたクッキーを採用しており、その他の機能としては以下の通りです。

 

・ミュートボタン
・ドラッグ出来る選択肢
・メインのプリローダー
・フェードインまたはアウトオプション
・サウンドプリローダー

 

 

 

 

MP3 Player with Multiple Instances

こちらは一つのページに無制限のプレイヤーを搭載することができ、プラグインでは珍しい機能です。リンク可能なミュージック・ボックスで、音楽をまとめることが出来ます。こちらでキーコンポーネントを作成し、音楽を楽しみましょう。ちなみにこちらは様々なFlashで動作することを想定し、HTMLファイルで使用することにしています。

 

 

 

Dynamic Mp3 Player (xml)


Dynamic MP3 Playerは様々なプラットホームに対応可能なクロス・ブラウザープラグインです。無制限のジャンルとトラック数、HTML経由で説明も追加できます。XMLを通じて自在にカスタマイズ、外部ソースからアルバムをロードしてインターフェースを作れば、オンラインリスナーにとっても非常に利便性が高いでしょう。

 

 

 

XML MP3 Player with List

リスト表示のXMLプレイヤーでFlash8に対応、問題なく音楽作成をします。機能面では特に目立ったものはなく、以下の通りの操作が可能です。

 

・自動スクロールのプレイリスト
・再生、一時停止等のボタン
・トラック・シークスライダー
・ボリュームバー
・アルバムのオプション

 

 

求める要素によって最適なプレーヤーを

 

オープンソースのプレイヤーやプラグインの購入でも、どちらも機能性とオプションに焦点を当てているので内容に大きな違いはありません。それに音楽再生や簡単なインターフェースの提供だけだったらオープンソースで問題ありません。逆に機能性に特化したものやユーザーからの印象を求める場合、それ以外にも PayPalの統合や無制限でのコンポーネントのサポートが必要な場合は有料を試してみるのも良いでしょう。

おすすめ新着記事

おすすめタグ