DTMスキルアップメモ - frenchbread

アマチュアDTMerで、ボカロ曲や女性ボーカル曲を作る修行をしながら学んだノウハウや成果を書いていきます。目指せ、脱初心者。

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

 はてなブログ上に、SoundCloudなどを経由せずにmp3ファイルを埋め込みできるようしたいと思って、ちょっと試行錯誤した結果やり方がわかったのでその備忘。(おそらく他のブログサービスでも同じ方法で行けると思います。)

 

 少し前の時代のネット上の記事だと、audio.jsをダウンロードして自分のサーバーにアップして・・などと説明がされていたりするが、HTML5が標準的になってきた現在、どうやらとても簡単に実現できるようである。iPhoneからのアクセスもできる。

 

手順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="controls"></audio>

 

結果、こんな感じになります。

 

なお、DropboxじゃなくてGoogleドライブでも同じ要領で行ける模様。dl=1への修正とかも不要なので、もっと簡単かも。