アメブロで音声を再生(MP player使用)

2013.09.10 記

ameba

アメブロにはもともと音声を再生できる仕様がありません。長年運営しているブログを変更する訳にはいかないクライアントさんの要望で調べてみました。
少しややこしいですがちゃんと再生出来るようになりました。
動作確認済みブラウザ(Mozilla Firefox, Google Chrome, Internet Explorer)

MP3音声ファイルをサーバー上に設置する

1. ホームページなどを持っていればFTPソフトなどで「サーバー」に音声ファイル(mp3)を置く、又は「Dropbox」に音声ファイル(.mp3)を置く。

Dropboxのサイトへ移動します

音声ファイルは「Dropbox」⇒「Public」フォルダに入れ、ファイルを右クリックで「公開リンクをコピー」を選択し、URLをコピーしてください。
「Public」フォルダ無かったり、フォルダがあっても「公開リンクをコピー」を選択できない方は「公開リンクをコピー」を選択できないはこちらをご覧ください。
「公開リンクをコピー」を選択できない場合

Dropboxとは‥様々なデータやファイルをインターネット(クラウド)上に保存できるオンラインストレージサービス。(無料で2GBから使える)


2. その音声ファイルのURLをメモ帳等に保存しておく。


MP3プレーヤーを動かすための下準備

アメブロでは埋込み式MP3プレイヤー用のタグが、禁止タグにされていて、取得したタグをそのままエディタに貼り付けても、記事として公開することができません。下記のタグをフリープラグインに記述します。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</script>

<script src="http://hana.poche.jp/wazameba/js/waza11.js"></script>
<script>
$(function(){prohibitedTagsUse();});
</script>

記述方法


埋込み式MP3プレーヤーのコードを取得する

MP3音声ファイのサーバ上へ設置が完了したら、プレーヤーのコードを取得する◆MP3Player◆


記事の作成

. エディタのモードの変更

. タグの加工


「Public」フォルダの不具合について

2012年8月1日以降の新規アカウントについてはデフォルトのPublicフォルダが作成されず、ファイルやフォルダの共有には、かわりに新機能の共有リンク機能を使うことになったそうです。

Dropboxが最新バージョン2.0.26 (2013.09.16現在)だと「Public」フォルダ無かったり、フォルダがあっても「公開リンクをコピー」を選択できない状態です。
共有リンク機能で得たURLではプレーヤーは表示されますが再生することは出来ません。

解決方法

以下のURLにアクセス⇒「EnablePublicFolder」をクリックするとPublicフォルダが復活します。
Publicフォルダがあるのにアクセスすると「Publicフォルダを既にお持ちです」と表示が出ます。



ご意見をお聞かせください。


A:6998 T:3 Y:8