はてなブログで音声ファイルを再生する方法

はてなブログの編集画面ではyoutubeやニコ動の埋め込みに関してはショートカットがあるので簡単ですが、 mp3などの音声ファイルを置くための機能はありません。

そこで今回はGoogleDriveに置いた音声ファイルをはてなブログ上で再生できるようにする例を紹介いたします。

こんな感じになります。

はてなブログで音声ファイルを鳴らす方法

音声を再生するためのhtmlタグを貼を貼ることで再生できるようになります。Markdownモードでもそのまま貼ることができました。
以下のようなタグを貼りますす。

 <audio src="音声ファイルの場所" controls></audio>

上記の"音声ファイルの場所"についてですが、

• サーバー内の音声ファイルのパス(サーバーにファイルを置くことができる場合)
• Dropboxやgoogle driveなどのクラウドストレージに置いた音声ファイルの共有リンク

の２パターンになりますが、大概のブログではファイルを置くことなどできないのでdropboxなどに置いた音声ファイルの共有リンクを貼ることで音声を鳴らすことになります。

GoogleDriveので共有リンクを取得する方法については
Google ドライブのファイルを共有する - パソコン - Google ドライブ ヘルプ
を参照してください

ただしGoogle Driveの場合は注意が必要で、共有リンク可能なリンクをそのまま貼ったのでは音はなりません。
以下のように変える必要があります。

（前）
<audio src="https://drive.google.com/open?id=〜" controls></audio>
（後） 
<audio src="https://drive.google.com/uc?id=〜" controls></audio>

リンク内の「open」を「uc」に変更してください。
そうすることで音が鳴るようになります。

参考サイト

• https://www.engineer-log.com/entry/2019/10/08/sound-mp3
• https://www.terrax.site/entry/2018/09/09/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E9%9F%B3%E6%A5%BD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%B2%BC%E3%82%8B%E6%96%B9%E6%B3%95
• https://hyper-robo.hatenablog.com/entry/onsei

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)