副業継続ビルダー:わかチンのブログ

【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

BLOG

ブログに音声を埋め込みたい
「どのように音声収録するのがベスト?」
「ブログに音声を埋め込む方法を知りたい」
このような疑問が出てきました。

このようなお悩みを解決するための、お手伝いをします。

本記事の内容

  • ブログに音声を埋め込む方法
  • ブログに埋め込む音声収録の方法

この記事を読むメリット

  • ブログに音声を埋め込めるようになる
  • ブログ発信と音声発信が同時にできる

この記事を書いている僕は2020年9月から副業を始めました。現在は本業と両立し、毎日ブログを執筆しながら活動しています。
そんな僕は最近「stand.fm」を使って音声配信を始めました。そしてある日、「音声を動画とは別で情報発信のコンテンツの1つとしてブログに埋め込みたい」と思いました。色々調べた結果、現在ではブログに音声を埋め込むことが簡単にできるようになりました。
日々どんなことを意識し、ブログに音声を埋め込んでいるかシェアしていきます。参考なると嬉しいです。

結論です。

音声の埋め込みはSEOの効果も抜群です。

上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。

本記事の動画解説版

ブログに音声を埋め込む方法

【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

「ブログに音声ってどうやって埋め込めば良いのだろう?」

こちらのテーマではこのような疑問を解消するために深掘ぼり解説をしていきます。

本テーマの内容

  • ソースコードを使用して埋め込む方法
  • stand.fmの音声をブログにアップする方法

このテーマを読むことのメリットはこのような内容です。

  • あなたのブログに音声を簡単にアップロードできます。
  • アップロードに必要なソースコードを手に入れる事ができます。

ソースコードを使用して埋め込む方法

こちらでは「GarageBand」で音声収録を行い、MP3ファイルに落とした音声をブログに埋め込む方法です。音声の再生タイプに合わせて下記のソースコードを使い分けて下さい。

通常の再生方法で埋め込むためのソースコード

<audio src=”sample.mp3″></audio>

コントローラーを表示させた音声を埋め込む場合のソースコード

<audio src=”sample.mp3″ controls></audio>

自動再生させたいさ場合はこちらのソースコード

<audio src=”sample.mp3″ autoplay></audio>

ループ再生をさせたい場合はこちらのソースコード

<audio src=”sample.mp3″ autoplay loop></audio>

音声を出さずに再生させるソースコード

<audio src=”sample.mp3″ muted></audio>

こちらを「テキストエディタ」に書き込むことで使用可能になります。みなさんも是非音声を埋め込んでみましょう。

stand.fmの音声をブログにアップする方法

こちらでは「stand.fm」を使って収録した音声をブログに埋め込む際に必要になるソースコードをご紹介します。

パソコン版で音声のソースコードを取得する方法

パソコンで埋め込みたい音声のページを開きます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

こちらをクリックします。

右下にあるこちらのボタンをクリックします。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

埋め込み」をクリックします。

このような画面が出現します。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法
埋め込み」をクリックするだけでコピーされます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法
これでOKです。ソースコードの取得完了!

スマホ版で音声のソースコードを取得する方法

スマホで埋め込みたい音声のページを開きます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

こちらをクリックします。

右下の「・・・」をクリックします。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

埋め込み」をクリックします。

このような画面が出現します。クリックするだけでコピーされます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

これでOKです。ソースコードの取得完了!
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

注意点

取得したソースコードをそのまま「テキストエディタ」に貼り付けると、貼り付け位置が崩れることがあります。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法
このような場合は、下記の「コード」をstand.fmで取得したソースコードに入れて下さい。必要なタグはこちらです。

padding-right: 70px;


              

このように表示されます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法
このように音声の埋め込みができます。

●「テキストエディタ」についてはこちらの記事を参照してください。

こちらのテーマでは「ブログに音声を埋め込む方法」について深掘り解説してきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】30分無料相談

ブログに埋め込む音声収録の方法

【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

「ブログに埋め込むための音声はどうやって収録するのがベスト?」

こちらのテーマではこのような疑問を解消するために深掘ぼり解説をしていきます。

本テーマの内容

  • GarageBandを利用して収録
  • stand.FMを利用して収録

このテーマを読むことのメリットはこのような内容です。

  • Macユーザーは簡単に収録ができます
  • 音声メディアでの配信が同時にできて一石二鳥

GarageBandを利用して収録

こちらでは上記で説明した「MP3ファイル」の形式で音声を収録するための方法をご紹介します。
使用するソフトは「GarageBand」になります。
» GarageBand
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

アプリを開いて「ボイス」をクリック

アプリをインストールすると最初にこのような画面が現れます。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

収録したタイプの音声を選択して「スタート」をクリック

たくさんの機能がありますので是非活用してみて下さい。
【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法

こちらで完成です。

こんな感じで音声を埋め込むことが可能です。

このように簡単に収録可能です。
iPhoneでもアプリは取得可能です。MacBookがなくてもiPhoneがあれば収録自体は可能になります。

音声メディアでの配信が同時にできて一石二鳥

「音声メディアとGarageBandなどのソフトはどのように使い分ければ良いの?」

こちらのパートではこのような疑問にお答えをしていきます。

僕の場合はこのように使い分けています。

  • 音声メディア
    ⇨一般公開する音声
  • GarageBand
    ⇨特定の人だけに届ける音声

音声メディアは現在たくさんのプラットホームがあります。

などたくさんあります。選定基準としてはあなたが発信するジャンルのターゲットがどのプラットホームにたくさんいるかです、まずはリサーチをしましょう。
これからはブログだけ、YouTubeだけ、音声だけでの収益化は難しいと言われています。そのため、満遍なく情報発信を行う必要があります。
流れで言えば、YouTubeや音声メディア、SNSなどを使ってブログに流す、そしてブログを読んでいただきリストを取得する。という流れがベストです。全てはリストありきでメディア運営が成り立ちます。皆さんも是非音声収録をきっかけにしてもらい、メディア運営を円滑に回していきましょう。

●リスト取得についてはこちらの記事を参考にしてください。

こちらのテーマでは「ブログに埋め込む音声収録の方法」について深掘り解説してきました。こちらの件でご相談がある場合は無料相談を行なっています。
» 【無料】30分無料相談

まとめ

【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法
この記事では「【ブログ初心者/執筆作業・その14】ブログに音声を埋め込む方法」というタイトルを下記のテーマにまとめて解説しました。

  • ブログに音声を埋め込む方法
  • ブログに埋め込む音声収録の方法

という内容でお届けしました。

それでは最後まで読んでいただいてありがとうございました!

わかチン
当ブログの筆者。副業をスタートさせたばかりの現役サラリーマン。業種は営業。そのため、ある程度の時間的自由がある。その中でライティング、デザイン、プログラミング、ブログの執筆をメインで活動中。また、疲れた時はメルカリで不用品販売を行っている。本業よりも副業の業務が優先の37歳。