Webサイト構築にあたって
「音声ファイルを埋め込みたいなぁ…」
と調べた結果、
audioタグにたどり着いたわけですが。
自身のサーバーを立ててる訳でもなく、
有料ストレージに登録している訳でもなく。
無料ストレージはURL作成機能使っても、
オーディオ再生できない…。
ということで、参照URLを
直リンク（※）するやり方がわからず
困ってました😂
※直リンクとは、
外部サイトの素材（画像や音声）URLを
直接読み込んで、素材を表示すること
夜な夜な悪戦苦闘した結果、ようやく
無料でオーディオ再生させる方法に
たどり着いたので、メモも兼ねて執筆✍️
もし困ってる方がいたら参考になれば！！
（結論だけ知りたい方は
「無料ストレージで直リンクする方法」
まで飛んで見てね）
そもそもaudioタグとは
HTML5のタグの1つで、
HTML文書内に音声ファイルを
埋め込んでくれる優れタグ。
使うと表示はこんな感じ。
〈タグ〉
<audio controls src="音声データのURL"></audio>
<実際の表示>
よく声優さんのプロフィールで
ボイスサンプルとして表示されてるやつ
･:*+.\(( °ω° ))/.:+
"音声データのURL"に本来は
参照URL（音声データの格納先）を書きます。
上のはただの文字なので
▶️ボタン押しても何も流れませぬ。
じゃぁ実際に音声データの格納先を
書こうと思ったら、ここが意外と難題。
自身で作った音声ファイルは
どこから参照したらいいんじゃーー
ってなるわけです。
そこでやり方としては大きく3つ。
（素人調べ）
①自分のサーバー立ち上げる
②有料ストレージに音声アップする
③無料ストレージでなんとかする
①②は月額とかでコストがかかってくるので
何とか避けたい…。
ということで、無料でできる
③について次で書いていく！
ちなみにaudioタグには上記で書いた
以外にもタグ属性とか仕様あったり
するので、細かいことは以下参考あれ。
無料ストレージで直リンクする方法
さて、ここからが今日の本題。
さっき書いた
<audio controls src="音声データのURL"></audio>
の「音声データのURL」について
URLの取得方法を述べていきます！
まず、単純にGoogle Driveとか
DropBoxにアップロードして
共有をかけるだけと思ってたら
それはNGでした・・・。
（URLクリックして確認したところ、
「再生しますか？」のような確認ダイアログが
表示されるので
audioタグ上で再生できないみたい。）
ということで、手順は以下の通りです。
一旦DropBoxのやり方がわかったので、
そちらを紹介！
（①②は基本的な操作なので
本記事では③以降説明します🙏）
① Dropboxをインストール&サインイン
（説明割愛）
② Dropboxに音声ファイルをアップロード
（説明割愛）
③ ②のリンクを取得
以下画像を参考に「リンクコピー」します。
取得するとこんな感じのURLになる。
https://www.dropbox.com/●/●●●/●●●.mp3?dl=0
コピーできたら手順④へ。
④ ③のリンクを加工する《ここ重要》
③で取得したリンクをテキストエディタ等に
貼り付けて、以下のように加工します。
https://www.dropbox.com/●/●●●/●●●.mp3?dl=0
変更［1］赤字の置換
www.dropbox.com
↓
dl.dropboxusercontent.com
変更［2］青字の削除
?dl=0
結果、以下のリンクに成り代わります！
https://dl.dropboxusercontent.com/●/●●●/●●●.mp3
これでURLができました🙆♀️
⑤ 加工したリンクをaudioタグに埋め込み
④で作ったURLをタグに埋め込んだら完成
<audio controls src="https://dl.dropboxusercontent.com/●/●●●/●●●.mp3"></audio>
お疲れ様でした💮
実際にやってみた結果↓↓
おぉ・・・
これで無料で音声流せる🤗ｱﾘｶﾞﾀﾔ
サイトお作りの際は
是非活用してみてください！
ちなみに。
この方法にたどり着いたのは
以下サイトのおかげです。本当に感謝！！
〈参考サイト〉
もし今回書いた方法以外に
何か良い手段があれば是非
教えてください！！
それではでは👋