playlistプラグイン

HOME > プラグイン > playlistプラグイン

音楽を再生する playlistプラグイン

音楽を再生する playlistプラグイン

ホームページ上で音を再生させる方法です。

通常、音を再生させるのであれば、ページ内に音源ファイルへのリンクを張ればOKです。
メディアプレイヤーなどの再生プレイヤーが別窓で立ち上がり音楽を聴くことができます。

ここでは、playlistプラグイン　というMP3再生用のプラグインの使い方を説明します。
このプラグインを使うと、ページ内にプレイヤーが設置され、サイト内容を見ながら音を聞くことが出来ます。

サンプル曲をアップしていますので、よろしかったら視聴＆操作をしてみてください。
(音が鳴りますので、音量の調節と周囲にご注意ください。）

%{artist} - %{title} [%{album}], (%{year}) (%{time})

　　サンプルMUSIC

Seek to %{time1} of %{time2} (%{percent}%)

---

0:00

This is a normal list of HTML links to MP3 files, which jsAMP picks up and turns into a playlist.

－Special Thanks－
音源はSOUND IMAGE♪様からいただきました。
　sound1:月が明るい夜には　　sound2:未来を紡ぐ希望

当サイトご利用の際は、ご利用方法もご覧ください。

編集の手順

プラグインダウンロード
プラグインアップロード
音源のアップロード
編集タグの設置
再生確認

プラグインダウンロード

このプラグインは無償版の方は、標準ファイルではありませんので、自分でダウンロードして、サーバーにアップする必要があります。
（有償版をご利用の方は、有償版マニュアルをご覧ください。）

プラグインのダウンロードファイルはＱＨＭのホームページにありますが、このサイトでもご用意しましたので、下をクリックして、ＰＣに保存してください。

ダウンロードされたファイルを解凍すると、playlist というフォルダと playlist.inc.php というファイルが入っていますので、確認してください。

プラグインアップロード

ＦＴＰなどで、サーバーにアクセスしてください。
サーバー側の plugin フォルダに先ほどダウンロードしたファイルをアップロードします。

初期では、プラグインフォルダには、php ファイルしか入っていないので、一瞬、戸惑ってしまいますが、
playlistのフォルダもフォルダのまま同じ所（同じ階層）にアップロードしてください。

playlistフォルダには、プレイヤーの部品の画像がたくさんはいっています。
その画像を修正すれば、プレイヤーの見た目を変更する事も可能です。
ファイル名などは変更しないで、同じ名前・拡張子のファイルを用意して、上書きアップロードしてください。
私は、グレーの色が地味だったので、大きさ・形はそのままで、別の色に変更したことがあります。
ファイルの数がすごくたくさんだったので、大変でしたが・・・。
画像編集がお好きな方は、是非チャレンジしてみてください。
大きさや形などを変えるとプレイヤーの形が崩れてしまいますので、その辺はご注意ください。

音源のアップロード

ホームページにアップしたいMP3方式の音源を用意します。

それを、サーバー側にアップロードするのですが、そのままトップ階層にアップロードすると、後々ファイル管理が大変ですので、MP3用にフォルダを作るのをおすすめします。

ここでは、トップ階層（skinフォルダなどと同じ並び）にmp3という名前のフォルダを作ったものとして、説明します。

フォルダを作らなかったり、別のところにアップロードすると、タグの階層がずれてしまいますので、階層の指定がよく分からない方は、このとおり作成してください。

トップ階層に用意したmp3フォルダの中に、用意したmp3音源をアップロードします。

タグを作成する

プレイヤーを設置したいページの編集画面を開けてください。

タグの書き方

#playlist(プレイヤーのタイトル){{
音声へのリンク1,ラベル1
音声へのリンク2,ラベル2
}}

プレイヤーのタイトル：プレイヤー上にテキストとして表示されるタイトルです。
お好きなタイトルを入れてください。
音声へのリンク：mp3/音源ファイル名
ラベル：曲ごとのタイトルです。曲選択のメニューにもなります。

※mp3/　←他のフォルダ名をつけてた場合mp3をそのフォルダ名に置き換えてください。
トップ階層以外にフォルダを作っていたら、そのフォルダを指定する必要があります。

記入例（当サイトの上のサンプル曲は、このタグで作成しました。）

#playlist(　　サンプルMUSIC){{
mp3/sound1.mp3,sound1
mp3/sound2.mp3,sound2
}}

私の編集では、タイトル前に、全角スペースを二つ入れています。
これは、ページを表示した時、プレイヤーの再生位置用のがテキストにかぶるのを防ぐ為です。
スペースを入れるかどうかは、お好みで設定してください。

再生確認

再生確認はかならずしましょう。
音が再生されるだけでなく、設定したプレイヤー名やタイトルなどが間違いなく記入されているかどうかも、確認してください。
音声が流れない場合、記述が間違えている事が多いです。
ファイル名などは、手入力をせず、コピー＆ペーストで張るようにすれば、そういう間違いが減っていきます。

プレイヤーの右の▼をクリックしたら、曲が選択できます。
全ての曲が問題なく再生できるか、確認しましょう。

複数のプレイヤーを設置したい場合

playlistプラグインは、一ページにつき、一つしか設置できません。
仮に、4曲設置しようと、同じページに4箇所プレイヤーを設置しても、一番上のプレイヤーにすべての曲が設定され、他の三つは機能しません。

一ページに複数のプレイヤーを設置したい場合は、mp3playプラグインというのを使いましょう。
ただし、mp3playプラグインは、ページ読み込みの時に、音楽ファイルデータもダウンロードされるので、ページ表示に時間がかかったります。
当然、サーバーに負荷もかかるので、その点も考慮して判断しましょう。

このページのトップに戻る

選択肢	投票
参考になった	12
使ってみたい	0
実際に使ってみた	1

QHMユーザーの為のリファレンス

QHM(クイックホームページメーカー)なら、ホームページを簡単に作成出来ます。
QHMの使い方、編集方法、レイアウト、SEO対策などをご紹介しています。