テキストから音声ファイル (mp3) を作成し、その音声ファイルをブログ、ホームページに埋め込み、貼り付けて、再生する方法 🎶

クライミング友と会話をするためにフランス語をメモしているけれど、いざ会話となれば発音が重要になるので、音声ファイル (mp3) をブログ、ホームページに埋め込み、貼り付けてみることにしました。このページでは、音声ファイル (mp3) を簡単にグログ、ホームページに埋め込み、貼り付ける方法をメモしています。


✅ テキストから音声ファイルをつくる方法

お手軽に Sound of Text サイトを利用しています。

1️⃣ (Text) テキストを打ち込む

2️⃣ (Voice) 言語を選ぶ

3️⃣ Submit をクリック

4️⃣ DOWNLOAD

⚠️ Googleの翻訳機能をダイレクトにブログに貼ることができいれば便利なんだけれど、今の所無理そうなので Sound of Text サイトを利用しています。


このサイト自体には、Googleの翻訳機能のような変換 (日本語からフランス語など) はできません。ので、打ち込んだテキストと言語の選択は、同じことが重要です (フランス語で書いたテキストの場合、言語の選択はフランス語)。


✅ 音声ファイルの置き場所

使いたいファイルをサーバー (オンライン上) にアップロード (Dropbox とか GoogleDrive などに)

 

✅ Dropbox を使用

✅ 2023.12 からは Google Drive に変更しました


✅ 音声ファイルの置き場所 Dropbox 編

まずはアカウントの取得から 👉🏻 Dropbox

1️⃣ ファイルをアップロード

2️⃣ ファイルを共有 (リンクサイトをコピー)

3️⃣ オリジナルのリンクサイトはこんな感じです 

➡️ https://www.dropbox.com/取得したURL (オリジナル).mp3?dl=0

➡️ https://www.dropbox.com/取得したURL (オリジナル).mp3?取得したURL (オリジナル)&dl=0


取得したオリジナルのリンクサイトの変換


4️⃣ https://www.dropbox.com/ ➡️ https://dl.dropboxusercontent.com/


5️⃣ &dl=0 ➡️ この部分だけ削除


6️⃣ 変換後のリンクサイト ➡️ https://dl.dropboxusercontent.com/取得したURL (オリジナル).mp3?取得したURL (オリジナル)


最終的にはこんな感じのタグをブログに (HTML) に貼り付ける。

< audio src="https://dl.dropboxusercontent.com/取得したURL (オリジナル).mp3?取得したURL (オリジナル)” preload="auto" controls > </audio>


例えばこのブログのタイトルの音読は、

les Falaises de Grès

✅ 音声ファイルの置き場所 Google Drive 編

🚧 再生できない状況 🚧

1️⃣ ファイルをアップロード

2️⃣ 共有 ➡️ リンクを取得 ➡️ 一般的なアクセス ➡️ リンクを知っている全員 ➡️ リンクをコピー


埋め込みコードの作成:

<audio> タグを使った埋め込みコードを作成します。

YourFileID の部分は、実際の Google Drive ファイルの ID に置き換えてください。ファイル ID は共有可能なリンクから取得できます。リンク内で/d/と/viewの間にある文字列がファイルの ID です。


<audio controls>

<source src="https://drive.google.com/uc?export=download&id=YourFileID" type="audio/mp3">

 Your browser does not support the audio element.

</audio>


例えばフランス語で「このバスはエギスハイムに停まりますか?」

「Est-ce que ce bus s'arrête à Eguisheim? 」と音読すると、

補足:Google Drive を使う場合は (2024.5)

 <iframe> ~~ </iframe> を使用することで音楽ファイルを再生することが可能です。デザインに関しては検討が必要ですが。

1️⃣ ファイルをアップロード

2️⃣ 共有 ➡️ リンクを取得 ➡️ 一般的なアクセス ➡️ リンクを知っている全員 ➡️ リンクをコピー


3️⃣ 取得したオリジナルのリンクサイトの変換

https://drive.google.com/file/d/取得したURL (オリジナル)/view?usp=sharing


取得したオリジナルのリンクサイトの変換

4️⃣ view?usp=sharing ➡️ preview


5️⃣ 幅と高さに関してはお好みで調整

<iframe src="https://drive.google.com/file/d/取得したURL (オリジナル)/preview" allow="autoplay" width="350" height="130">

ところで、ブログやホームページにアフィリエイトを貼っていますか?アフィリエイトを始めるならA8.net (エーハチネット) がオススメです。このホームページでも使っています 👉🏻まずは無料登録 だけでもしてみてはいかがでしょうか?他社もいろいろ試しているけれど、A8.net (エーハチネット) は登録されている企業が多く、使い勝手がいいです。


✍🏻 WordPress 簡単インストール!WordPress でブログデビューするなら、

👉🏻 ConoHa WING

👉🏻 エックスサーバー

👉🏻 ロリポップ

のスペックとコストを調べてみることをお勧めします.


✍🏻  HTML/CSS を使って “写真をスライドショー” する方法 ✏️

✍🏻 簡単に photoshop を使って写真をアニメ風 (Cartoon effect ) に変換する方法

0コメント

  • 1000 / 1000

こちらの記事もどうぞ