2012年に「Jimdoでの音声公開は、DropBoxと合わせ技で簡単♪」という記事で、オンラインのMP3プレーヤーを使った音声公開の方法をご紹介しました。
3年前ご紹介したMP3プレーヤーは、Flash（という技術）を使っているんですが、スマホ対応が限られているため、スマホでは見れない、なんてことがあったりします。
そこで3年経ってJimdoの環境も変わってきまして、今回は、スマホでも利用できる方法をご紹介してみたいと思います。
まず音声ファイルを用意。mp3がおすすめ。
音声データは「.mp3」とか「.wav」とか「.aac」などいろいろなファイル形式があります。どれでもいいのですが、インターネット閲覧環境との相性があり、mp3が比較的対応しているブラウザが多いようです。用意できたらmp3がおすすめです。
↓なんと、こんな素敵なウェブサイトみつけました。
音声ファイルを、mp3とかwavに画面で変換できちゃう♪素晴らしい。
音声データ保存する場所は、今回もDropboxで紹介します。
音声データを用意できたら、Dropboxに保存します。
もちろん、ご自身で他にサーバをもっていたり、他のストレージサービスを利用している人はそちらでも大丈夫。
↓まずはここの「Dropboxにファイルを追加、またはアップロードするには」をチェック。
参考･･･Dropbox ヘルプ
ここでは、細かいDropboxの使いかたは割愛します。
「共有」からファイルが保存されてるURLが表示されますよ。
例）https://www.dropbox.com/*********.mp3?dl=0 ←こんな感じのファイル名です。
あとは、HTMLソースを書くだけ！ 簡単♪
これからご案内するHTMLソースをウィジットに貼り付けます。
ウィジェットは、「コンテンツ追加」にに項目がありますよ。
↓下記のHTMLソースをコピー＆ペースト
赤文字「sample.mp3」の部分をご自身のファイル名に変更しましょう。
<audio src="***ファイル保存場所***/sample.mp3" controls>
<p>ご覧のブラウザではこの音声を再生できません。</p>
</audio>
【重要】Dropbox使う人は、ちょこっと書きかえてください！
https://www.dropbox.com/*********.mp3?dl=0 ←０を１に変更してください。
例）
<audio src="https://www.dropbox.com/hogehoge.mp3?dl=1" controls>
<p>ご覧のブラウザではこの音声を再生できません。</p>
</audio>
【おまけ】<p>ご覧のブラウザではこの音声を再生できません。</p> について
再生できないブラウザを使っている閲覧者へのメッセージです。削除しても音声には関係ありません。文字を変更してもOKです。
完成サンプルはこちら！
おまけ：音声の無料素材、いろいろあります！
無料の音声素材を配布しているところ、いくつかご紹介します。
▼フリーBGM
完成サンプルでも使っているサイト。かなり素敵です♪
▼Sound Lavel
格好いい小洒落たBGMも！
http://www.snd-jpn.net/free_sound/
▼ 効果音ラボ
学校のチャイムとかクイズ正解の効果音など馴染みのある音声も！
▼ くらげ工匠
ボタンの音などが細かくあるある。
http://www.kurage-kosho.info/index.html
以上、ご参考まで！