2016年11月20日日曜日

Bloggerに音楽ファイルを貼り付ける方法を考える

音楽ファイルをBloggerに貼り付ける方法を変更したので、そのメモ書きです。

Blogger単体では無理

Bloggerでは画像については一括で管理して記事中に貼り付けることができます。でも、MP3のような音楽ファイルについては同様な機能が無くて、外部のサービスを使って参照するようにしないとダメ。これまでは『TmBox』に音楽を投稿して、そのリンクをブログ記事に貼り付けるようにしてました。

ところが、最近になって『TmBox』は仕様変更をしていたようで、自分のブログ記事を眺めてると音楽ファイルのリンクが途切れていたり、再生プレイヤーが非表示なってしまっていたり、とレイアウトが崩壊しているではないですか! どうやら外部サイトへの貼り付け機能も削除されてしまったみたいです。これは困った。。。実験的に作ってみた音源を貼り付けるのに便利だったのになぁ。

外部のサービスが仕様変更するたびにレイアウトに気を配るのはメンドウです。でも、わざわざ他サイトに移動してもらって聞いてもらうより、ブログ記事内で聞けるほうが便利だと思うので諦めたくもない。自分でコントロールできるようにするには、自サーバーを用意して、そのサーバーに音楽ファイルを置き、プレイヤーをブログに設置する、というのが良さそうです。最近だとHTML5のaudioタグを使うともっとラクチンになりそう。

DropBoxの出番

自サーバーを用意するのは大変なので、DropBoxの共有機能で代用してみることにします。次の手順でプレイヤーを設置できます。

  1. DropBoxに音楽ファイルを置く
  2. 音楽ファイルを共有設定オンにしてリンクを取得する
  3. ブログ記事内でプレイヤーを設置したい場所にaudioタグを置く
  4. audioタグの属性srcに音楽ファイルのリンクを入れる
  5. 音楽ファイルのリンクの末尾「?dl=0」を「?dl=1」に変更する

この作業を繰り返して全ファイルを移しました。思ってたよりファイル数が少なくて良かった。。。こんなかんじになりました。

おまけ

全てのブラウザでHTML5の対応がされているわけではないから、JavaScriptで場合分けする必要があるかもですね。IEに関してはバージョン判定するようにしてはいるけれど、それ以外は後々かな。