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

f:id:MahiroN:20200505224916p:plain:w400

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

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

こんな感じになります。

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

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

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

の２パターンになりますが、大概のブログではファイルを置くことなどできないので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」に変更してください。
そうすることで音が鳴るようになります。

幻魔ナイトブログ