ボイスサンプルを公開しました! Jimdoに音声プレイヤーを設置する方法もご紹介!
2016年06月21日

ボイスサンプルを公開しました! Jimdoに音声プレイヤーを設置する方法もご紹介!

遅くなりましたが、19日にボイスサンプルを公開しました!

http://www.rei-yumesaki.net/voice/sample/

自分では、自分の声を「情けない声」だと思っていて、練習中も録音中も編集中も終始恥ずかしかったですが、1つでも自力で稼ぐ手段を増やしたかったので(直球)腹を括りました!

今はAudiostockの直接依頼機能からしか注文できませんが、これから萌えボイスやランサーズに登録してきます。
追記:ランサーズは文字数によって料金を変えるといった器用なことはできなさそうなのでやめました。


Jimdoに音声プレイヤーを設置する方法


Jimdoって、音声ファイルをアップロードして、音声プレイヤーを表示する機能がないんですよね。有料版のPro・Businessにしてもです。そういう機能つけてくださいって要望は出しているのですが……。

しかし、最近ではHTML5の<audio>タグを使用すれば、ブラウザ側で音声プレイヤーを表示してくれるようになったので、外部ファイルを呼び出せばJimdoでも音声プレイヤーを表示できるのです。

Jimdoにはファイルサーバー機能がなく、また多くのブログサービス等では外部サイトからのファイルの呼び出しが禁止されています。そこで、Dropboxを使用します

Dropboxとは
友達紹介ボーナスで500MB増量してDropboxに登録する
※こちらからDropboxに登録すると、友達紹介ボーナスで保存容量が500MB追加されます。(もしこのリンクを踏んだ時にそのサービスが終了していたら、申し訳ありませんが普通に登録してください)

Dropboxに「Public」というフォルダを作ります。
そこに音声ファイルを放り込みます。
Publicの中にさらにフォルダを作ってもOKです。

DropboxのWEBページに行き、ファイルの行の「共有」ボタンを押して、URLを取得します。

例えば、「Public」フォルダの中の「Voice」フォルダの中の「ファイル名.mp3」は次のようなURLになります。
https://dl.dropboxusercontent.com/u/ユーザーID/Voice/ファイル名.mp3

「Voice」フォルダの外に出し、「Public」フォルダ直下にすればこうなります。
https://dl.dropboxusercontent.com/u/ユーザーID/ファイル名.mp3

つまり、一度ユーザーIDさえ分かってしまえば、「Public」フォルダ内のファイルについては1つ1つURLを取得しなくてもURLが分かるということですね。

「Public」フォルダ以外のフォルダのファイルに共有リンクを発行することもできるのですが、それはURLを知っている人だけがアクセスできるランダムURLであり、いちいちURLを発行しなければならないため、大量のファイルを公開したい場合には面倒くさくておすすめできません。

※2017.03.02 追記

Publicフォルダは2017.03.15に廃止されることになりましたので、少し手間がかかりますが、一つずつURLを発行してください。DropboxのWEBページに行かなくても、PC上のファイルを右クリックして「Dropboxリンクをコピー」を選択すればOKです。

注意点として、発行されるURLは
https://www.dropbox.com/s/○○
になっていますが、直リンク状態にするには、前半部分を差し替えて
https://dl.dropboxusercontent.com/u/○○
にする必要があります。


Jimdoに行って「ウィジェット/HTML」を設置します。
HTML記入枠に次のように入力します。
<audio src="https://dl.dropboxusercontent.com/u/ユーザーID/(フォルダ名/)ファイル名.mp3?dl=1" controls=""></audio>

これで設置できました!
なお、「?dl=1」がないと動作しません。「?dl=0」ではだめです。

音声プレイヤーの幅を変更することも可能です。
Jimdoの「設定」から「ヘッダー部分を編集」をクリックし、次のCSSを書き加えます。
<style type="text/css">
audio { width: ○○px; display: block; margin:0px; }
</style>


参考:
Jimdoで音声の公開もできます、パート2。 - ウェブサイト制作ツール紹介 Jimdo diy
埋め込みオーディオ・プレーヤーの変更 | Goldmine1969.com


こうしてできたのが、Re:I本館のボイスサンプルのページというわけです! どうぞご参考に!
スポンサーリンク
posted by Rei Yumesaki at 00:20 | PC関連 おすすめツール紹介 | 更新情報をチェックする
ボイスサンプルを公開しました! Jimdoに音声プレイヤーを設置する方法もご紹介!
先月の人気記事 TOP5