チコちゃんに叱られないブログ

ブログ向上で生活を豊かにしましょう。

Googleドライブの音声ファイルをブログに貼り付ける方法・2020年8月完全版😎

音声ファイル

2020年8月17日 

 

はい、獰猛どうもうです。

中高年の星☆爺婆の太陽 の静吉プレゼンツでございます😍

 

 コメント欄でこんな質問を頂いた。

 

f:id:i-shizukichi:20200803124753p:plain


ももはな (id:however-down)

ねえ、記事とは関係ないけど、
音声ファイルをそのままブログに貼り付ける事って出来ないの?

 Add Star


 

ブックマークコメントを貼り付けたりといろいろ出来るはてなブログなんだけど、コメントの記事への埋め込みは実装されていない。それでこれは手動でコピーして貼り付けた。

 

その時のぼくの回答がこちらです。

 

f:id:i-shizukichi:20200803125152p:plain


静吉 (id:i-shizukichi)

ももはなさん、直接貼り付けるのは基本無理です。
Webページの仕組みでテキスト以外はぜんぶリンクだけだね。

画像も直接貼り付けているみたいに見えるけど、実はあれもリンクで呼び出しているわけです。はてなの仕組みで音声ファイルをはてなにアップロードできません。Proなら自分サーバだから可能だろう。プロバイダ契約でホームページスペースが割り当てられていたら、それを使う事もできます。

簡単には次のような方法があります。
ネット上のクラウドサービスを使うことです。
音声ファイルをMP3をクラウドに保存して呼び出す。
クラウドは容量次第で無料で使えるので…

グーグルドライブを使う。
https://www.engineer-log.com/entry/2019/10/08/sound-mp3

Dropboxクラウドサービス
https://kometsubuchannel.hatenablog.jp/entry/2020/01/20/213035

英語が得意ならこちらも出来るみたい
https://soundcloud.com/ 音声でもOK

とまあ、ちょっと難易度が高くなるかも…それより君んところ優秀な人材が多そうだから、ネットに強い人もいると思うよ。誰かいないか捜してごらん。


こちらもブログへ手動貼り付けです。

 

と、言ったは良いけど、実際にはグーグルドライブで音声ファイルをはてなブログに貼り付けてみたことはなかった。

 

音声ファイルの貼り付けは一応自分のホームページスペースがあるので、そこにちゃわんむしの唄の音楽ファイルをアップロードしブログに貼り付けた記事も作っている。が、音声ファイルはファイルが重いので、ホームページの容量を超えたからと月に3000円以上もの追加料金を数ヶ月搾取されていた。

 

搾取と書いたのは今何処わずか10MBと容量しかないので、こんな容量しかなくて容量が増えたら追加料金が3000円近くもかかるなんて高すぎるからだ。ドメインを取得してサーバーレンタルしたって約千円もだせば相当の容量が使えるのだ。

 

即刻そのプロバイダーから撤退してやろうかと思ったけど、メールアドレスを色々なサービスで使っていてその変更もあるので躊躇している。

 

しかし3000円もの追加料金を、こんなプロバイダーの餌にさせるわけには行かないので、ホームページにあるファイルはほとんど削除してくれた。プロバイダは1996年から使っているAsahiネットだ。

 

ホームページのファイルを削除した関係で、こちらの記事で使用しているMP3ファイルはどれも音が出ない😅

 

ちゃわんむしの唄の動画とカラオケファイルを徹夜で作成したよ♡

 

重要なページでもないので、音楽ファイルをグーグルドライブにアップロードしたら、再度再生できるようにしますが、これはいつになるかは確約はできぬ。 

 

それでももはなさんのコメント欄に音声コメントとしたかったのだけど、コメント欄では音声ファイルの直接貼り付けHMLタグは有効ではなかった。それで音声ファイルのURLを記載してクリックして再生してもらうことにした。

 

コメント欄で <audio src="~音声MP3のファイルアドレス~" controls="controls"></audio> が有効にならなくてもブログ記事では有効になると思って試してみたら、記事でも音声が再生されない。

 

これはURLの指定がブラウザのURLでは駄目だということだ。

 

URLだけなら間違いなくクリックで音声は再生される。が <audio> が有効になっていない。グレーアウトしている。グレーアウトしているのは利用できないってことです。

 

例えばこの↓状態がグレーアウトで利用できないってことです。

つまり、音声ファイルのアドレスが正しくないってことです。

 

さあそれから大変😅

 

検索で音声ファイルの貼り付けを捜してやってみるけどどれも駄目。Google Driveの音声ファイルの貼り付けの記事もいくつかあるけどその方法も駄目でした。

 

それで、どうすればよいのかといろいろと音声ファイルのURLをいじってみて、やっと成功したのが次のURLでした。 

 

どうですか三角の再生ボタンとスピーカーがちゃんと黒く表示されていますね。

つまり、ブログ記事でグーグルドライブのある音声ファイルを再生することが出来たわけです。

 

※音声は ももはな さんの記事のコメント欄で使用した ももはな さんに向けた音声ファイルです。流用させてもらいます。

 

音声ファイル貼り付け方法

まずはグーグルドライブを使えるようにしましょう。Chromeではブラウザの左をクリックすると下図のようになっていると思います。

f:id:i-shizukichi:20200803140229j:plain

 

  1. Google ドライブをクリックしてみてドライブが使えるようになっていれば、それでOKです。そうでなければインストールが始まってアカウントでログインすれば使えるようになります。この辺を細かく説明しているときりがないので、どうしても分からなければ[Google ドライブ]で検索して調べてください。

  2. 音声ファイルは予めスマホなどで録音して作成しておきましょう。音声ファイルはMP3形式が良いです。MP3形式でない場合は検索すればMP3にオンラインで変換してくれるサイトも有ります。

  3. 作成した音声ファイルをグーグルドライブにアップロードします。方法はグーグルドライブを開いてその中へファイルをドラッグ・アンド・ドロップします。

  4. グーグルドライブにある音声ファイルを右クリックして共有を選択。

  5. 共有はリンクを知っている全員としてリンクアドレスをコピーします。これでURLだけでも音声ファイルが再生できます。

  6. https://drive.google.com/file/d/1tHfKMFFN0t-h-Fl0SkvfD1HIleNeLvev/view?usp=sharing こんな形式になります。

  7. 最初の赤い字の部分を uc?id= と書き換えます。(半角英数字で)

  8. 後ろの赤い字の部分は不要ですから削除します。

  9. "https://drive.google.com/uc?id=1tHfKMFFN0t-h-Fl0SkvfD1HIleNeLvev となればOKです。

  10. 上記URLを<audio src="https://drive.google.com/uc?id=1tHfKMFFN0t-h-Fl0SkvfD1HIleNeLvev" preload="auto" controls></audio>で挟み込めばOKです。
  11. <audio src="https://drive.google.com/uc?id=1tHfKMFFN0t-h-Fl0SkvfD1HIleNeLvev" preload="auto" controls></audio> を記事の [HTML編集]で任意の位置に貼り付ければ完成です。

  12. 試しにみなさんも、はてなブログ[記事を書く]で新規作成で試してみてください。上記11.番のタグを[HTML編集]で貼り付けて、編集見たまま]に戻すだけで音声ファイルが再生できると思います。

 

以上ではてなブログで音声ファイルを貼り付けられるようになりました。みなさんの音声ファイルでちょっとしたお話や伝言などを楽しみにしていますので、是非チャレンジしてみてください。

 

以上 Google ドライブを使っての音声ファイルの記事への貼付け方法を説明しました。

 

この方法は Google ドライブだけではなく DropboxiPhone クラウドなどを使っても当然可能です。また Microsoft のOneDrive でも使えると思います。

 

もっと手軽にやるには YouTube でも構わないと思います。

 

YouTube は動画じゃないのと思えるかもしれませんが、実は色々とお話をしていだけの動画もあるので、壁紙を1枚用意してその壁紙をバッグに自分のお話を喋って録画すれば十分音声ファイルとしても使えると思います。

 

この辺は臨機応変に自分のやり方で考えてみるというのが大事です。

 

ブログだからいつまでもテキストだけなんて既成概念にとらわれていては思考の飛躍も何もありません。ブログの中にだって動画も取り込めるし、このようにして音声も取り込めるということが分かりました。

 

そして次の記事からは、文字のサイズや色の変更も色々して楽しめるってことが分かると思います。

 

ブログ主をびっくりさせるコメントを書いてみようじゃないか😎

※コメント欄をご覧ください。

 

稚拙でもいいから自分のスマホで撮影した動画や、自分が唄った歌、それに自分の喋りなどを掲載して記事を創る作るというのは創造的であり、その結果としてインタラクティブなブログが出来上がるのではないでしょうか。

 

自分なりの工夫とチャレンジでより面白く、豊かなブログ作成を目論んでみてはいかがでしょうか。

 

 

 この記事は 中高年の星☆爺婆の太陽 静吉がお届けしました😎 

 

◇◇◇◇◇

 

 

YouTube チャンネル登録

  

Amazon.co.jpアソシエイト

ルイ・ビトン

ルイ・ヴィトンiPhone X iphone XS

ミニショルダー

スマホ

日常は非日常時代へ

持とう・ミラーレス一眼

パソコン

Amazon Prime お得♡

パナソニックミラーレス一眼

 

f:id:i-shizukichi:20200621012743j:plain


 

GOLF5 クレンジングバーム プレズ<Plez>_男性向け 120×60 レディアス美容クリニック