はじめに
ブログに音声（音楽）を埋め込みたいってことありませんか？
音声ファイルなので「ファイル.mp3」だったり「ファイル名.wav」だったりすると思いますが、
Googleドライブへアップロードしたファイルをブログへ埋め込みたいと思います。
本日はファイルのアップロードから共有設定、リンクの埋め込みまでご紹介するよ！
先日の記事で、Googleドライブへ保存した音声ファイルをはてなブログへ掲載したので、その時の方法を備忘録として残しておきます。
Googleドライブを利用した埋め込み方法となりますが、最近Googleドライブの共有リンクのフォーマットが変わったようで、以前のやり方では埋め込みができませんでした。
そこでアップロードから共有までの手順を綴ります。
流れは下記となります。
音声ファイルをクラウドへアップロード
最初に音声ファイルをGoogleドライブへアップロードします。
サインインはここからどうぞ
Google Drive: Sign-in
１．新規ボタンをクリックします
２．ファイルのアップロードをクリックします。(複数ある場合はフォルダごとも可)
３．音声ファイルがアップロードされたら、ファイルを右クリックして、共有をクリック
４．「一般的なアクセス」を「リンクを知っている全員」へ変更し、リンクのコピーをクリック
メモ：右上の歯車マークを押すと下記の表示がでますが、チェックはこのようにしておけば良いです。
ちなみに
「閲覧者と閲覧者（コメント可）に、ダウンロード、印刷、コピーの項目を表示する」のチェックを外すとブログ上で再生できなくなります。
HTMLで記述する。
リンクのコピーを押すとURLをコピーすることができます。
HTMLは下記となります。
<audio controls src="URL"></audio>
URLに共有リンクを入れるだけなのですが、Googleドライブへ保存した音声ファイルをそのまま共有リンクを貼り付けても再生することができません。
そこでリンクに少し手を加えます。
【元の共有リンク】
https://drive.google.com/file/d/1FgU***IcuoYP7/view?usp=sharing
file/d/ の部分を uc?id= へと修正し、/view?usp=sharing を削除します。
【修正後の共有リンク】
https://drive.google.com/uc?id=1FgU***IcuoYP7
修正したリンクを下記のようにHTMLへ加えます。
<audio src="https://drive.google.com/uc?id=1FgU***IcuoYP7" controls></audio>
すると音声ファイルが下記のようにコントロールボックス付きで埋め込むことができます。
前回の記事でも利用した「いまのところ、さんにんきものです」が再生される。
注意点
気をつけたいのは、個人情報のこと。
リンクを辿るとアップロードしたGoogleアカウント名が表示されるので、そこだけは注意ね！
みんなブログ用のアカウントは持っているよね
おわりに
YouTube全盛期にブログへ音声ファイルをアップロードする機会は少なそうですが、備忘録として残しておきます。
誰かのお役に立てば嬉しいな♪