こめつぶチャンネル

こめつぶチャンネル

子育て真っ最中のネガティブ系サラリーマン「コメ太郎」と、愉快なファミリーが繰り出す渾身のクリエイティブチャンネル!!Garage Band iOSの記事が中心です。

はてなブログで音声データを貼り付ける方法

f:id:kometaro0707:20200122150327p:image

こんにちは!コメ太郎です。

この記事では、はてなブログに音声データを貼り付ける方法をご紹介します。

 

こんな感じのことができます。

 

僕も最近知ったので、備忘録を兼ねて。

 

 

 Dropboxを利用して音声データを貼り付ける?

結論から言うと、Dropboxというクラウドサービスを利用すれば、音声データが聴けるようになります。

Dropbox内にアップロードしているデータのリンクを通して、不特定多数の人に参照してもらうことで、聴けるようになる寸法のようです。

 

音声データの貼り付け方

Dropboxにデータをアップロード

それではやり方をご説明します。

 

まず、Dropboxというクラウドサービスに登録していることが前提となります。

クラウド上でデータを管理することができる便利なサービスです。

Googleドライブとかと同様のサービスです。

無料で利用できますので、登録がまだ、という方は是非アカウント登録しておくことをお勧めします。

 

Dropboxは、以下のURLより無料で登録できます。

https://www.dropbox.com/

 

では、説明に戻ります。

Dropboxのブラウザ版を立ち上げます。

アップロードしたデータの共有をクリックすると、リンクをコピーという項目がありますので、そちらをクリックします。

f:id:kometaro0707:20200122143700p:plain

すると、https://www.dropbox.com/s/【固有の文字列】.mp3?dl=0

というリンクが出てきますのでこちらをコピーします。

f:id:kometaro0707:20200122143748p:plain

 
このリンクを使って、はてなブログ記事内に埋め込んでいきます。

 

ひとまずリンクのコピーができたら第一段階クリアです。

一旦おいておきます。

 

 

ちなみに

PCのアプリケーションソフトからも同様のことができましたので、ブラウザ版じゃなきゃダメってことはないようです。 

 

 取得したリンクの加工

 次に、以下のHTMLの文字列を加工して、はてなブログ記事への貼り付けます。

貼り付ける前に、いくつか加工が必要なので、一旦「メモ帳」などにコピペして作業することをお勧めします。

 

Dropboxから取得したリンク

https://www.dropbox.com/s/【固有の文字列】.mp3?dl=0

 

となっているかと思います。

この赤い部分だけを、下の「オーディオデータ埋め込みようHTML」の赤部分にぶち込みます。

 

オーディオデータ埋め込みようHTML

 <audio src="https://dl.dropboxusercontent.com/s/[Dropboxから取得したリンクの赤部分]" controls></audio>

 

なので、手順としては、以下のようになるかと思います。

 

①メモ帳などに、Dropboxから取得したリンクを仮で貼り付ける

②①の「https://www.dropbox.com/s/」と「?dl=0」をカットする

③メモ帳などに、オーディオデータ埋め込みようHTMLを貼り付ける

④②でカットした残りの「【固有の文字列】.mp3」を③の「[Dropboxから取得したリンクの赤部分]」に上書きする

 

加工したHTMLを貼り付ける

上記で加工したHTMLを、ブログ記事に貼り付けしていきます。

はてなブログ記事の貼り付け先は、投稿画面の「HTML編集」というところから行います。

f:id:kometaro0707:20200122142100p:plain

HTML編集画面はこんな感じです。

f:id:kometaro0707:20200122142149p:plain

例えば、この

「〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇」

「▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲」

の間に、先ほどの加工したHTMLをコピペするとこうなります。

f:id:kometaro0707:20200122142041p:plain

正しく反映されたかどうかは、プレビュー画面から確認してくださいね。

 

ちなみに・・・

Dropbox内のフォルダやファイルの場所を弄っても、リンク先は変更されないようなのでそこは大丈夫でした!

 

もっと最速の方法

ここまで長々と書いてきましたが、正直めっちゃめんどくさい!!ですよね。

 

そもそも埋め込みにする必要がない!

もっと簡単にアップロードしたい!

 

という方は、こっちの方が良いかも。

 

リンクをそのままぶち込む

こんな感じで、一発で再生はできないものの、音声データの貼り付けができます。

www.dropbox.com

 

Dropbox - MIDIデータ(逆再生後).mp3 - Simplify your life

 

これは、Dropboxにアップロードし、リンクをコピーしたものを、直接貼り付けるとできます。

記事投稿画面の【編集見たまま】のタブで、【Dropboxから取得したリンク】を直接コピペする感じです。

 

Dropboxから取得したリンク

https://www.dropbox.com/s/【固有の文字列】.mp3?dl=0

加工せず、そのまま

 

するとこういう画面がでます。

 

f:id:kometaro0707:20200122143259p:plain

 

好きな方を選ぶと音声データの貼り付けができます。

 

まとめ

備忘録を兼ねて、こちらに記事を残しておきます。

はてなブログの編集画面に、音声データを載せるところがなかったのですが、この方法なら大丈夫のようですね。

 

Dropboxにアップロードしたデータが消えてしまうと、リンクが切れてしまいブログの方でも聞けなくなってしまいますので注意してください。

 

この方法が、皆さんの作曲活動などに役立てば幸いです。

 

それではまた。

 

Copyright ©**あなたのブログ名** All rights reserved.