星みるみち

日々の出来事や感じたことなど、有益な情報をお伝えする雑記ブログです。

はてなブログに音楽(mp3)ファイルを貼り付ける方法

音楽プレーヤーを操作する女性

前回の記事で私が作った曲を紹介したところ、数名の読者様から質問を頂きました。

その質問は、音楽ファイルをどのようにして貼り付けるのか?

 

どうすれば、あのような音楽プレーヤーが表示されるのか?

・・ですね。

 

ということで、今回の記事は、はてなブログに音楽(mp3)ファイルを貼り付ける方法を紹介します。

音楽ファイル(mp3)の貼り付け手順

音楽プレーヤーの操作画面


 下記は実際のプレーヤーです。▶を押すと音楽が流れます。

 

フルバージョンは下記です。

www.hoshimiru.com

 

 

では、はてなブログへ音楽プレーヤーを貼り付けるには下記の手順で行います。



貼り付けたい音楽ファイル(mp3)を用意する。

貼り付けたいmp3ファイルをドロップボックスへ挿入する。

ドロップボックスのアドレスをコピーする。

コピーした、ドロップボックスのアドレスを加工する。

はてなブログのHTML編集に貼り付ける



このような手順で行います。

まず、ドロップボックスにmp3ファイルを挿入しますが、別にあなたのブログのサーバーに挿入しても問題ありません。

 

ドロップボックスを指定したのは皆さんご存知な方が多いからです。

 ドロップボックスは下記から無料登録していただければと思います。

 

https://www.dropbox.com/ja/basic

 

ドロップボックスにmp3ファイルを挿入

 ここでは、ドロップボックスの登録を済ませたところから説明しますね。

 

ドロップボックスでのurlアドレスを見つけてコピーする


ドロップボックスにmp3ファイルを挿入して、そのファイル①をマウスの右ボタンをプレスします。

すると、ポップアップメニューが表示されますので、②の「Dropbox リンクをコピーする」をクリックします。

 

そうすると下記アドレスがコピーされます。

https://www.dropbox.com/s/mmxywc6yiq2t6ua/rocker.mp3?dl=0

 

次に最初の部分に「<audio controls="controls" src="」を付け加えます。

 

そして、

 https://www.dropbox.com/

https://dl.dropboxusercontent.com/

つまり、

<audio controls="controls" src="https://dl.dropboxusercontent.com/s/mmxywc6yiq2t6ua/rocker.mp3?dl=0

になります。

 

そして、mp3の以下の「?dl=0を「?dl=1" 」に書き換えて</audio>を付け加えます。

 

完成は・・・

 

<audio controls="controls" src="https://dl.dropboxusercontent.com/s/mmxywc6yiq2t6ua/rocker.mp3?dl=1"> </audio>

 

下記画像をご覧いただければ、分かりやすいと思います。

分かりやすく変更するポイント


完成した、

<audio controls="controls" src="https://dl.dropboxusercontent.com/s/mmxywc6yiq2t6ua/rocker.mp3?dl=1"> </audio>

を、はてなブログのHTM編集に貼り付ければ音楽プレーヤーが表示されます。

 

html編集画面で確認



そうすると、このように表示されます。

音声プレーヤーの設置図

 

では、次はドロップボックス以外のサーバーにファイルを置く場合ですね。 

あなたのレンタルサーバーにmp3ファイルを置く

ftpサーバー情報



Dropboxを音源として説明しましたが、先程述べたように、あなたのサーバーにも設置出来ます。

 

あなたのサーバーへFTPソフト「FFFTP」などを使ってmp3ファイルを挿入します。

 

例えば、はてなブログ以外に、あなたのブログやサイトをお持ちだったら、そのサーバーを使います。

 

例えば、https://www.hoshi.com というアドレスの場合、フォルダを作って、そこにmp3ファイルを入れます。

 

「music」というフォルダを作った場合

 

https://www.hoshi.com/music/◯◯mp3

になります。

 

次に、はてなブログに貼り付けるアドレスは下記になります。

<audio src="https://www.hoshi.com/music/◯◯mp3" controls> </audio>

 

このように、mp3ファイルの置き場さえあれば、容易に音楽ファイルを設置することができるということです。

 あなたのブログに音声ファイルを設置する

ブログに音楽や音声を設置するということですが、私のように曲作りが趣味でない限り必要ないと思われがちですね。

 

でも、いろいろ工夫すれば、音声ファイルは活躍してくれます。

 

例えば、コンサートを紹介するブログだったら、会場の音声などの雰囲気を伝えることが出来ます。

 

鉄道ファンのブログだったら、電車のモーター音などを読者へ聞かせるのもいいと思います。

お煎餅を食べる音を録音している女性

 

そして、今、話題の咀嚼音(そしゃくおん)ですね。

咀嚼音は、歯で噛んだりする食べる音を録音します。

 

YouTubeでは、ピクルスや、フライドチキンを食べる音が2000万回以上再生されているそうです。

 

YouTubeもいいと思いますが、ブログでの文字説明と音を加えると、YouTubeとは違った味が出ると思いますよ。

 

このように、音声ファイルは工夫することによって、ライバルとの差別化が出来ます。

あなただけの、素晴らしいブログに音声ファイルをプラスしてはいかがでしょう。



最後まで読んでいただきありがとうございました。