ブログ記事中に音声や音楽ファイルプレイヤーを埋め込む方法
どうも、バウリンガルです
今回はブログ上でmp3ファイルを再生する方法
僕は主にGoogle翻訳音声を再生して遊んでます
こんなの
mp3なのでGoogle翻訳だけじゃなく普通に音楽などを再生させることも出来ますが、権利とかね、色々あるから。ね
正直どこに需要があるのかわかりません
だが少なくとも僕にはあった！
ネタ記事にしか使ってないけど、なんか面白くない？
こんなもん面白いと思ってるのは地球で自分だけという可能性も多少、いや微細に孕んでおりますが、解説していきます
スマホからも同じように出来ると思いますがPC向け解説になっています。ごめんね
Google翻訳音声をダウンロードする
まずは再生するための音声ファイルを作りましょ
Google翻訳のページから直接音声ファイルはダウンロード出来ないと思います。多分
ってことでこのサイト
こちらをお借りしていきましょね
使い方はくっそ簡単でして、登録も何も不要です
Textのボックスに喋らせたい言葉を入力なりコピペして
下のVoiceで言語を選びSubmitで出力するだけです
日本語で喋らせたければTextに日本語を、VoiceでJapaneseを選択して
Submitを押すと下にこう生成されます
Soundsからテスト試聴とダウンロードが可能になります
ファイルの拡張子はmp3ですね
で、ちょっといじってブログに貼り付けるとこうなります
注意点として、音声はグーグル翻訳のものなのですが上記のサイトで翻訳自体は出来ません
『テキストボックスに日本語を書いて英語で出力』しようとしても出ません
なので面倒ですが、日本語を英語に翻訳してダウンロードしたい場合はまず本家グーグル翻訳で
日本語→英語に変換 、英文をコピー、こちらのサイトにペーストの手順となります
んじゃ次はブログへの貼付け方を見ていきましょ
Dropboxをインストールする
Dropboxとは無料のオンラインストレージです
オンライン上にファイルをアップロードして管理出来るんですね
こちらからダウンロード出来ると思います
Dropboxの使い方は僕が拙い知識で解説するよりももっとわかりやすくまとめて下さっている場所がありますのでそちらを参考にして下さい
適当なメールアドレスがあれば誰でも使えます
そんなに難しいことはないので、PCに慣れている方なら読まなくても感覚的にインストールから使用までいけるんじゃないかな？
でも一応ある程度は勉強して使いましょね
インストールからアカウント登録が終わったら先程ダウンロードしたmp3ファイルをぶちこんでおけばOKです
ブログへの貼付け方
さてさて、音声ファイルとDropboxが揃ったらあとはブログ記事に貼り付けるだけです
はてなブログを元に解説しますが他のブログサービスでも使える。はず。とのこと
勉強させて貰ったサイトはこちら
大変簡潔にわかりやすく解説してあるので読んでもらえばもうわかるのですが、参考にしつつ一応こちらでも解説を
Dropboxからリンクを取得
まずはDropboxからファイルへのリンクを取得する方法
ブラウザから自分のDropboxアカウントにアクセスしてもらい、ファイルにマウスカーソルを置くと
このような表示になると思います
で、共有ボタンをクリックすると画面はこう変移します
この画面から右下にある『リンクのコピー』をクリックすることでこのファイルへのリンクを取得することが出来ます
で、まずはここまで。これは一旦置いといて
ブログへの貼付け
先程の参考リンク
ブログにmp3等の音声ファイルを簡単に埋め込む方法 - DTMスキルアップメモ - frenchbread
さんより引用
手順２）HTML編集で、プレイヤーを埋め込む場所に以下（赤字部）を貼り付け。ただし「www.dropbox.com」の部分を「dl.dropboxusercontent.com」に置き換え「dl=0」は削除する。
<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls></audio>
さっきDropboxから取得したリンクは
https://www.dropbox.com/s/[固有の文字列].mp3?dl=0
のようになっているかと思います。ここから後ろの不要な?dl=0部分を削り、前半のhttps～/s/までも削り
残った[固有の文字列.mp3] を
<audio src="https://dl.dropboxusercontent.com/s/[取得したURL]" controls></audio>
中の[取得したURL]に上書き
すると
<audio src="https://dl.dropboxusercontent.com/s/ebigt6jasuadjtu/korede.kunsei.da.yon.mp3" controls> </audio>
このようなタグが完成します。あとはこれをHTMLに貼り付けて
コレデ・カンセイ・ダ・ヨン
となります
どうかな？ わかりにくかったかな？
うん。自分でもわかりにくいかなと思った。説明難しいね
まとめ
結構面倒くさいね！！
慣れれば一つ作るのに３分以内程度なんですが、慣れたところで
使い道がねぇよ！
っていうね
注意点としまして、これらはデータをブログにアップロードしているわけじゃなくDropboxへリンクを貼っている形なのでDropboxのファイルが削除されると聞こえなくなります
自分で削除しなきゃ消えないことではあるんだけど、あんまり大事な記事では使わない方がいいかもしれない。やっぱ小ネタだよね
Dropbox内のディレクトリ構造、フォルダやファイルの場所を弄ってもリンク先は変更されないようなのでそこは大丈夫
以上でした
手間の割りに何の意味があるのか全くイミフですが、僕はそのようなイミフが好きなので仕方ありません
是非皆さんイミフの輪を広げましょう
