ブログ上でMP3ファイルを再生する方法を書くエントリとなります。
このブログは、はてなブログで運営しているんですが、私はこことは別にGoogle Bloggerで英語勉強ブログを書いています。英語の勉強ブログを書いていると、単語の音声ファイルを貼り付けたくなることがけっこうあります。こう、なんか無いと画竜点睛を欠くような気がして。
と、いうわけでブログ上でMP3ファイルのサウンドを鳴らすためにはどうしたらいいか、調べた内容を書いていきます。本エントリではGoogleドライブに置いたファイルの再生と、ブログ記事上に直接サウンドデータを埋め込む方法を紹介します。
Googleドライブに置いたファイルの再生
audioタグとファイル置き場の話
audioタグはHTMLのなかで音声データを再生するのに使われるタグです。こんな風に使います。
audioタグをブログのHTML編集画面に書き込むと、↓このような再生プレイヤーがブログの記事上に表示されるようになります。ちなみにこのプレイヤーはブラウザごとに見栄えが変わります。
上に書いたタグのなかの src="sound/sound.mp3" ってのは音声ファイルを置いている場所を示しています。src＝source の略ですね。ブログの場合は直接ファイルを格納しておく場所がないので、多くの場合URLを使ってインターネット経由でファイルを参照します。
っていう形ですね。
で、多くのブロガー諸氏が困るのが「どこに置けばいいんじゃい！」って話。Dropboxなんかがサクッと置ける場所になるんですが、使ったことの無い人は使い方を調べたり、そもそも登録するの面倒くせぇと思うでしょう。さらにそういう管理しなければならないもの（Dropboxのアカウント）が増えるのは嫌だと感じる方もいらっしゃることと思います。
そこで、Google Bloggerを使っている方はGoogleが提供するファイル置き場（ファイルストレージ）であるGoogleドライブを使おうと考えます。でもGoogleドライブは後述するように単にURLを貼り付けるだけでは、音声を鳴らすことができません。こいつをどうにかしようというお話でございます。
Googleドライブに置いたファイルを直接鳴らそう！
まずGoogleドライブにファイルを置いて、共有可能なリンクを取得します。こんな感じのURLを取得できるかと思います。このURLは私の環境で19年10月に取得できたものです。Google側の仕様変更が入るとURLが変わることもあると思います。
Xが連続しているところは、ファイルごとに発行されるidが入ります。30桁くらいのランダムな文字列です。このURLをAudioタグに直接仕込んでも、音は鳴りません。理由は説明すると長くなるので後述します。とにかく上記のフォーマットのURLでは音が鳴りません。
じゃあどーするか？
URLを修正する必要があります。修正すればGoogleドライブに置いたサウンドデータをブログ上で鳴らすことができます。URLを以下のように修正しましょう。
↓
https://drive.google.com/uc?id=XXXXXXXXXXXXXXXXX
openをucに変えるだけ。こんだけです。そしてこのURLをaudioタグのsrcにぶち込む。こんな感じ。
これでGoogleドライブに置いた音声をブログ上で鳴らすことができます。
こんなオモチャも作ってみました。Googleドライブで取得したURLをそのまま↓の入力ボックスに貼り付けて、「変換」ボタンを押してください。修正したURLとaudioタグ付きのURLを自動出力します。
（環境に依って動作しない場合があります。その時はごめんなさい。）
直接ダウンロードするURL
オーディオタグつき
Googleドライブのファイルを直接再生できない理由
Googleドライブに音声ファイルを置いてるんだから、そもそも再生できないのがおかしいんだってばよ、と思う方に向けた内容です。
前述のaudioタグってのは音声を鳴らすためのプレイヤーなんです。ざっくり言うと現実世界のラジカセやレコードプレイヤーを想像してください。そしてタグのsrc=のところで指定するのがカセットやレコードに該当するものになります。
この場合は、audioタグを使っているのでブラウザ規定のラジカセ(レコードプレイヤー)を使う、カセット(レコード)はsrcのところに書いている通り、https://www.〇△□.comというWEBサイトに置いているsound.mp3、という意味になります。
srcに指定するのは、あくまでカセットやレコードに相当する音声情報なんです。
そこでみなさんGoogleドライブに保存したファイルのURLを取得して直接アクセスしてみてください。どういう画面が表示されるか。こんな感じの画面ですね。
Googleドライブはアップロードされたファイルの拡張子から、そのファイルを表示するのに適したプレイヤーを勝手に準備して、保存したファイルを表示してくれます。たとえばエクセルファイルをGoogleドライブに保存して、そこにアクセスすればGoogleスプレッドシートで開いてくれます。
では音声ファイルを置くとどうなるか。上の画像のように音声ファイルを再生するプレイヤーを勝手に準備してくれるんです。つまりGoogleドライブの音声ファイルを置いているURLにアクセスすると、Googleさんが用意してくれているプレイヤー（ラジカセやレコードプレイヤー）を表示するページにアクセスすることになります。
そうです、本来は自分でaudioタグというラジカセを準備して、カセットだけ流れてくればいいんですが、Googleさんの親切設計により、Googleラジカセ＋カセットのセットで流れてくる状態になってしまっているんです。
自分で用意したラジカセ(audioタグ)のなかに、Googleラジカセ＋カセットを突っ込んでいる状態です。そりゃ音鳴らないわけです。ラジカセの中にラジカセをブッ込んでるわけですから。壊れないだけ感謝しましょう。アーメン。
前項に書いた内容はURLを書き換えることによって「そういう親切心いらないから！アップしたカセット(音声ファイル)だけ寄越してくださいっ！」とお願いするってことをやっています。
ブログ記事に直接音声ファイルを埋め込む禁断の魔法
ここまでに書いてきたのはGoogleドライブにファイルを置いて、その音声ファイルを鳴らせるというものでした。ここではブログ記事に直接音声ファイルをブチ込む方法を説明します。
と、その前に注意事項。
私はIT業界に生息する社畜ではございますが、インターネット世界を専門にしておりません。ゆえにたとえば「SEO的に良くない」とか言われても、拳を前後に振りながら「そんなの関係ねーっ！」としか言えません。
あくまで、「この方法で出来たよ」と技術的な意味で言及するところまでです。ちょっとイレギュラーな方法だと思うので、自己判断でお願いします。
1MBのサウンドデータを載っけるだけで、本文に100万文字以上のデータを載せることになるので一般的なブログサービスでは非現実的な方法になると思います。
ちなみに↓のプレイヤーは、ここで紹介する方法を使って音声をアップしています。この文章を見ることができている時点では誰にも怒られていないと思ってもらって大丈夫です。
前置きが長くなりました。で、どーやるか？
音声ファイルをbase64形式にエンコードして、audioタグに直接ぶち込む。
これだけです。
言うは易し、行うも易し、やってみよう
上の方で書いたのと同じですが、audioタグには以下のようにsrcのところで、音声ファイルを指定してあげる必要があります。
このsrcって別にURLの形で指定する必要はないんです。あくまで鳴らしたい音声データを指定してあげればオッケー。ということで、こういう風に指定することもできます。
Zを連打しているところがbase64でエンコードした文字列です。これでオッケー。
「ちょっと待て、略して、ちょま」と言いたい気持ちわかります。「素人のワイにニンテンドー64みたいな芸当はできまへんでしかし」でしょ？
そこでこちらご用意いたしました！その名も『勝手にbase64変換機』！
ファイルを指定すれば、base64エンコードされた文字列と、audioタグ付きの表示もされます。
※環境に依りますが、MB単位のデータを指定するとブラウザが待機状態になるかもしれません。数KB程度の小さなファイルで試してみてください。
「怪しいブログサイトにファイルを送信しちゃダメってママが言ってた」というお嬢ちゃんは、どっか別のサイトで方法を調べるなり、Web上で変換サービスをやってるところがあるので、そちらを利用してもよろしおます。
Windows OSを使っている方は、以下のコマンドを実行することで、base64エンコードの結果を出力することができます。
ちょっと技術的な内容になりますが、ここに載せている変換機はファイルをどっかに送るってことはしておりません。このエントリ内に置いているjavascriptだけで処理してますので、その点において安心安全です。
・・・・え？なんか長～い文字列がでてきた？これをブログの中に書き込むの？ださくない・・・？
そう、そこがこのやり方のイカしてない（非現実的な）ところなんです。
本文中にはaudioタグだけ置いておいて、javascriptでbase64の値を差し込む形にすれば、少しは見た目がよくなるんですけど、何が一番いいかって言われるとわからんというのが正直な感想です。（というかまともな音声ファイルだと数MBほどの大きさになることなんて普通にありますから、まぁやっぱり現実的な方法じゃないんだろうなぁ）
たとえば、bodyタグの中では、
とsrcを空にしておいて、HTML文書末尾にjavascriptでこう書く。
document.getElementById("audio1").src = "data:audio/mp3;base64,ここにエンコードされた文字列をだーっと貼り付ける"
</script>
Google Bloggerだとbodyタグの中に直接書き込んだbase64の値は、編集モードを変えると切り取られてしまいます。scriptタグのなかに書き込んだbase64の値は消えませんので、そういう使い方もあるかと思います。
まぁ実際のところ、1KBの音声ファイルでも1400文字くらいになっちゃうんで、あまり使い道はありません。私がやっている英語勉強ブログでは１つの単語の音声で３～５KBほどのファイルを扱うので、使えなくはないって感じです。
base64エンコード？なにそれ、うまいの？
えーっと、base64ってのは数多あるエンコード方式の一種です。
エンコードってのは、日本語にすると符号化といわれます。これは文字やファイルを特定のルールに従って、別の文字列に変換する処理です。これだけ書くと「合点っ！暗号にするってことだな！」と思われがちですが、さにあらず。（暗号の一種と捉えることもできなくはないですけど）
暗号は鍵を持っている人だけが内容を読み取れて、鍵を持っていない人には内容を読ませないってところに目的があります。エンコードは単に文字列を変換することにその目的があります。変換して特定のコンピュータやソフトウェアが文字列を扱えるようにするためです。故にどの方式でエンコードされているかが分かれば、誰にでも元の情報に復元できるという特徴があります。
前節ではbase64というエンコード方式を使いました。これはアルファベットの小文字(26種)、大文字(26種)、数字(10種)、記号の＋と/（2種）、これら合わせて64種の文字を使って元のファイルを表現するエンコード方式です。
詳しくは、いつもお世話になっておりますWikipediaさんをご参照ください。
ちなみにWikipediaにも書いてありますが、base64エンコードを行うと元ファイルに対して33%ほど情報量が増加します。たとえば１MBのファイルをbase64でエンコードした場合、1.33MB分の情報が出力されます。アルファベット1文字が1byteなので、133万文字が出力されます。はたしてそんな長い本文情報をブログサービスが受け取ってくれるのか。というか貼り付けることすらできない気もします。
音声ファイルをブログに直接アップロード（したいが出来なくて挑戦中。）
ここからは、まだできていない内容を考察する内容になります。
そもそも、GoogleドライブでもDropboxでも外部サイトに音声データを保存するのって、それ自体があんまりイケてないですよね。Blogger＋Googleドライブならまだギリセーフ感がありますが、大体の場合においてアカウントを新しく作らなければならなかったり、使い方を覚えなきゃいけなかったりで、けっこう面倒くさい。
これ、どーにかしてブログサイトに音声データを直接アップロードできないかと考えてみました。はてなブログもBloggerもアップできるのは、精々画像くらいなものです。
で、うーんうーんと回転の遅い頭を壁に打ちつけながら考えていたところ、、、閃いたっ！
①拡張子を偽装する
MP3ファイルの拡張子を、.png とか、.jpg に変えればアップできるのではないか。
→無理でした。
どうもブログサイトでは、アップするファイルに何かしらのチェックが入っているようで、拡張子を変えただけでは受け付けてくれない。アップロード失敗しましたとメッセージが表示される。
②ファイルヘッダの情報を偽装する
どうせマジックナンバーくらいしか見てないでしょ、と仮説をたてて音声ファイルの先頭にpngファイルのヘッダ情報を埋め込む
→無理でした。
ブログサイト側では、アップされてきたファイルを描画できないと受け付けてくれないっぽいです。
③画像ファイルに音声ファイルを連結する
1×1サイズのpngファイルに音声ファイルを連結してアップロードする
→無理でした
アップロードは受け付けてくれたものの、ブログサイト側でファイルの再構成が行われているようで連結した音声ファイル箇所が根こそぎ刈り取られていました。
うーむ、、、なかなかしぶとい。ここからは検討だけしてまだやっていないアイディアになります。たぶんこれを実現できたら直接アップロードができると思うんですが...
④音声ファイルを画像化する
音声ファイルをbase64にエンコードする。3byte(3文字)を一組にして、それをRGB値として画像化。ブログ記事上ではjavascriptで各ピクセルの情報を収集、連結する。出てきたものをaudioタグにぶっこむ。
これで出来そうな気がするんですが、はたしてどうでしょう。
------------- 追記ここから -------------
→無理っぽい・・・
canvasを使って画像化はできました。が、その画像ファイルをブログサービスにアップロードすると、CORS（異なるドメインのリソースを使うときに出るやつ）の制限にかかってしまってRGB値を読みだせませんでした。はてなでもBloggerでもアップされた画像は、ブログのドメインではなくて、画像をホストする別のサブドメインで公開されるためです。
うーん、なんか回避方法はないものか。。。
------------- 追記ここまで -------------
おわり