Jimdoで音声の公開もできます、パート2。

素材:いらすとや
素材:いらすとや

2012年に「Jimdoでの音声公開は、DropBoxと合わせ技で簡単♪」という記事で、オンラインのMP3プレーヤーを使った音声公開の方法をご紹介しました。

 

3年前ご紹介したMP3プレーヤーは、Flash(という技術)を使っているんですが、スマホ対応が限られているため、スマホでは見れない、なんてことがあったりします。

 

そこで3年経ってJimdoの環境も変わってきまして、今回は、スマホでも利用できる方法をご紹介してみたいと思います。


まず音声ファイルを用意。mp3がおすすめ。

音声データは「.mp3」とか「.wav」とか「.aac」などいろいろなファイル形式があります。どれでもいいのですが、インターネット閲覧環境との相性があり、mp3が比較的対応しているブラウザが多いようです。用意できたらmp3がおすすめです。

 

↓なんと、こんな素敵なウェブサイトみつけました。

音声ファイルを、mp3とかwavに画面で変化できちゃう♪素晴らしい。

http://media.io/

 

音声データ保存する場所は、今回もDropboxで紹介します。

音声データを用意できたら、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 ←0を1に変更してください。

例)
<audio src="https://www.dropbox.com/hogehoge.mp3?dl=1" controls>
<p>ご覧のブラウザではこの音声を再生できません。</p>
</audio>

【おまけ】<p>ご覧のブラウザではこの音声を再生できません。</p> について

再生できないブラウザを使っている閲覧者へのメッセージです。削除しても音声には関係ありません。文字を変更してもOKです。

 

完成サンプルはこちら!

完成サンプルの音源は、フリーBGMさんが無料配布しているTime Is Mine (Freestyle Rap Beat)を使用しました。


おまけ:音声の無料素材、いろいろあります!

無料の音声素材を配布しているところ、いくつかご紹介します。

 

▼フリーBGM

完成サンプルでも使っているサイト。かなり素敵です♪

http://dova-s.jp/

 

▼Sound Lavel
格好いい小洒落たBGMも!

http://www.snd-jpn.net/free_sound/

 

▼ 効果音ラボ

学校のチャイムとかクイズ正解の効果音など馴染みのある音声も!

http://soundeffect-lab.info/

 

▼ くらげ工匠

ボタンの音などが細かくあるある。

http://www.kurage-kosho.info/index.html


以上、ご参考まで!