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編集で以下(赤字部)を貼り付け。このとき、dl=1の部分は上の操作からそのまま貼り付けた時点ではdl=0になっているが、dl=1に書き換える必要がある。

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

 →この方法だと一部のスマホからアクセスした際などに読み込めないことがあることが判明したので、より確実な以下の方法を推奨します。

 

手順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」です。

 

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