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

※初出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データを選んで「開く」ボタン
↓
アップロードが始まります。容量が重いと時間がかかります。
↓
アップロード出来たらこんな感じでmp3がGoogleドライブ内に入りますので、このファイルをクリックして開きます。

↓

黒い背景で再生プレーヤーが出てきますが、右上の3点メニューを押して、「新しいウインドウで開く」を押してください。
（ひと手間多いですがこうしないと出ないメニューがあるのです）

↓

はい、やっと出ました。①から作業しましょう。
「共有」ボタンを押すと

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

続いて②

3点メニューを押すと

こんな感じのメニューが出るようです。「アイテムを埋め込む」を選択すると、

こんな文字列が出ます。これを貼り付けると下記です。
プレーヤーが埋め込まれます。
width=”640″ height=”480″　が埋め込みサイズの部分です。
最初は横幅640px縦幅480pxで入っているようです。
好きな数値でサイズ変更も出来ます。

この音声の公開を終了したい場合は、設置時と同じく①と②を作業しましょう。

①Googleドライブでこのファイルを右クリック「共有」を選んで・・・
↓
「制限付き」にする

②この再生プレーヤーの埋め込みHTMLを消しちゃう

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