DTMスキルアップメモ - frenchbread

見習いボカロPがそこそこのボカロPになるまで、が描かれていくはずのブログ。

ブログにmp3等の音声ファイルを簡単に埋め込む方法

はてなブログ上に、SoundCloudなどを経由せずにmp3ファイルを埋め込みできるようにするやり方です。スマホも対応可能です。

おそらく他のブログサービスでも同じ方法で行けると思います。

 

①audio.jsを使う

見栄えも良く、HTML5非対応のブラウザでも再生可能なプレイヤーです。

audio.js

 

欠点を挙げるとすれば、audio.jsを配置するサーバーが必要ということ。

レンタルサーバーを使うのに困らない程度の知識があれば何ということはないのですが、この記事ではもっとお手軽な方法を紹介します。

 

②Dropbox上のファイルを直接再生する

HTML5のaudioタグという標準機能を使って再生します。

mp3の置き場だけ必要となるので、 Dropboxを使います。

Dropboxは2017年現在、利用者が非常に多いサービスだと思いますし、もし利用していなくても、ネット上で何らか活動するなら活用する場面は多いので、アカウント取得しておくと良いと思います。

 

まず見た目としてはこんな感じになります。標準機能そのまんまなだけに無骨な感じですね。

 

やり方です。

 

手順1)Dropboxにmp3ファイルを放り込んで、共有>リンクをコピーでURLを取得する。

f:id:naoki-horiuchi:20170604174339p:plain

 

 

手順2)HTML編集で、プレイヤーを埋め込む場所に以下(赤字部)を貼り付け。ただし「www.dropbox.com」の部分を「dl.dropboxusercontent.com」に置き換え「dl=0」は削除する。

<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls></audio>

たとえば先にサンプルとして置いたファイルは、URL(赤字部分)が「https://dl.dropboxusercontent.com/s/7r48xi2pi1ck2vw/LoveLetter.mp3」です。

  

2019.1.23追記

ブログサービスの種類によっては(livedoorブログなど)上記のHTMLの「contorls」部分がうまく機能せず、埋め込みに失敗するようです。

以下のように「controls="controls"」と記述することでうまく行ったケースも確認できましたので、一度お試しください。(技術的に詳しいことがわからず、曖昧な説明で申し訳ありません。)

<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls="controls"> </audio>

 

もし、この方法でうまくいかなかったという方がいらっしゃいましたら、コメント欄などに記入いただけると助かります。