音声をホームページで公開する方法

※初出2016年7月4日 再編集2023年8月22日

友人のナレーターさんからの相談を受けて書いてみようと思いまして
動画ではなく、音声のみを公開する方法、です！

最近の簡単そうな方法の代表格は
・Youtube
・文章投稿用サイト「note」（音声記事を投稿する方法）
あたりでしょうか。
どちらも簡単にできるようになっていますが、自分のサイトにもっと簡単におけないか、ログインとかもう覚えられないんだ、
というそこのあなたのために、まとめてみましたよ。

まず用意するもの
パソコン（あたりまえ）
今回はHTML5のコードで、1つだけデータを載せたい場合で書きますね。

上記からお好きな方をお選びください。
だいじょぶです？じゃあいきましょー。

■HTMLソース内に再生プレーヤーを入れたい場合

デスクトップなどに、MP3ファイル準備します。
↓
FTPソフトなどでホームページがいるサーバーに入ります。
↓
MP3ファイルを載せたいページと同じファイル階層へ行って、MP3ファイルをドラッグして置きます。
↓
MP3ファイルを載せたいhtmlページをダウンロードして、バックアップ保存（超大事）

同じhtmlの分身コピーを作って、本番用を作ります。
そしたら載せたい箇所に下記コードを入れます！

<audio src="Mp3のファイル名.mp3" controls="controls"　controlslist="nodownload">
音声を再生するには、audioタグをサポートしたブラウザが必要です。
</audio>

これで1回、htmlファイルをご自身のPCで使っているブラウザにドラッグしてみてください
正しければ主要ブラウザでは再生プレーヤーが表示されます。

こんな感じ
（ご存じかと思いますが、この段階では再生ボタンを押しても音声は出ません）

見た目が大丈夫ならFTPでhtmlファイルを再アップして上書き。
ページのURLにアクセスして確認してみましょう。

出来ました？

音出ない・・という場合は
・MP3のファイル名をどこかで間違えてる。
・MP3ファイルの置き場所を間違えてる。
この可能性が高そうです。

また、音声をダウンロードされたくない、という場合は
上記HTMLコード内にある「controlslist=”nodownload”」でひとまず簡単なダウンロード不可にしています。
（これ以外のいろんな方法があるので、簡単に防止は出来ないですが）

プレーヤーが出ないという方はHTML5で作ったサイトじゃないのかも。
下記の方法をどうぞ

 

■Googleアカウントさえあれば出来る編

天下のGoogleさまさまですね。

ログインしてGoogleドライブに入りましょう

左側の「新規」ボタンをクリックして「ファイルのアップロード」をクリック
↓
自分のPCのフォルダを選ぶ画面になりますので、音声mp3データを選んで「開く」ボタン
↓
アップロードが始まります。容量が重いと時間がかかります。
↓
アップロード出来たら

こんなアイコンが出てたらアップロード出来てます。このファイルを右クリック。

↓

「共有」にオンマウスしてさらに下階層に出た「共有」を押す

↓
こんな感じのポップアップが出ると思います。
色々出来るようなのですが、大事なのはひとまず赤いラインの所。
「閲覧者」にして、「リンクをコピー」を押してURLを取得します。

このURLをコピーして、載せたい部分に張ります。

これで、このURLを知ってる方のみ、音声データが聞けます。
サンプルデータはこちら

こちらのリンクにはひと手間加えてあります。
「https://drive.google.com/〜=sharing” target=”_blank”」という感じで、取得したリンクの後ろに
「target=”_blank”」を足して上げると、リンククリックした際に新しいウィンドウが立ち上がって再生してくれます。
ちょっとだけ元のページを保って戻りやすい、かも

この音声の公開を終了したい場合はGoogleドライブでこのファイルを右クリック「共有」を選んで・・・
↓
「制限付き」にしてください。

出来ました？
HTMLを全部覚えなくても、見ながらやれたら自分の置きたい方法で音声データがおけると思います。
参考になったら嬉しいです。