参考にしたサイトはこちら。
- 鍵盤中心の音楽ブログ「Google Blogger に音楽をアップロードする方法」http://yuukinakazawa.blogspot.jp/2015/03/blogger-music-upload.html
- DTMスキルアップメモ「ブログにmp3等の音声ファイルを簡単に埋め込む方法」http://frenchbread.hatenablog.com/entry/2017/06/04/175801
このブログ（Off the Job Training）は、Google Blogger で作成していること、そして、Dropboxのアカウントはとっているもののあまり利用していなかったことから、Dropboxに音声をアップして、それをブログに貼り付けるという方法を取りました。
やってみたいと思っていることは、個人的なWebラジオのようなものです。
ブログに音声を貼る手順としては、大まかに書くと、
- 音声ファイルを準備
- 音声ファイルをMP3に変換
- MP3ファイルをDropboxに保存
- ブログを作成
1. 音声ファイルを準備
まずは音声ファイルを準備します。今回は準備をしていなかったので歌ってみたのを録音しました。最後に置いてあるのでご興味ある方のみお聞きください(^-^;)
スマホで録音して、録音ファイルをDropboxに保存します。
2. 音声ファイルをMP3に変換
私のスマホに入っている録音アプリでは、ADTSオーディオ形式（.acc）で音声ファイルが作成されていました。それをMP3形式に変換します。変換には以下のサイトを利用しました。
Online Audio Converter
サイト上でDropboxにアクセスしてファイルを選択、変換してそのままDropboxへ保存できるので便利でした。
ですが、一番楽なのは、音声をMP3で録音することですね。こちらは今後、スマホのアプリを探してみます。
3. MP3ファイルをDropboxに保存
上記（2.）でDropboxに保存済みですので割愛します。
4. ブログを作成
ブログ記事を書きます。そしてそのブログのHTML編集で、以下の記述をします。
<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls></audio>
[取得したURL]には、Dropboxに保存してある音声ファイルのURL（の一部）を記述します。
Dropbox内のファイルのリンクを取得すると、https://www.dropbox.com/s/○○というリンクとなりますので、この○○の部分を[取得したURL]に入れて記述します。
ダウンロードを不可にするには、controls の後に、controlslist="nodownload" を追加します。
<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls controlslist="nodownload"></audio>
（参考）
ヨコログ「html5のaudioタグで表示されるダウンロードボタンを消す方法(Chrome)」
https://yokochan-y2.com/chrome-audio-download-button-delete/
そしてブログを公開すると、この記事最後にあるようなプレイヤーが表示されます。これで完成です。
〈おまけ〉
最近、米津玄師さんを聞きはじめました。お気に入りは「灰色と青」です。
この動画をパソコンで流し、イヤホンで聞きながら一緒に歌ったのを録音しました。リズム感がまだ上手くとれていないように思います。最初録音したときは声が小さかったので大きな声で熱唱してみたのですが、パソコン上に移動させるとかなり大きな音になってしまいました。音量注意です。