歌の公開ページ作ったんで、音楽プレーヤープラグイン[MP3-jPlayer]を紹介するよ【WordPress】

audioplayer_eye

歌手の木村聡子です。
自称じゃないです。歌でちゃんと食ってます。
前も書いたけども、このことは強く主張したい。
食えなかった時期があったからこそ!!

ご静聴ありがとうございました。

そんで、仕事だけじゃなくて半分趣味で自宅でレコーディングもします。
記念撮影みたいなものね。若くて綺麗なワタシを撮って、てーのとたぶん同じ気持ち。
ワタシの場合は自撮りです。
つまり、ひとりでレコーディングするの。

カラオケ音源データを探して、ない場合は作って、それに歌を重ねます。
ひとりでやるとけっこうしんどいのだけど、完全に自分の思う通りに歌って気に入るまでテイク重ねられるので、この作業はキライじゃない。
自分ひとりでコーラス・ハモりも全部歌っちゃえる。

5年くらい前に自宅にレコーディングのシステムを組んで、そこからボチボチと音源を作ってきました。
あるときは講座のお手本音源として、あるときは完全趣味で。

そんな音源たちを公開したいなぁと前から思ってて、というかいろんな手段でひっそり公開してたんだけど、なんか使い勝手が良くないので、ブログ内に音源公開専用の固定ページ(メニューから飛べるページ)を作りました。

ぜひ聞いていただきたいし、気に入ったらシェアしていただけたらすごい嬉しいなって感じなんです。
で、この記事はこのページを作ったときに使った音源の再生プレーヤーのプラグインを紹介する記事です。

木村聡子PR
木村はオタクですが本業はプロの歌手・声優です。(ProfileVocal
主な出演作:ディズニー「魔法にかけられて」ジゼル(主役)・「アナと雪の女王」
「美女と野獣2017」・「名探偵コナン~戦慄の楽譜~」千草らら役歌唱 など。
メインのSNSはFacebookで、twitterに転送してます。
Instagram(親バカ写真)もちょこっとやってます。
Welcome Symphony
----------------------------------------------
Welcome Symphony」 CD発売開始!(販売サイト)
アナ雪クリストフ役・原慎一郎さんとの命の誕生の奇跡を
テーマにしたデュエット曲「life」は必聴です!
視聴だけでもぜひお願いします♪ →【YouTube

スポンサーリンク

◆Facebookでおうかがい◆

ググってもわかんないことや、相談事があるといつもFacebookで質問します。
で、いつも古田社長が答えてくれるわけですがw

古田さんてこのブログの中のヒト。↓

プラグインプレーヤーのおすすめ教えてクレクレの今回もそうでした。

本当にいつもありがとうございます。
困ったときの救世主です。
そもそもの出会いも、たしか自炊系でよくわかんないことをこっちが質問したのが最初だったような。
たぶん5年くらい前。

さて。

今回なぜブログに音源公開ページを作ろうとしたかというと。
もともとはワタシのサイト内にあったのです、そういう目的のページが。
なんだけど、サイトがレスポンシブになってないのですよ。
レスポンシブというのはアクセスした端末ごとに適切なサイズにページ全体や文字の大きさやレイアウトを自動で変えてくれる機能。

私のそのページはパソコン用としか作ってませんでした。
スマホ普及の前に制作したページだったから。
つまりスマホ表示だと超ちっさくなって不適切なのね。
しかもプレーヤーの表示がIEだと壮絶にダサイ。
もう画像は貼らない。見たければIEからココにアクセスして。

見た目がすっごいイヤだったんだけど、いい方法がわからなくて何年も放置状態でした。
しかし、ちょっと前にこのブログをリニューアルしてすごく管理しやすくなって、今ならブログ内にもっと簡単にレスポンシブのプレーヤーを置けるのではないかと思いまして。

そんで重い腰をあげた次第でございます。

◆プラグインさがしの旅◆

そもそもWordPress(このブログ表示をつかさどるのシステム)は、最近のバージョンではプラグインを導入せずともオーディオプレーヤーが含まれていて、音源ファイルへのリンクをはると勝手にプレーヤーが記事に現れます。

機能的には全然それで充分だったんだけど、やっぱりデザインがダサイのよ。
iPhoneからの表示も相当アレだったんだけど、パソコン表示もダサイ。(上の記事参照)

で、せっかく新しくページ作るのにこれはないわーとか思って。
もうちょっとスマートでゴツなくって、見た目がゴチャゴチャしてなくって、機能に過不足ないやつないかしらと思ってたくさんググってみました。

参考にしたのはこんなサイトたち。

この他にもプレーヤープラグインの紹介ページを見てまわって、いいなぁと思ったのを見つけました!
それが[WordPress HTML5 Audio Player]でした。

公式サイト

ユーザーの紹介記事

すごく良い!
わたしのイメージにぴったりで理想的。
もうこれにする、決まり!!

と思ったらなんと無料で使えるのは3曲分のみ。
まっじかー。ないわー。
30曲以上使うわー。

しかも無制限で使おうと思うと149ドルもする!
ぎゃー。高いよぅ。

ということで古田社長にヘルプを出したわけです。
(私がFacebookで質問するということは、イコール古田社長に聞くということなのだ)

◆MP3-jPlayer◆

で。最初にリンクしたFacebookの投稿で、古田社長が実際にご自分のブログ記事で使っているのはコレだよ、と教えてくれたのがMP3-jPlayerです。
その記事がこちら。

つうか、この記事の内容がマニアックすぎて惹くわ~。
(引くわーじゃなくて惹くわー)
余計なもの読ませやがって!マイク買いたくなるじゃんかよ。

ということでMP3-jPlayerをまるっとマネッコして導入してみました。
曲のタイトルのテキストの上でプレーヤーが動作するってのがいいよね。
タイトルとプレーヤーの2段にならず、高さの節約になってすんごいスッキリ。
プレーヤーとして動作してないときは再生ボタンとタイトルだけの表示になって本当にスッキリ。
しかも同じページ内に複数配置してて、再生中に別の音源を再生すると、最初のは自動で止まるのもすごくスッキリ。
同時に別の音源が再生されるとイラっと来るよね~。

いざ、導入。

プラグイン公式サイトからダウンロードして解凍して使うのでもいいんだけど。
簡単なのはWordPressの管理ページ内でインストールしちゃうこと。
その方がローカルにゴミファイルが残らなくて良い良い。

①左側のメニューから[プラグイン]項目
②右のメイン画面から[新規追加]
③検索窓で[MP3-jPlayer]を入力&検索
④ヒットしたら[今すぐインストール]

で、インストールすると管理画面の左のメニュー項目に[MP3-jPlayer]が追加されますので、そこからプレーヤーの見た目や機能などの設定ができます。
私の場合は設定変更したところはわずかです。

・[Players]タブで[Button Players(single-file)]の[FontSize]を18から16に変更。
・同じ場所で[Colour Scheme]で色を黒から緑にしました。

mp3-jplayer-change

この2箇所だけ。
他にもこの画面で細かい設定がいろいろできるようなのですが、私のイメージではほぼデフォルトの状態で大丈夫だったので、他の設定はよくわからんとです。

あとは記事に書くときの音源ファイルへのリンクを張るショートコードの書き方でいろいろな設定ができます。
詳しくはここ↓にサンプルがたくさんあるので参考にしてください。

今回はレスポンシブのためにページを作っているので、パソコンとiPhoneの両方で美しく見えるレイアウトにしたいというのが譲れないポイントです。
(Androidはチェックしてないわ~。そのうちするわ~)
実験でアップしながら最適な文字数などを探っていきました。

結果、タイトル&全角スペースを合計15文字にし、そのあとにCaptionで音源の長さ(2:45とか)を入れるということになりました。
これでプレーヤーが起動したときにiPhone7でちょうど横幅がぴったりになります。
(iPhone5Sだとちょっぴりはみ出しちゃうのだけど、わずかなのと動作に支障がないので良しとしました。)

私がこのページで使っているショートコードはこんな感じ。

曲の長さの分数をタイトル内に含ませず、Captionで表示させたのはそうするとフォントサイズが小さくなるからです。
このプラグインには全体の長さを表示させるオプションはどうもない模様。
それだけはちょっと不便ね。

実際のプレーヤー動作はこうなります。
異なる端末やブラウザで見てみると、どういう動作をするかがよくわかるかと思います。
ぜひ↓再生ボタンの▶を押してみてください。

—————————————————————

      Desperado          - 3:42

—————————————————————

パソコンでのスクショ
s-ie

このスクショはWindows7のIEですが、Chromeも見た目はほぼ同じです。

こちらはiPhone
mp3-jplayer-iphone7

iPhone7です。再生させるとプレーヤーが横幅ぴったりになります。
captionの全体分数の横に、現在再生中の分数が出るようになるので、すごくわかりやすい。
プレーヤーの中にタイトルも見えるので目が疲れない。
既出しましたが、 「タイトル名+全角スペース」で合計15文字でこのレイアウトになります。
たまにタイトルが長い曲だとこの制限を超えてしまうことがあるのですが、まあそれはしょうがないかなと思います。
スマホのページの横幅をタイトルの長さが超えると、その曲を聴いているときだけページの表示がごく若干崩れますが、再生をやめるとぴしっと戻るのはなかなかの利点です。

マジ最高。

このプラグインにはPlaylist Player機能もあるので、数曲をまとめてアルバムとして発表したいときなどに一つのプレーヤー内で曲を切り替えながら聴くような表示にもできます。
いつかアルバムをリリースして試聴ページとか作ったらそれもやりたーい。

◆注意事項とお礼◆

音源データのアップロードはWordPress内の[メディアライブラリ]から新規追加で音源データをドラッグすればできるのですが、その方法だとファイルサイズに上限があるらしく、POPSのフルコーラスみたいな長さの曲はアップできませんでした。
(追記:これはWordPressの仕様じゃなくてレンタルサーバーごとの設定らしいので、変更可能な場合もあるようです。めんどくさいから私はそのまま。)

ですが、自分のサーバー内で音源ファイルはまとまった場所にあった方がいいように思うので、FTPクライアントで[music]などの任意の名前で新規フォルダを作り、そこにまとめてアップして、ショートコードに音源のアドレスを入れるのが一番いいと思います。
FTPのアプリ使うので、パッと見はめんどくさいのですが、ファイル管理がしやすくて結局はこの方法が一番楽だと思いますよ。

最後に。

こういうことがたった1日頑張ればできちゃうようになったのは、このブログのテーマ「Simplicity」のおかげです。
作者のわいひらさん、本当に本当にありがとうございます。

もひとつ最後に。
古田社長の動画プレーヤーiPhoneアプリだいぶ使いやすいのでぜひ。
わたしめっちゃ使ってる。
しかも不具合があったら必ず修正してくれる。すばらすぃ。

おやゆびでお 片手操作に特化した動画プレーヤー (¥120)
App
販売元: KAZUYOSHI FURUTA – KAZUYOSHI FURUTA
☆価格は記事執筆当時のものです。

さらに最後に。
そういうわけでわたしが愛をこめて歌った音源のページ、ぜひ見てね~。タダだし!
もし気に入ったらCD買ってね~。それは有料。

スポンサーリンク


お読みいただきありがとうございます。
コメント書込み・Tweet・はてブなどしていただくと励みになります。
プライベートな短い日記・つぶやきはfacebookで書いてます。

フォローする

★現在の人気記事はこちらです★