埋め込みプレーヤーのMP3置き場を変更しました

当ブログでは音楽記事で曲を紹介する際に、YouTube や Spotify 等に音源がない場合、手持ちの音源のMP3ファイルをアップロードして <audio> タグで埋め込んでいました。

ふじろじっく

プレイリスト - 竹仲絵里

2番目に好きなSSW 竹仲絵里のお気に入りプレイリスト

https://fujilogic.blogspot.com/2017/06/playlist-eri-takenaka.html

Blogger に MP3 は置けない

Blogger は 写真と動画以外のファイルはアップロードできないため、音楽ファイルは Googleサイトのファイルキャビネットに置いて管理していたのですが、外部のファイル置き場という使い方ができるのは従来の古い Googleサイトだけで、2021年に完全移行される新しい Googleサイトではそういう使い方ができなくなってしまいます。

というわけで、埋め込み再生可能な別の音楽ファイル置き場(もちろん無料の)を色々調べて探していたのですが、どうやら Googleドライブなら、ちょっとした裏ワザ？を使えば出来るということがわかったので、参考までに手順を書いておきます。

Googleドライブにアップロードした音楽ファイルを埋め込む手順

まず普通にMP3ファイルを Googleドライブにアップロードし、右クリックメニューの「共有」をクリックします。

「リンクを知っている全員に変更」をクリック。

リンクをコピーして「完了」を押します。

必要なのはコピーしたリンクのファイル ID(英数字の文字列)の部分だけです。

https://drive.google.com/file/d/ファイル ID/view?usp=sharing

この ID を以下のタグに入れると埋め込み再生が可能になります。

<audio controls="true" src="//drive.google.com/uc?id=ファイル ID"></audio>COPY

唯一の問題点

どのブラウザでも問題なく再生出来ることは確認したのですが、何故か Chrome の「シークレットモード」だけがエラーで再生できず…
Googleアカウントにログインしてみてもダメ。他のブラウザのシークレットモード(プライベートモード)では問題なし。
デベロッパーツールで検証してみたところ、どうやらリダイレクトが多数発生しているのが原因らしいですね。

Chromeさんに何とかしてもらうしかないのかな…(~_~;)
まあ、シークレットモードで見に来る人なんて滅多にいないでしょうから、とりあえずこのままの状態で様子見しておきます。

2022/09/25 追記

その後いつの間にか PC Chrome のシークレットモードでも問題なく再生できるようになっているのを確認しましたが、コメントにて Android の Chrome でも問題ないとのご報告を頂きました。

2024/04/02 追記

仕様が変わったのかどうかはわかりませんが、再生ができなくなってしまったようです。

2024/04/27 追記: MP3置き場を Dropbox に変更しました。

Androidスマホでも問題なく再生できました。Googleドライブの時と違ってファイル直リンで読み込みも早く再生が止まることもなく安定しているので、今後はここをメインにしようと思います。

埋め込むためのポイント

共有リンク URL をこのように変更することで埋め込み再生が可能になります。青文字箇所を変更し、末尾の赤文字の箇所(&st=●●●&dl=0)を削除します。

<audio controls="true" src="https://dl.dropboxusercontent.com/scl/fi/bygyhum0jt7m1e8irayub/.m4a?rlkey=c9ib3y9vl5zzsawo7qlnac9dy"></audio>COPY