google bloggerにmp3を貼りつける

thumb

※google bloggerでブログを書いていた時期の記事です。
2011年3月30日追記:SoundCloudを使った方法を紹介しました。

前回のエントリで、「ブログに録音ファイルを貼る」という長年の夢をあっさり実現してしまいました。

google bloggerにはデフォルトで音声ファイルのアップロード機能が無く(他のブログサービスはできるんかな)、その設置方法で少々てこずりました。
調べてみると、さすが世の中は広く、どうやら同様の悩みをお持ちの方もいらっしゃるようでした。この私もちょっとは社会貢献する年頃かなと思い立ち、その方法をメモする次第です。

手順

ということで、google blogger にmp3を貼りつける手順です。
大体の流れはこんな感じになるかと思います。

  1. mp3をどこかにアップする
  2. プレイヤーを用意する
  3. ブログにタグを貼りつける

リストにするのがバカらしくなるくらい単純です。

手順1. mp3をどこかにアップする

実はここでちょっとした落とし穴があります。
画像やら動画ファイルのアップロードサービスは有名なのがごろごろあるのに、音声ファイルのアップロードサービスが壊滅的にありません。というか自分は発見できませんでした。
(ちなみにmyspaceはほとんど使ったことが無く、ファイル単体のURL取得方法が分からなかったためボツ)

なので、サーバーを調達していない自分みたいな人間は、いきなりここで躓きます。
一応自分サイト用に某無料サーバーを借りているのですが、どうやらファイルのみの参照はパーミッション上禁止されているらしく、うまくいきませんでした。広告を表示しようがないため、まぁ当然でしょう。

調べるとmediamasterというmp3アゲまくりOKなすごいサービスがあるとのことですが、どうやら現在は休止状態のようで、大いに落胆しました。

なので、外から参照可能なファイル置き場が必要となります。
3分くらいかけて調べてみるとgooogle sitesという、またもやgoogle社のサービスが使えることが分かりました。本来は「htmlとかよう分からん!」みたいなユーザーのためにサイト作成を支援する(ホームページビルダーみたいもん?)ツールっぽいですが、ここを無理やりファイル置き場として使うことにします。男にはこれくらいのアグレッシブさが必要です。

どこにファイルを置こうが勝手ですが、自分は「ホーム」直下に超適当なディレクトリ(たとえば「sound」)でも作って、そこに「ファイルを追加」でアップロードします。URLは

http://sites.google.com/site/(ユーザーID)/home/(ディレクトリ名)/(ファイル名)

となります。まずこれを取得しておきます。

これで1.クリアです。というか、これがクリアできればもう99.8%クリアです。

手順2. プレイヤーを用意する

これもあんまり調査してないので詳しいことは言えませんが、たまたま見つかったdewplayerというのがシンプルでよさげだったので、即採用することにしました。


いろんなスキンがあります。自分は「classic」を採用しました。
>> dewplayer(何語やねん?)

他のプレイヤーを知らないのですが、これは再生用のswfファイルを用意する必要があります。↑のサイトからプレイヤーをダウンロードして下さい(それらしいボタンがあります)。

そして、これをどこかにアップロードしないといけません。
ここで先述のgoogle sitesが再び猛威を振います。
つまりここにアップロードすればよいのです。

ということで、同じ場所にアップロード。
プレイヤーのURLも取得しておきます。

以上で、
①公開したいmp3ファイルのURL
②再生用プレイヤーのURL
が取得できたということで、準備は完了です。一瞬です。

手順3. ブログにタグを貼りつける

さっき紹介したサイトの下のほうで取得できるdewplayerのデフォルトのコードに、アップしたてほやほやの音声ファイルのURLと、プレイヤーのURLを記述します。

▼before(赤い部分がデフォルト設定です)

<object type=”application/x-shockwave-flash” data=”dewplayer.swf” width=”200″ height=”20″ id=”dewplayer” name=”dewplayer”>
<param name=”movie” value=”dewplayer.swf?mp3=test.mp3” />
<param name=”flashvars” value=”mp3=test.mp3” />
</object>

▼after

<object type=”application/x-shockwave-flash” data=”②再生用プレイヤーのURL” height=”20″ width=”200″>
<param name=”movie” value=”②再生用プレイヤーのURL?mp3=①音声ファイルのURL“>
<param name=”flashvars” value=”mp3=①音声ファイルのURL“>
</object>

ハイこれで出来上がり。
あとはブログのお好きなところに貼ればOKアイラブユー。

要するにこうなります(コピペ用)。

<object type="application/x-shockwave-flash" data="/xxxx/dewplayer.swf" height="20" width="200">
<param name="movie" value="/xxxx/dewplayer.swf?mp3=/xxxx/xxxx.mp3">
<param name="flashvars" value="mp3=/xxxx/xxxx.mp3">
</object>

調子に乗って、今度はベースのプリアンプ弾き比べの録音でもアップします。
需要はかなりあるはず。たぶん。きっと。

コメント

7件のコメントがあります

  1. nokia より:

    ファイル単体のURL取得方法がわかりません。
    それ専用のページをつくっても、urlの最後が.mp3で終らないのです。
    どうかご教授お願いします。

  2. imasashi より:

    コメントありがとうございます。
    mp3のファイルURLですが、取得と大袈裟に書いてしまいましたが、特別に何か手段があるわけではありません。本文中にある通り
    http://sites.google.com/site/(ユーザーID)/home/(ディレクトリ名)/(ファイル名)
    のルールに従ってタグに入力すれば事足りるかと思います。

    参考までに、自分のgoogle blogger時代の参照パスはこんな感じになります。
    http://sites.google.com/site/imasashimahashi/home/sound/100307_ac_chord.mp3

    お答えになっておりますでしょうか。

  3. nokia より:

    できました!!本当にありがとうございます。

  4. あおみどり より:

    こんにちは!初めまして!!
    こちらのサイトをみて、やっとのことで、埋め込み音声を作ることが出来、
    嬉しくてコメントした次第です。ありがとうございました!!
    Googleブロガーも、サイトも、ちょっとアレな感じが否めないですが
    カスタマイズ性はなかなかのものですね(しかし使い辛いですが)
    他にもいろいろな記事があり、いろいろと為になるところが多いので
    私のブログにリンクしても良いでしょうか?
    音声の埋め込みというものを初めてして、感動中です。
    動画埋め込みしかできないと思っていたので!!!
    ではでは。

  5. imasashi より:

    > nokiaさん
    解決できたようで、よかったです。

    > あおみどりさん
    拙い説明で恐縮ですが、お役に立てたようで嬉しいです。
    今はbloggerやめてしまったので、それに関する記事はもう出ないと思いますが…
    リンク全然結構です!宜しくお願い致します。

  6. あおみどり より:

    こんばんは!早速リンクさせて頂きました!
    プレイヤー込みで音声upすることができて本当に感動しています(何度も同じこと言ってますねスイマセン)
    しかし、Googleのsiteサービス、初めて使いましたが、なんだかとても。。。異様に分かり辛いですね。。。
    こちらのブログにて説明を見ていなければ、全然手を付けれそうにありませんでした。
    ありがとうございました!ではでは。

  7. […] 以前、dew playerを使ってgoogle bloggerにmp3プレイヤーを貼りつける方法を紹介しました。 が、知らない間にSoundCloudというmp3共有サービスが出来ていたようで、このサービス使った方が全然 […]

コメントをどうぞ(承認後に反映されます)




コメント

世の反応