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

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

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

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

今はAudiostockの直接依頼機能からしか注文できませんが、これから萌えボイスやランサーズに登録してきます。

追記１：ランサーズは文字数によって料金を変えるといった器用なことはできなさそうなのでやめました。

追記２：2017年7月現在はクラウドワークスを中心に受付をしています。
→クラウドワークスで声のお仕事の受付を開始しました！　ランサーズとの決定的な違いとは？

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

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

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

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

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


Dropboxに「Public」というフォルダを作ります。（※Publicフォルダは2017.03.15に廃止されることになりました。詳細と代替案は後述しています。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」フォルダ内のファイルについては１つ１つURLを取得しなくてもURLが分かるということですね。

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



Jimdoに行って「ウィジェット/HTML」を設置します。
HTML記入枠に次のように入力します。

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

音声プレイヤーの幅を変更することも可能です。
Jimdoの「設定」から「ヘッダー部分を編集」をクリックし、次のCSSを書き加えます。


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


こうしてできたのが、Re:I本館のボイスサンプルのページというわけです！　どうぞご参考に！