こんにちは、テックです。
先日執筆したこちらの記事内にて音声ファイルを埋め込んだのですが、少し方法がわかりにくかったので方法をまとめてみたいと思います。
今回はなるべくHTMLの知識がない方でも簡単にできるようにテンプレートも用意したいとおもいます。
音声ファイルを埋め込む方法
データのアップロード
目標の着地点は以下のように「audioタグ」で再生停止・ボリューム・シークのできるHTMLプレイヤーを埋め込むことです。
まずはじめに、掲載したい音声・音楽データ（mp3/m4a）などのデータを用意します。
ここは言わなくてもわかると思いますがｗ
音声データの埋め込みは基本的にどこかのサーバーやクラウドストレージにアップロードし、それをソースとして読み込ませるという流れになりますが、はてなブログでは「DropBox」のみ対応しているようです。
試しにGoogleドライブでやってみたのですがうまくいきませんでした。
DropBoxにログインしてリンク作成
DropBoxのアカウントを持っていない方は作りましょう。Googleアカウントを紐づけるのがわかりやすいかもしれませんね。
ちなみにブラウザ版で問題ありません。アプリを持っている方はそちらでも大丈夫です。
１．作ったら音声ファイルをアップロードします。ドラッグ＆ドロップでいけます。
２．上げたデータにカーソルを合わせると「共有」ボタンが現れるのでそこをクリックしてください。
３．「このリンクを知っている全ユーザー 閲覧可能」となっていればそのまま掲載可能です。もし異なる場合は設定から閲覧可能に変更します。下部のリンクを作成してコピーを押します。
すると以下のようなURLが生成されるはずです。
https://www.dropbox.com/scl/fi/【固有の文字列】.mp3?【固有の文字列】;dl=0
ここがやっかいで、場合によっては以下のようなリンクになるケースもあるみたい。というか私が調べたほとんどのサイトには以下のURL形式で記載されていた。
https://www.dropbox.com/s/【固有の文字列】.mp3?dl=0
この「https://www.dropbox.com」に続くディレクトリが「scl/fi/」か「s/」によって参考サイトのフォーマットがうまく機能しない可能性があるのでので注意が必要です。
取得したリンクの加工
ここからは取得したリンクを埋め込みコード用に書き換えていきます。
まずシンプルに使うコードは以下
<p><audio src="https://dl.dropboxusercontent.com/[Dropboxから取得したリンクの赤部分]" controls="controls"></audio></p>
【パターン１】
https://www.dropbox.com/scl/fi/【固有の文字列】.mp3?【固有の文字列】;dl=0の場合
↓↓↓
<audio src="https://dl.dropboxusercontent.com/scl/fi/【固有の文字列】.mp3?【固有の文字列】" controls="controls"></audio>
「scl」から始まる部分を最後までコピーしてソースリンク内に挿入。
【パターン２】
https://www.dropbox.com/s/【固有の文字列】.mp3?dl=0の場合
↓↓↓<audio src="https://dl.dropboxusercontent.com/s/【固有の文字列】.mp3" controls="controls"></audio>
こちらは「s」から始まる部分を最後までコピーしてソースリンク内に挿入。
このケースの場合は「mp3」までで最後の「?dl=0」は必要ないそうです。
実際【パターン２】でリンクが生成されたことがないのでよくわかりませんが。。
はてなブログに貼り付ける
まとめると、それぞれ以下のようなリンクになります。
【パターン１】
<audio src="https://dl.dropboxusercontent.com/scl/fi/【固有の文字列】.mp3?【固有の文字列】" controls="controls"></audio>
【パターン２】
<audio src="https://dl.dropboxusercontent.com/s/【固有の文字列】.mp3" controls="controls"></audio>
あとはこのリンクをHTML編集タブの任意の場所、すなわち入れたい箇所に貼り付けるだけです。
わかってしまえば簡単なのですが、scl/fi/のケースがよくわからず少々難儀しました。
まとめ
DropBoxでないとうまく貼り付けられないのが面倒ですが、作り自体は超シンプルですね。
上記のリンクの【固有の文字列】の部分を入れ替えれば即使えますので、どちらのパターンかによって使い分けてみて下さい。
ちなみにhttps://dl.dropboxusercontent.com/の後のディレクトリがなぜ「scl/fi/」というのと「s/」という2種類あるのかは私にもよくわかりません（笑）
もしわかる方がいたら教えて下さい！
